Добавляем кнопки социальных сетей на сайт

social05-2181102Кнопки социальных сетей под каждой статьей сайта позволят читателям делиться ссылкой на статью со своими друзьями. Наверное каждый видел на многих сайтах кнопки «Мне нравится» или «Рекомендую», еще называемые «Лайки» (от слова Like). Имея такие кнопки под каждой статьей на своем сайте, ваш читатель, будучи зарегистрированным в какой-нибудь популярной социальной сети, может легко поделиться ссылкой на вашу статью со своими друзьями, просто нажав эту самую кнопку. Таким образом вебмастер может получить дополнительный трафик, с социальных сетей.

В данной статье я хочу рассказать о том, как разместить такие кнопки на своем сайте, затрону я лишь 3 самые популярные социальные сети. Перейдем от лирики сразу к делу. Чтобы разместить кнопки на сайте, нужно для начала получить коды этих кнопок. Дальше я буду писать как получить код кнопки той или иной социальной сети.

Twitter

twitter-5097310Популярный сервис микроблоггинга. Для тех, кто не знает, рекомендую к прочтению мою статью «Что такое твиттер и как им пользоваться». Итак, чтобы получить код кнопки, нужно зайти на twitter.com. В самом низу переходим по ссылке «Разработчикам». На открывшейся странице, переходим по ссылке «Get started with the API», далее, в блоке Twitter for Websites по ссылке «Tweet Button», как видите там есть много других примочек к сайту.

На открывшейся странице будет много вариантов кнопок, с картинкой, документацией и кодом к каждой. Выбираете понравившуюся вам, например Default Tweet Button social01-8100895. Прямо под ней будет код, который и нужно разместить на сайте.

social02-1036395

Facebook

facebook-1920349

Все в принципе аналогично как и в твиттере. Переходим по ссылке Разработчикам. Далее жмем на блок «Build for Websites».

social04-2013167

В меню справа будет пункт в меню «Core Concepts», жмем, выбираем «Social Plugins» (на всякий случай ссылаюсь). Выбираем Like Button. Открывается страница с формой и превью кнопки справа.

  • URL to Like – URL сайта на который ставим кнопку;
  • Send Button (XFBML Only) – дополнительная кнопка «отправить». Я лично не использую ее, поэтому галочку можно убрать;
  • Layout Style – стиль кнопки. На выбор три варианта есть: standard – просто кнопка, button_count – кнопка со счетчиком справа и box_count – кнопка со счетчиком сверху.
  • Width – ширина блока кнопки со счетчиком
  • Show Faces – показывает аватарки нажавших.
  • Verb to display – текст кнопки.
  • Color Scheme – цвет кнопки, для большинства сайтов, я думаю, подойдет вариант “light”. Если у вас сайт на темном фоне, выбирайте «dark».
  • Font – шрифт кнопки.

После внесения настроек жмем кнопку «Get Code» и получаем код.

ВКонтакте

vk-4369913Все аналогично. Только В Контакте есть 2 варианта кнопок, один из которых требует регистрации. Лично мне по душе простой вариант, не требующий регистрации В Контакте. Итак, все так же, заходим на страницу «Разработчикам» и выбираем «Виджеты и сторонние сайты». На открывшейся странице будет несколько виджетов, но выбирать нужно НЕ «Мне нравится» — этот виджет требует регистрации.

Справа в боковой колонке ищем «Share» — это публикация ссылок. Она не требует регистрации в контакте и работает просто: если читатель вашего сайта нажал данную кнопку, то ссылка на вашу статью публикуется у него в аккаунте в контакте. На странице «Share» та же форма, настраиваем кнопку как нам нужно и получаем код.

Другие социальные сети (mail.ru, Одноклассники)

Их я описывать не стал, потому что делается все точно по такому же принципу как и выше.

Размещение кнопок на сайте

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

Зачастую кнопки размещают под статьей. Владельцам WordPress вторую часть кода нужно вставлять в файл single.php, после

, в зависимости от верстки страницы.

На этом все. Если у кого-то что-то не вышло, комментируйте, разберемся.

PS. Примеры работы кнопок вы можете увидеть на данном блоге, под каждой статьей.

Буду признателен Вам если поделитесь статьей:

Related Posts