В ходе популяризации и развитии социальных сетей, можно легко заметить некоторые новшества на Web-страничках. Речь идет про социальные кнопки, благодаря которым можно легко и комфортно распоряжаться интересующей информацией. Вся морока с копированием, другими лишними действиями – по сути своей теперь нерациональна. Для того чтобы поделиться информацией с друзьями или просто отметить для себя новостями – достаточно нажать на кнопку, характерную для социальной сети пользователя.
Так давайте разберемся, как добавить эту самую кнопку на сайт. Внимание уделим лидирующим ресурсам, таким как Вконтакте, Twitter, Google+, Facebook. Количество скриптов влияет на скорость загрузки страницы, поэтому размещаем шаблон в конкретное место, где, по вашему мнению, должна быть кнопка, допустим, «Твитнуть». Код для такой кнопки, горизонтального вида счетчика таков:
<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, следует отметить использование сегодняшних стандартов HTML 5. Так вот код средней кнопки имеет вид:
<!-- Разместите этот тег в теге head или непосредственно перед закрывающим тегом body -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!-- Разместите этот тег в том месте, где должна отображаться кнопка +1 -->
<g:plusone size="medium"></g:plusone>
Легендарный Facebook. Данная социальная сеть пользуется признанием во всем мире. Активные пользователи зарегистрированы как на западе, так и в странах СНГ. К слову, именно в Facebook участвует огромное количество звезд мирового масштаба. Код для стандартной кнопки «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>
На десерт – Вконтакте. Самая «крутая» социальная сеть в Рунете. Код кнопки выглядит достаточно наворочено. Необходимо получить для сайта apild (идентификатор). Вот стандартный код:
<!-- 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 пикселей в высоту. Когда кнопки удастся разместить – результат не заставит себя ждать. Во-первых: гости смогут легко обмениваться информацией, статьями, при этом рекламируя сайт. Во-вторых: появляется возможность отслеживать, что интересует читателя.
Если в вашем доме не хватает уюта, то рекомендую посмотреть диваны, а потом купить один из них, в лучшем интернет-магазине «Сток Диванов», который находится по адресу stokdivanov.ru. |