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

Главная » Уроки » SMM и SMO

В ходе популяризации и развитии социальных сетей, можно легко заметить некоторые новшества на 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&amp;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.

Категория: SMM и SMO; Урок сделан: 23.01.2012; Просмотров : 1950; Комментарии : 1; Рейтинг : 5.0/1;
Всего комментариев: 1

Автор: evgeniusbo (12.06.2012 00:18)

Доброго!
Все чудно разместилось кроме facebook'а, в чем может быть дело?


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]





Copyright © 2010 - 2017 Pro100uCoz.ru