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

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

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

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

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

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

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

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

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

<!-- 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 — чекбокс (не отмечаем), если отмечен, то возле кнопки «Нравится» будет выводиться кнопка «Поделиться».
Во время настройки внизу будет выводиться пример кнопки.

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

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

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

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

<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

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

Tweet

<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>

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

Tweet

<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>

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

Tweet

<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>

Результаты

Добавляем на сайт лайки Вконтакте, 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;
}
Просмотров:

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

Adblock
detector