Социальные сети стали неотъемлемой частью жизни для миллионов человек. Многие люди проводят там практически всё свободное время. Именно это делает социальные сети незаменимыми в деле раскрутки сайтов. Сегодня у каждой соцсети есть кнопка, которая позволяет посетителям поделиться ссылкой на информацию со стороннего сайта со своими друзьями.

Но подключение этих кнопок остается на совести разработчиков сайта. И хотя все социальные сети предоставляют исчерпывающую информацию по подключению своих кнопок, она разбросана по разделам для разработчиков соответствующих соцсетей. Поэтому я решил объединить все эти разрозненные сведения в одной статье. Речь пойдет о кнопках «Мне нравится» сетей ВКонтакте и facebook, кнопки «+1» сети google+ и кнопки «Твитнуть» сети twitter.

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

Подготовка

На этом этапе нам понадобится завести API-ключи ВКонтакте и facebook.

Начнем с ВКонтакте. Прежде чем вы сможете сгенерировать API-ключ, необходимо создать приложение ВКонтакте. Для этого нужно перейти по ссылке и заполнить поле «Название». В качестве типа приложения выберите «Веб-сайт», укажите адрес и базовый домен своего сайта, нажмите «Подключить сайт». После процесса подтверждения приложения (мне на мобильный телефон прислали код, который нужно было ввести в поле на сайте) вы попадете на страницу приложения, где будет указан ID приложения. Именно он нас и интересует, скопируйте его куда-нибудь.

Теперь займемся facebook. Перейдите по ссылке и нажмите кнопку «Создать новое приложение» (она расположена справа сверху). Укажите название и нажмите «Продолжить». На открывшейся странице сразу под названием будет указан параметр App ID, скопируйте его куда-нибудь.

На этом процесс подготовки завершен.

Создание мета-данных страницы

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

Facebook требует мета-тегов в формате Open Graph. Этот формат поддерживает и ВКонтакте. Google+ поддерживает формат Schema.org. Начнем с Open Graph:

<meta name="description" content="Страница где я приветствую мир!">

<meta property="og:title" content="Привет мир!">
<meta property="og:url" content="http://example.com/blog/hello-world.html">
<meta property="og:image" content="http://example.com/images/blog/icon-100-hello-world.png">
<meta property="og:type" content="article">

<meta property="og:site_name" content="Мой сайт">
<meta property="fb:app_id" content="111222333444555">

Параметры og:title, og:url, og:image и og:type являются обязательными. Они отвечают за название страницы, каноническую ссылку, иконку и тип страницы соответственно. Со списком всех поддерживаемых типов для параметра og:type можно ознакомиться здесь, в моем случае это article. Facebook рекомендует добавлять параметры og:site_name и og:description. Первый содержит название сайта, а второй — описание страницы. Если параметр og:description не указан, соцсети берут описания из мета-тега description. Кроме того, если поместить описание страницы в параметр description, то оно будет отображаться также и в результатах поиска в поисковых системах. Последний параметр — fb:app_id — содержит API-ключ facebook, который мы получили на первом этапе. Если он не указан, для каждой страницы на вашем сайте создается отдельная страница на facebook (подробнее об этом параметре можно почитать здесь).

Теперь добавим параметры Schema.org. Первое, что необходимо сделать, это выбрать тип данных, представленных на странице. Все доступные типы данных можно посмотреть здесь, я выбрал тип BlogPosting, который соответствует записи в блоге. Если вам некогда разбираться с иерархией этих типов, всегда можно указать Thing, так как он самый общий из всех доступных.

После этого нам нужно добавить в тег html несколько атрибутов:

<html itemscope itemtype="http://schema.org/BlogPosting">

Эти атрибуты означают, что внутри тега содержится информация об объекте типа BlogPosting. Далее добавляем саму информацию:

<meta itemprop="name" content="Привет мир!">
<meta itemprop="description" content="Страница где я приветствую мир!">
<meta itemprop="url" content="http://example.com/blog/hello-world.html">
<meta itemprop="image" content="http://example.com/images/blog/icon-100-hello-world.png">

Мета-данные созданы. Переходим к завершающему этапу.

Добавление кода кнопок на страницу

Каждая кнопка состоит из короткого HTML- и JavaScript-кода. Я перекомпоновал их таким образом, чтобы весь JavaScript шел в конце блока кнопок. Начнем с HTML-кода:

<!— Кнопка ВКонтакте —>
<div id="vk_like" class="button"></div>

<!— Кнопка google+ —>
<div class="g-plusone" data-annotation="bubble" data-href="http://example.com/blog/hello-world.html"></div>

<!— Кнопка twitter —>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://example.com/blog/hello-world.html" data-text="Привет мир!" data-via="Popel_Studio" data-lang="ru">Tweet</a>

<!— Кнопка facebook —>
<div class="fb-like" data-href="http://example.com/blog/hello-world.html" data-send="false" data-layout="button_count" data-show-faces="true"></div>
<div id="fb-root"></div>

Подробнее с разнообразными параметрами кнопок можно ознакомиться на соответствующих страницах google+, twitter и facebook.

Теперь переходим к добавлению JavaScript-кода:

<!— Кнопка вконтакте —>
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?45" charset="windows-1251"></script>
<script type="text/javascript">VK.init({apiId: 1112233, onlyWidgets: true});</script>
<script type="text/javascript">VK.Widgets.Like("vk_like",{
    type: "mini"
});</script>

Вместо числа 1112233 в код нужно подставить ID приложения ВКонтакте, которое мы получили на первом этапе. Инициализация кнопки позволяет передать ей ряд параметров, в том числе и тип кнопки. Полный список параметров для кнопки ВКонтакте можно увидеть здесь

<!— Кнопка google+ —>
<script type="text/javascript">
    window.___gcfg = {lang: 'ru'};
    (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>

<!— Кнопка twitter —>
<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>

<!— Кнопка facebook —>
<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&appId=111222333444555";

    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Вместо числа 111222333444555 в код нужно подставить параметр App ID для приложения facebook, который мы получили на первом этапе.

Важное замечание: кнопки twitter и facebook не будут работать для локальных веб-страниц. Это связано с тем, что в коде этих кнопок адрес JavaScript-файлов указан без протокола.

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