Социальные кнопки на вордпресс без плагинов за 5 минут.

Постоянные читатели наверное заметили, что я наконец-то обзавелся самыми распространенными социальными кнопочками. (Пощелкайте их кстати 🙂 )

Я поставил фейсбук, контакт, твиттер и гугл плюс.
Прикручивание этих кнопок было не самым простым делом. Ведь надо было не только найти код, но и аккуратненько вставить, чтобы выравнять аккуратненько, да и контакт все время норовил выбиться в отдельную строку.
Однако справился, и сейчас могу ставить эти кнопочки на любой вордпресс сайт менее чем за пять минут.

Одно уточнение, я ставлю кнопки так, чтобы они отображались только в записях. Что в 95% случаев как-раз то, что нужно.

Итак:
Первым делом нам надо зарегаться вконтакте. Это единственная система требующая регистрацию.

Для этого идем на vk.com/developers.php?oid=-1&p=Like

Вбиваем адрес и название, обязательно щелкаем кнопку сохранить. После этого, в нижнем поле с кодом, вместо «API_ID» будет числовое значение, которое нам нужно.

Копируйте, чуть позже мы вставим его в код.

Переходим к самому коду. В шаблонах WP бывает по разному. Где-то есть файл single.php, где-то все делается через index.php. Если есть сингл то будем редактировать его, если нет, то редактируем индекс.

Итак в нашем файле ищем строку с функцией the_content(); иногда в скобках бывает текст, для нас непринципиально.

Сверху от этой функции вставляем:

<?php if ( is_single()){?>

<div style="float: right;  text-align: center; margin-left: 10px;">
<p>
<a rel="nofollow" href="http://twitter.com/share?counturl=<?php the_permalink(); ?>" class="twitter-share-button" data-count="vertical" data-via=""></a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</p>
<p>
<g:plusone size="tall"></g:plusone>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</p>
</div>
<? } ?>


Тут мы делаем кнопку твиттера и гугл плюса справа сверху. Как у меня.

А под той функцией ставим код:


<?php if ( is_single()){?>
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?48"></script>
<script type="text/javascript">
  VK.init({apiId: API_ID, onlyWidgets: true});
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div style=" position:relative; height: 22px; margin:0 auto; width:340px; margin-bottom: 5px; ">
<div style="float: left;">
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button"});
</script>
</div>
<div style="float: right;">
<fb:like href="<?php the_permalink(); ?>" layout="button_count" show_faces="false" font="arial"></fb:like>
</div>
</div>
<?}?>

Заменяем API_ID на код полученный от контакта

И в общем-то все.

Теперь объяснения:

—первая и последняя строка в обоих кусах «<?php if ( is_single()){?>» и «<?}?>» задает выполнение кода при условии, что открыта запись, а не рубрика, архив или тег. То есть если у вас single.php, то скорее всего можно и без этих строк.

— код «<?php the_permalink(); ?>» в твиттере и фейсбуке нужен для того, чтобы определить адрес страницы, чтобы было, что передавать.

Самое сложное для меня было разобраться с стилями. Я с css вообще очень мало работаю…
В общем верхний блок поставил справа и с внутренним выравниванием по центру, чтобы гугловская кнопка ровно под твиттерской сидела.
В нижнем блоке сначала хотел расставить кнопки по краям, но на широких шаблонах слишком много места пустого остается, поэтому я сделал контейнер шириной 340 разместил его по центру, а уже в нем раздвинул кнопки по краям. На моем белом фоне смотрится все равно не очень, но в шаблонах с четкими границами записи — удовлетворительно.

Вот такие социальные кнопки без плагинов за пять минут.
Вообще же плагины для того и пишут, чтобы не лазить в код и не лезть заново при смене шаблона. :))
Но считается, что плагины создают лишнюю нагрузку, и поэтому кому-то будет предпочтительней голый код.
Однако если будут желающие, то попробую написать, там несложно.

И раз уж заикнулся о css, то вот тут ссылочка с примерами css3, глядя на которые, понимаю, что мои жалкие потуги в выравнивании кнопочек и рядом не стояли. ^^ Дизайн это все же не мое, хотя, конечно, было бы круто уметь так же клепать.


Автор: Elsper.ru


VN:F [1.9.14_1148]
Rating: 4.7/10 (6 votes cast)
Социальные кнопки на вордпресс без плагинов за 5 минут., 4.7 out of 10 based on 6 ratings

4 thoughts on “Социальные кнопки на вордпресс без плагинов за 5 минут.

  1. я и на главной оставляю и добавляю все коды через виджет текстовый
    но иногда и в sidebar.php
    иногда и в single.php
    по-разному в общем

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Спoнcopcкиe ссылки