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

Вернуться
Опубликовано: 12.02.2015 г.

Инструкция по установки на свой сайт кнопок like от популярных социальных сетей.

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

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

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

 

 

 

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

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

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

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

Vidjet VK

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

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

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

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

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

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

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

Like от Facebook

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

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

Facebook

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

kod_FB_Vidjet

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

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

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

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

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

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

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

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

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

Варианты кнопки Tweet Button

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

Вертикальная кнопка с большим счетчиком вверху:

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

 

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

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

Google+1

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

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

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

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

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

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

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

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

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

 

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

На этом пожалуй все, если есть вопросы или предложения — оставляйте в комментариях. И проверьте как работают наши кнопки like чуть ниже  ;-) Спасибо!

10073 2

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

  1. Спасибо большое за статью, очень помогла в моем сайте!

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

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