Добавляем кнопки социальных сетей на блог

Одно время, крайне популярны в интернете социальные закладки. Те, кто во время успел получить с них трафик, были в шоколаде! Но их популярность очень быстро ушла и даже ссылки с них сейчас не воспринимаются поисковыми системами как фактор ранжирования в поисковой выдаче. Единственная возможность сейчас, для получения социального трафика это «лайки» соц.сетей. Для установки этих кнопочек на сайт есть куча всевозможных плагинов для любых CMS, но зачем нагружать лишний раз движок если это можно сделать вручную! Сейчас расскажу как.

Начнем с кнопки «ВКонтакте»

Для получения кнопки переходим на эту страницу и видим:

Добавляем кнопку ВКонтакте на сайт

Кнопка «ВКонтакте» единственная из кнопок, которая имеет ID вашего сайта в коде. И код будет не рабочим пока вы не нажмете «Сохранить». Только после этого в коде API_ID заменится на ID вашего сайта. Теперь его можно поставить на сайт.

Код «ВКонтакте» имеет 2 части и ставится в 2 этапа. На первом этапе вставляем верхнюю часть кода в файл header.php. Располагаем где-нибудь в секции head.

 
<head profile="http://gmpg.org/xfn/11">
 ...
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?49"></script>
<script type="text/javascript">
  VK.init({apiId: API_ID, onlyWidgets: true});
</script>
...
</head>

Естественно, что вместо API_ID у вас будет указан ID вашего сайта.
Вывод самой кнопки устанавливаем кодом:

<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button", verb: 1, height: 20});
</script>

Следующая кнопка от Facebook

Код кнопки от Facebook можно получить здесь

Добавляем кнопку Facebook на сайт

Советую не указывать url, если только не хотите вести счетчик для каждой страницы вашего сайта. Итак, выбираем параметры кнопки и жмем «Get Code» (Получить код)

Добавляем кнопку Facebook на сайт

Код от Facebook нужно вставлять не в секцию head, а сразу после открытия тега. Обычно, он находится тоже в файле header.php вашего шаблона.

Кнопка Twitter

Код кнопки берем здесь

Добавляем кнопку Twitter на сайт

Дальше все просто, копируете код и вставляете куда считаете нужным для вывода.

Добавляем гугловскую кнопку G+

Идем сюда и видим:

Добавляем кнопку от Гугла на сайт

Здесь тоже все легко, выбираем параметры кнопки и копируем код туда где задуман её вывод.
Установка этих кнопок достаточно простая и с ней разберется практически любой человек. Ну, на самом деле, что может быть сложного в копировании кода кнопок? Но проблемы начинаются тогда, когда блоггер копирует коды кнопок и получает что-то типа:

Добавляем кнопку от Гугла на сайт

Как сделать вывод кнопок в один ряд? Есть много способов. Я, например, создал однострочную таблицу и каждую кнопку положил в отдельную ячейку. Вот, например, код моих кнопок из single.php:

<table>
<tr>
<td width="100"><div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button", height: 20});
</script></td>
<td width="175"><div class="fb-like" data-send="false" data-layout="button_count" data-width="150" data-show-faces="true"></div></td>
<td width="100"><a href="https://twitter.com/share" class="twitter-share-button" data-via="shurupovod" data-lang="ru">Твитнуть</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></td>
<td width="100"><div class="g-plusone" data-size="medium"></div>
<script type="text/javascript">
  window.___gcfg = {lang: 'ru'};
 
  (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></td>
</tr>
</table>

Он выводит все кнопки в один ряд, результаты вы можете видеть внизу записи. Так я поставил их для себя, вы можете их расположить как пожелаете.
Ну что ж, на этом все, если понравилось лайкайте 😉

32 комментариев
  1. нерадивый бухгалтер
    13 октября 2012 в 2:50

    Я вот, честно говоря, долго думала и поставила плагин, уж очень муторно устанавливать эти кнопки)

    Thumb up 0 Thumb down 0

    • Lalla78
      13 октября 2012 в 7:48

      Да я тоже взяла с апи яндекса, но после этого у меня 3 ошибки на сайте и как их исправлять понятия не имею.

      А какой вы плагин использовали?

      Thumb up 0 Thumb down 0

    • admin
      13 октября 2012 в 10:41

      Да можно и плагин, но просто хотелось поставить только кнопки, которые реально нужны. И хорошего плагина, который бы кнопку «ВКонтакте» выводил я не нашел. Не очень он популярен за рубежом. 

      • Lalla78
        14 октября 2012 в 7:53

        А на апи яндекс, там вроде все кнопки есть? Или вы каждую отдельно устанавливаете?

        Можно личный вопрос по шаблону? Сколько вам стоил этот? Вы говорили, но что-то я запамятовала. Буду признательна за цифру.

        Thumb up 0 Thumb down 0

        • admin
          8 ноября 2012 в 18:22

          каждую кнопку отдельно, вроде за шаблон 100$ платил

      • lex
        16 февраля 2015 в 11:07

        ВКонтакте не то чтобы непопулярен на Западе, он в сша отнесён недавно к разряду пиратских сайтов. ВКонтакте и ещё один российский сайт.

        Thumb up 0 Thumb down 0

        • 20 февраля 2015 в 22:54

          Но, при всем этом, так как мы все ориентируемся в основном на русскоговорящую аудиторию, то сбрасывать такое количество трафика (возможное) с ВКонтакте не стоит однозначно.

          Thumb up 0 Thumb down 0

          • Lalla78
            20 февраля 2015 в 23:07

            Есть вебмастера, которые весьма ревностно относятся к своему трафику и не хотят продвигать вконтакте. Получается, что даже если ваша группа выплывет, то отразится — это в первую очередь на соцсети.

            Thumb up 0 Thumb down 0

          • 20 февраля 2015 в 23:24

            Не совсем понял, что вы пытались сказать. Вы говорите о том, что вебмастера не желают своими действиями продвигать ВКонтакте в поисковых системах? Капля в море погоду не делает… Или вы говорите, что если всплывет група ВКонтакте, то это может как-то негативно отразиться на поисковом продвижении? Тут я также не думаю, что такое возможно впринципе…

            Thumb up 0 Thumb down 0

  2. Евгения
    8 февраля 2013 в 19:19

    Я тоже сначала плагин поставила, но потом перешла на код, только сделала кнопки в одном стиле, а не брала каждый код отдельно.

    Thumb up 0 Thumb down 0

    • 15 февраля 2015 в 15:39

      Дело в том, Евгения, что плагины затормаживают работу сайта — а сейчас наиболее важно, чтобы сайт открывался быстро — на это обращают внимания поисковые системы в первую очередь.
      Я также если буду выводить кнопки социальных сетей — то сделаю это с помощью интеграции кода.

      Thumb up 0 Thumb down 0

    • lex
      16 февраля 2015 в 11:08

      Можно самому сделать свой дизайн нужных кнопок. Это привлечёт внимание пользователей и простимулирует их понажимать на кнопочки соцсетей.

      Thumb up 0 Thumb down 0

  3. Елена Олейникова
    9 февраля 2013 в 0:46

    Пока с такими кнопками не заморачиваюсь, купила плагин «Заплати лайком» и ставлю его в конец статьи с призывом, мол, если пост понравился, лайкни. Там основное все есть, в том числе и «ВКонтакте».

    Thumb up 0 Thumb down 0

    • Алекс
      27 февраля 2015 в 22:42

      Зачем покупать плагин «Заплати лайком». Этот плагин давно уже в свободном доступе. Скачать его просто. Многие блогеры им делятся.

      Thumb up 0 Thumb down 0

  4. 3 мая 2013 в 10:16

    Скажите пожалуйста, у меня установлены кнопки социальных сетей с одного сервиса. Вот кнопки о которых говорит автор намного эфективнее? А то везде пишут как добавить по одной кнопочке, а у меня все вместе.

    Thumb up 0 Thumb down 0

    • Lalla78
      3 мая 2013 в 12:10

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

      Поэтому, думаю, что нужно пообщаться по этому поводу с программерами на форумах.

      Thumb up 0 Thumb down 0

      • Алекс
        27 февраля 2015 в 22:44

        Лала, на форуме вордпресса есть много тем в которых про эти кнопки рассказывается, и как устанавливать их, и как настраивать и у кого какие ошибки появляются.

        Thumb up 0 Thumb down 0

    • Татьяна
      27 февраля 2015 в 22:59

      Когда все кнопки в одном месте — это ,по-моему, «Одна кнопка».
      Знаю про неё потому, что одно время было масса предупреждений не устанавливать её, поскольку можно занести вирус.

      Thumb up 0 Thumb down 0

  5. 1 ноября 2013 в 10:27

    Спасибо, очень подробная статья. Социальные сети сейчас в моде и раскрутка через эти сети очень популярная, поэтому поставив такие кнопки можно привлечь больше аудитории на свой сайт. Я долго мучился с установкой кнопок социальных сетей и только сейчас разобрался. У меня на сайте сейчас стоит плагин (потому что не знал, как правильно настроить), но сейчас, наверное, займусь изменением. Все-таки лучше не загружать сайт плагинами.

    Thumb up 0 Thumb down 0

    • Lalla78
      1 ноября 2013 в 14:58

      Не понимаю в чем у вас была сложность? Я брала с Апи Яндекса, вставляла на сайт и все панелька готова, у меня Джумла.

      С плагинами связываюсь в последнюю очередь, так как не очень понимаю как они работают и во что может мне вылиться его установка. Да и подводные ссылочки могут появиться после его установки.

      Thumb up 1 Thumb down 0

      • 21 февраля 2015 в 5:08

        Я вот благодаря вашему комментарию повесил ссылки социальные у себя.
        Правда, пока никто не кликает.
        У меня как и у вас джумла — просто в новом модуле вывел и все дела. Никаких проблем — кнопки Яндекса рулят!

        Thumb up 1 Thumb down 0

      • Алекс
        27 февраля 2015 в 22:46

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

        Thumb up 0 Thumb down 0

  6. 25 февраля 2014 в 0:47

    У меня стоит плагин. Работает нормально, как часы. Но тут я согласна с автором — если есть возможность сократить нагрузку на блог, то на до этим пользоваться. Пока возьму эту статью на заметку. Немного наберусь храбрости, чтобы в коды залазить, буду «потрошить»

    Thumb up 0 Thumb down 0

    • Lalla78
      28 февраля 2014 в 19:12

      Сделайте копии, а еще скопируйте хтмл до того, как вы туда полезете, чтобы не рисковать. Мне иногда удавалось такого сотворить, что я сразу же копировала с блокнота оригинал и все восстанавливала назад. Не пренебрегайте элементарными вещами, которые помогут справиться с самодеятельностью.

      Thumb up 0 Thumb down 0

    • Татьяна
      27 февраля 2015 в 23:05

      Замечаю, что все блоггеры вначале устанавливают плагины, а потом, немного разобравшись с кодами, заменяют ими все плагины один за другим.
      Это и есть развитие блоггера и блога.

      Thumb up 0 Thumb down 0

  7. 15 февраля 2015 в 15:37

    С тем, как разместить социальные кнопки под постом — разобрался. Но вот делема заключается в том, как разместить кнопки, как у вас размещены слева от контента в плавающем блоке?

    Thumb up 0 Thumb down 0

    • admin
      16 февраля 2015 в 10:20

      честно скажу, сам с этим не разбирался, когда заказывал дизайн на сайт автор сразу и кнопки поставил, но погуглите это есть в и интернете и не только на моем сайте

      • 20 февраля 2015 в 22:51

        Погуглил — оказывается все вообще просто — необходимо просто в стилях вывести фиксированный блок и указать ему определенные координаты — и тогда кнопочки социальных сетей будут плавать так как у вас.

        Thumb up 0 Thumb down 0

    • lex
      16 февраля 2015 в 11:08

      Место размещения панели определяется стилями. Поэксперементируйте с ними. Располагайте их в header.php своего шаблона

      Thumb up 0 Thumb down 0

      • 20 февраля 2015 в 22:52

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

        Thumb up 0 Thumb down 0

    • Татьяна
      27 февраля 2015 в 23:15

      А почему блог Вы называете плавающим? Кнопочки вроде бы стоят на одном месте, а не плавают никуда?

      Thumb up 1 Thumb down 0

  8. 26 ноября 2015 в 13:25

    Спасибо за подробное объяснение процесса, кнопочки мной успешно установлены и не возникло никаких сложностей, хотя я не специалист в этой области.

    Thumb up 0 Thumb down 0

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

Ваш email никогда никто не узнает. Обязательные поля отмечены *

*
*