Как добавить социальные кнопки на сайт

В статье про социальное продвижение, я отмечал важность SMO (Social Media Optimization) в продвижение сайта. Теперь поговорим непосредственно о том, как сделать социальную оптимизацию на своем сайте.

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

Это и есть социальные кнопки, благодаря которым достигается SMO, а далее и социальная активность. Эта статья посвящена вопросу где взять код этих соц. кнопок и как правильно установить их к себе на сайте. Рассмотрим для начала установку Google+.

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

Настроить и получить код кнопки для социальной сети Google+ можно на странице http://www.google.ru/intl/ru/webmasters/+1/button/index.html:

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

После проведения необходимых настроек, скопируйте код кнопки и разместите на сайт в том месте, где нужно вывести кнопку google +1. Код должен быть примерно таким:

<!-- Поместите этот тег туда, где должна отображаться кнопка +1. --> <g:plusone></g:plusone> <!-- Поместите этот вызов функции отображения в соответствующее место. --> <script type="text/javascript"> (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>

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

В конце отмечу важность Google+1: дело в том, что в некоторых случаях количество плюсов учитывается при ранжировании сайтов в Google. Поэтому советую Вам набирать побольше плюсиков. Накручивать их не надо, поскольку подобные манипуляции легко отслеживаются и ничего хорошего от этого не будет, кроме большой цифры на счетчике.

Добавляем на сайт кнопку "Мне нравится" от Вконтакте и Facebook

1. Мне нравится от FaceBook Начнем с получения кода кнопки для Facebook. Для этого зайдите на эту страницу: http://developers.facebook.com/docs/reference/plugins/like/. Вы должны увидеть следующую картину:

Справа вверху отображается как будет выглядеть кнопка у Вас на сайте. Разберемся с параметрами, которые можно задать:

1. URL to Like Это необязательный параметр. Если оставить поле пустым, то у каждой страницы будет свой индивидуальный счетчик лайков. Если вписать туда какой-то конкретный адрес URLa, то счетчик будет единым (лайки суммируются со всех страниц этого сайта).

2. Send Button Добавить или убрать кнопку для отправки сообщений. Я рекомендую убрать эту кнопку, т.к. наша цель поставить просто кнопку "мне нравится", хотя возможно у вас совсем другие цели.

3. Layout Style Стиль отображения кнопки. Лично мне больше всего нравится standard.

4. Width Ширина кнопки в пикселях. Я ставлю обычно не больше 100 пикселей.

5. Verb to display Что будет отображено на кнопке: "мне нравится" или "я рекомендую". Обычно я выбираю первый вариант (стоит по умолчанию), поскольку это более действенный способ замотивировать пользователя поставить лайк.

6. Color Scheme Цветовая гамма: либо белая, либо черная.

7. Font Просто задание шрифта для надписи "мне нравится".

После задания настроек наживаем на кнопку "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/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <-- эту часть кода нужно разместить в месте отображения: --> <div class="fb-like" data-send="false" data-width="100" data-show-faces="true" data-font="lucida grande"></div>

1. Мне нравится от ВКонтакте Теперь рассмотрим как получить код кнопки "мне нравится" от ВКонтакте. Для этого перейдите на следующую страницу: http://vk.com/developers.php?o=-1&p=Like. У Вас должна открыться следующая страница:

Сначала нужно будет добавить новый сайт. Для этого выберите из выпадающего меню "сайт/приложение" пункт подключить новый сайт:

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

<!-- Put this script tag to the <head> of your page --> <script type="text/javascript" src="http://userapi.com/js/api/openapi.js?49"> </script> <script type="text/javascript"> VK.init({apiId: 2872188, onlyWidgets: true}); </script> <!-- 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>

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

Как и в предыдущих случаях, для начала перейдите в место получения и настройки кнопки: https://twitter.com/goodies/buttons. Вы должны увидеть такую страницу:

Выберите из горизонтальных кнопок ту, которая больше всего понравится. Мне больше всего нравится кнопка "Share a link". После того как Вы щелкните по ней, то Вам сразу же предложат готовый код кнопки:

Слева в колонке можно выбрать определенные параметры. Например, можно задать полностью текст твита или же выбрать, чтобы текст брался из html тега <title> сайта. Я всегда выбираю значение из тайтла (Use the title of the page). Можно включить/отключить отображение счетчика "Show count".

Последние три параметра можно опустить (лично я так делаю), поскольку дополнительные приписки к твиту могут раздражать многих. В конце можно задать язык кнопки, а также её размер "Large button". Код кнопки для tweet выглядит следующим образом:

<a href="https://twitter.com/share" class="twitter-share-button" 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>

Добавляем на сайт кнопки "Поделиться"

На последок можно добавить на свой сайт сразу группу социальных кнопок от Яндекса. Для этого перейдите на страницу: http://api.yandex.ru/share/. Вы должны увидеть следующую картину:

Как видно из скриншота Вы можете сами добавлять необходимые сервисы в Ваш блок. Так же есть возможность задания внешнего вида блока. Код блока выглядит следующим образом:

<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"> </script> <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="button" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki, moimir,lj,friendfeed,moikrug,gplus"></div>

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