Добавляем на сайт лайки Вконтакте, Facebook и кнопку Твитнуть

14 августа 2014

Вообще, для для Лайков существует большое количество плагинов, например отличный плагин Pluso (он больше для share чем для like, но плагин отличный), но если все же требуется установить стандартные лайки, тогда накидаю небольшую инструкцию (в первую очередь для себя;)).

Виджет «Мне нравится» — Лайки ВКонтакте для сайта

Для создания лайков Вконтакте заходим на эту страницу http://vk.com/dev/Like, далее настраиваем внешний вид самой кнопки, вводим Название, Адрес, Основной домен и Тематику, или же выбираем нужный сайт из выпадающего списка. Выбираем вариант кнопки, при выборе внизу будет показан пример будущей кнопки, выбираем высоту кнопки и ее название.
Настройка кнопки Мне нравится Вконтакте

Нажимаем сохранить и получаем код для размещения на сайте такого вида:
код для размещения кнопки Мне нравится Вконтакте

Затем код, который выглядит примерно так:

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?115"></script>

<script type="text/javascript">
  VK.init({apiId: 4505264, onlyWidgets: true});
</script>

вставляем в код своего сайта перед закрывающимся тегом </head>, для сайтов на CMS WordPress этот код нужно добавить в файл header.php.

Важно! Если вы до этого добавляли на сайт комментарии Вконтакте или какие-то другие виджеты Вконтакте, то этот код у Вас уже будет размещен на сайте, дважды его добавлять не нужно.

Вторую часть кода, которая выглядит примерно так:

<!-- Put this div tag to the place, where the Like block will be -->
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button"});
</script>

вставляем в код своего сайта в то место, в котором кнопка «Мне нравится» должна выводиться, для сайтов на CMS WordPress этот код чаще всего добавляется в файл single.php.

Like Button для Facebook

Сама кнопка настраивается на этой странице.

Настроек минимум.
URL to Like — Адрес страницы.
Width — Ширина кнопки, можно оставить пустой.
Layout — Шаблон для кнопки, может быть standard — кнопка с текстом, box-count — кнопка и счетчик сверху, button-count — кнопка и счетчик справа (Наш Вариант!), и button — просто кнопка. Выбираем button-count.
Show Friends’ Faces — чекбокс (не отмечаем), если отметить, то под кнопкой будут выводиться фото друзей, которые уже лайкали запись.
Include Share Button — чекбокс (не отмечаем), если отмечен, то возле кнопки «Нравится» будет выводиться кнопка «Поделиться».
Во время настройки внизу будет выводиться пример кнопки.

Нажимаем «Get Code» — и в всплывающем окне получаем код для размещения на сайте:

Первая часть кода, которая выглядит примерно так:

<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/sdk.js#xfbml=1&appId=492073974146494&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Размещаем в код своего сайта после открывающегося тега <body>.

Важно! Если вы до этого уже размещали на сайте виджет комментариев Facebook или другие виджеты Facebook, тогда этот код у вас уже размещен на сайте и дважды его ставить не нужно.

Вторую часть кода, которая имеет примерно такой вид:

<div class="fb-like" data-href="http://denis-creative.com/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

копируем на свой сайт в то место, в котором кнопка Like будет выводиться.

Важный момент! При копировании кода в файлы какой-либо CMS — нужно заменить параметр data-href во втором блоке (адрес сайта):

<div class="fb-like" data-href="http://denis-creative.com/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

на код для постоянных ссылок своего сайта, для CMS WordPress это <?php the_permalink(); ?>, и получим такой код для второго блока, который нужно вставить в место вывода кнопки Like:

<div class="fb-like" data-href="<?php the_permalink(); ?>" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

Для DLE код для кнопки Like Facebook выглядит так:

<div class="fb-like" data-href="{full-link}" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

Для Drupal код для кнопки Like Facebook такой:

<div class="fb-like" data-href="<?php print url(drupal_get_path_alias('node/' . arg(1)), array('absolute' => TRUE)); ?>" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

Создаем Tweet Button или кнопку Твитнуть

Кнопка «Твитнуть» настраивается на этой странице.

Собственно на этой странице https://dev.twitter.com/docs/tweet-button представлена вся документация по настройке кнопки «Твитнуть». Ниже приведу код для нескольких возможных видов кнопки.

Код для размещения необходимо добавить непосредственно в место вывода самой кнопки.

Возможные варианты внешнего вида Tweet Button

Стандартная кнопка:

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Вертикальная кнопка со счетчиком:

<a href="https://twitter.com/share" class="twitter-share-button" data-related="jasoncosta" data-lang="en" data-count="vertical">Tweet</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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Большая кнопка без счетчика:

<a href="https://twitter.com/share" class="twitter-share-button" data-related="jasoncosta" data-lang="en" data-size="large" data-count="none">Tweet</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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Результаты

Рабочий вид кнопки Мне нравится Вконтакте, Like Facebook и Твитнуть на сайте

P.S.
Для того, чтобы кнопки располагались в ряд, необходимо прописать стили для кнопок. Ниже приведен пример размещения кнопок на сайте http://mariakuhtina.com/

Код HTML для кнопок — все кнопки взяты в div с классом .likes

<div class="likes">
    <div id="vk_like"></div>
    <script type="text/javascript">
    VK.Widgets.Like("vk_like", {type: "button"});
    </script>
    
    <div class="fb-like" data-href="http://mariakuhtina.com/" data-layout="button_count" data-height="22" data-action="like" data-show-faces="false" data-share="false"></div>
    
    <a href="https://twitter.com/share" class="twitter-share-button" data-size="medium" 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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

Стили для кнопок:

#vk_like, .fb-like, .twitter-share-button{
    display:inline-block;
    vertical-align:top;
}

#vk_like, .twitter-share-button{
    padding:6px 0 0;
}

.fb-like{
    margin-right:30px;
}

Как установить на сайт виджет для комментариев Facebook

Для того чтобы добавить виджет комментариев от Facebook необходимо проделать чуть больше работы чем с…

Как установить на сайт виджет для комментариев Вконтакте

Для добавления на сайт возможности комментирования с помощью аккаунта Вконтакте, нужно создать виджет на этой…

Ошибка 403 forbidden после переноса Joomla-сайта на другой хостинг

В общем, переносили сайт, вроде все сделали по правилам, осталось подождать обновления NS, но они…

Как добавить видео на свой сайт с использованием тега video в html5

На одном из сайтов клиента понадобилось добавить видео на страницу. Вроде бы задача не сложная,…