Optimization.com.ua - всё о поисковой оптимизации и юзабилити

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

Автор: Сергей Кокшаров, Сентябрь 9, 2011

Версия для печати

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

Ниже представлена информация, где взять код для социальных кнопок и как добавить его на новый сайт. Самыми популярными соц. сетями в Рунете и УАнете можно считать Вконтакте, Facebook, Twitter и Google+, поэтому здесь рассматриваются именно эти сети.

Социальные кнопки для TwitterTwitter — популярный сервис микроблоггинга. Кнопка «Твитнуть» может быть трех разных форм: вертикальный и горизонтальный счётчик и без счётчика. Код кнопки для Твиттера можно взять по этой ссылке.

Ссылку и скрипт, которые присутствуют в коде, не обязательно разносить по разным местам на странице, а добавить в шаблон именно на то место, где должна отображаться кнопка. Например, для горизонтального счётчика код будет выглядеть следующим образом:

<a href="http://twitter.com/share" data-count="horizontal" data-lang="ru">Твитнуть</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

 

Социальная кнопка для Google+Google+ появилась летом 2011 года и уже набрала широкую популярность в сети. Особенность кнопок +1 в том, что информация о пользователях, которым понравилась запись, будет видна в результатах поиска Google, а также количество +1 будет влиять на ранжирование сайтов в поиске. Код кнопки +1 можно получить по этому адресу.

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

<!-- Разместите этот тег в теге head или непосредственно перед закрывающим тегом body -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!-- Разместите этот тег в том месте, где должна отображаться кнопка +1 -->
<g:plusone size="medium"></g:plusone>

 

Социальные кнопки Facebook Facebook давно и активно используется как западными, так и нашими пользователями. Хорошие статьи, попавшие на Facebook, быстро набирают популярность, поэтому устанавливать кнопку «Like» считается обязательным. Код для кнопки «лайк» можно взять здесь.

Кнопка может использовать несколько языков (но придётся править код вручную), а также два варианта текста — «Мне нравится» (Like) и «Рекомендую» (Recommend). Пример кода для стандартной кнопки Like:

<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/ru_RU/all.js#appId=141998869225300&xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>

<div data-send="false" data-layout="button_count" data-width="45" data-show-faces="false"></div>

Обратите внимание на элемент ru_RU в скрипте. По умолчанию стоит английский язык и если не исправить en_US на ru_RU, то кнопка будет содержать «Like» вместо «Мне нравится». Также, для установки кнопки от Facebook необходимо получить так называемый appid (в данном коде он имеет вид 141998869225300). Для его получения воспользуйтесь этой страницей.

 

Социальная кнопка ВКонтактеВконтакте — социальная сеть, популярная в Рунете, где преимущественно преобладают подростки, студенты ВУЗов. Если на сайте публикуются статьи бизнес-тематики, то Вконтакте не очень подходящая сеть для распространения ссылок на эти статьи. В любом случае, код можно сгенерировать на этой странице.

По сравнению с остальными, код кнопки от Вконтакте содержит много элементов и вам также придётся для сайта получить apiId (идентификатор), выбрав в выпадающем списке «Подключить новый сайт» на упомянутой выше странице. Типичный код для кнопки Вконтакте выглядит следующим образом:

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

<script type="text/javascript">
VK.init({apiId: 2011867, 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: "vertical"});
</script>

 

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

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

Автор статьи: Сергей Кокшаров

Главный редактор портала Optimization.com.ua

Обновления на E-mail или RSS

Понравилась статья и хотите получать новые?

 

Проверьте также папку "Спам" для активации ссылки

Подписавшись на обновления, вы получите:
1. Эксклюзивные статьи об интернет-маркетинге, продвижении сайтов и юзабилити
2. Интервью с экспертами отрасли
Гарантируем анонимность e-mail адреса