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

Инструкция по установки на свой сайт кнопок like от популярных социальных сетей. Обычно все пользователи для этих целей используют готовые плагины, например отличный плагин Pluso, но он скорее для разшаривания чем для лайков и не всегда подходит.

Если Вам нужны кнопки лайк то это то что нужно.

Итак начнем, первым на очереди виджет Vkontakte.

 

Виджет «Мне нравится» — Like Vkontakte на сайт

Для размещения виджета like от Vkontakte на своем сайте заходим на эту страницу

Для начала Вам нужно зарегистрировать свой сайт в виджетах Вконтакте. Выберите из выпадающего списка "подключить новый сайт" и заполните основные поля формы, затем нажмите сохранить. Вашему виджету присвоен id и теперь осталось только выбрать вид дизайна.

Настраиваем внешний вид кнопки.  Выбираем вариант кнопки, ниже будет приведен пример Вашей кнопки, выбираем высоту кнопки и название.

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

Vkontakte генерирует два "куска" кода для виджета, первый что-то похожее:

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

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

Вставляем перед закрывающим тегом </head>.

Он подключит скрипт JavaScript Vkontakte и активирует именно Ваш виджет(зарегистрирован для сайта который поодключали ранее).

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

Второй "кусок" кода, что-то похожее:

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

Вставляем в том месте где должна размещаться сама кнопка.

 

Like от Facebook

Заходим на эту страницу.

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

Нажимаем кнопку «Get Code» — появится окно с Вашим кодом:

В этом окне можно выбрать вариант кода (HTML5, XFBML, IFRAME или Адрес), обычно ставят стандартный код HTML5.

Facebook тоже генерирует два "куска" кода, первый нужно вставить после открывающего тега <body>. Вот как он примерно выглядит:

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

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

Второй-же "кусок" кода вставляем в том месте где должна размещаться сама кнопка like

<div class="fb-like" data-href="http://web-icon.com.ua/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

Важно знать! Если вы копируете виджет Facebook на другой сайт, не забываете изменить параметр data-href="новый сайт". Можно использовать теги CMS при передаче этого параметра.

 

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

Страница настройки виджета находится на этой странице.

На этой странице https://dev.twitter.com/docs/tweet-button размещена вся документация по настройке.

Код необходимо вставить в место вывода самой кнопки like.

Варианты кнопки 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>

 

Создаем кнопку Google+

Перейдите на страницу для настройки виджета Google+

Гугл сделал все еще проще, Вам нужно только выбрать несколько параметров:

Размер: small, medium, standard и tall (Внешний вид также отображается справа от полей настроек). Выбираем - medium

Примечание: встроенное, всплывающее и нет. Это дополнительный текст возле кнопки, который выводит "+103559988 Рекомендовать в Google". Выбираем - нет

Язык: Здесь все понятно, это язык всплывающих подсказок

Расширенные настройки позволяют выбрать вид кнопки, когда именно выполнять код кнопки, добавить функции JavaScript и определение URL которому пользователь ставит like.

Не выставляем эти параметры, оставим все по дефолту.

Получаем код в поле под примером внешнего вида:

<!-- Вставьте этот тег в заголовке страницы или непосредственно перед закрывающим тегом основной части. -->
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'ru'}
</script>

<!-- Поместите этот тег туда, где должна отображаться кнопка +1. -->
<div class="g-plusone" data-size="medium" data-annotation="none"></div>

Так-же как с виджетами Facebook и Vkontakte имеем два "куска". Первый в привычное место перед закрывающим тегом </head>.

Второй-же в то место где должна выводится кнопка Google+1

 

P.S. После размещения всего этого хозяйства на своем сайте, скорее всего будет желание как-то все облагородить. Привожу простой код CSS который нужно вставить в ваш файл стилей:

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

На этом пожалуй все, если есть вопросы или предложения - оставляйте в комментариях. Спасибо за внимание :)

visibility 238 май 2018
css
share

Обсуждение

Похожие статьи

Как перенести WordPress на новый домен?

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

visibility 202
insert_comment 0
share

Сборщики проектов Gulp и Grunt

Обзор сборщиков проектов Gulp и Grunt, преимущества, плагины, что выбрать лучше?

visibility 231
insert_comment 0
share

Создание запросов к базе данных MySQL на примерах

MySQL – это одна из множества СУБД, работающая с поддержкой языка программирования PHP. Такая БД не...

visibility 277
insert_comment 0
share
send