Как добавить социальные кнопки на сайт
В статье про социальное продвижение, я отмечал важность SMO (Social Media Optimization) в продвижение сайта. Теперь поговорим непосредственно о том, как сделать социальную оптимизацию на своем сайте.
Для начала покажу как это собственно говоря должно выглядеть на сайте. На многих блогах и новостных сайтах внизу после любой статьи можно увидеть нечто подобное:
Пример использования социальных кнопок при продвижении сайта (SMO)
Это и есть социальные кнопки, благодаря которым достигается SMO, а далее и социальная активность. Эта статья посвящена вопросу где взять код этих соц. кнопок и как правильно установить их к себе на сайте. Рассмотрим для начала установку Google+.
Добавляем на сайт кнопку Google+
Настроить и получить код кнопки для социальной сети Google+ можно на странице http://www.google.ru/intl/ru/webmasters/+1/button/index.html:
Настройка и получения кода кнопки для google+
Из скриншота видно, что имеется возможность настроить внешний вид кнопки на Ваше личное предпочтение. Например, можно задать размер кнопки, выбрать язык. Так же есть расширенные настройки, но их совсем необязательно трогать, поскольку и так все будет работать на отлично.
После проведения необходимых настроек, скопируйте код кнопки и разместите на сайт в том месте, где нужно вывести кнопку google +1. Код должен быть примерно таким:
<!-- Поместите этот тег туда, где должна отображаться кнопка +1. --> <g:plusone></g:plusone> <!-- Поместите этот вызов функции отображения в соответствующее место. --> <script type="text/javascript"> (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>
Вторую часть кода желательно поместить в самый конец страницы, однако я иногда пренебрегаю этим требованием и размещаю его там же где и выводится кнопка (хотя это неправильно).
В конце отмечу важность Google+1: дело в том, что в некоторых случаях количество плюсов учитывается при ранжировании сайтов в Google. Поэтому советую Вам набирать побольше плюсиков. Накручивать их не надо, поскольку подобные манипуляции легко отслеживаются и ничего хорошего от этого не будет, кроме большой цифры на счетчике.
Добавляем на сайт кнопку "Мне нравится" от Вконтакте и Facebook
1. Мне нравится от FaceBook
Начнем с получения кода кнопки для Facebook. Для этого зайдите на эту страницу: http://developers.facebook.com/docs/reference/plugins/like/. Вы должны увидеть следующую картину:
Настройка и получения кода кнопки мне нравится от facebook
Справа вверху отображается как будет выглядеть кнопка у Вас на сайте. Разберемся с параметрами, которые можно задать:
1. URL to Like
Это необязательный параметр. Если оставить поле пустым, то у каждой страницы будет свой индивидуальный счетчик лайков. Если вписать туда какой-то конкретный адрес URLa, то счетчик будет единым (лайки суммируются со всех страниц этого сайта).
2. Send Button
Добавить или убрать кнопку для отправки сообщений. Я рекомендую убрать эту кнопку, т.к. наша цель поставить просто кнопку "мне нравится", хотя возможно у вас совсем другие цели.
3. Layout Style
Стиль отображения кнопки. Лично мне больше всего нравится standard.
4. Width
Ширина кнопки в пикселях. Я ставлю обычно не больше 100 пикселей.
5. Verb to display
Что будет отображено на кнопке: "мне нравится" или "я рекомендую". Обычно я выбираю первый вариант (стоит по умолчанию), поскольку это более действенный способ замотивировать пользователя поставить лайк.
6. Color Scheme
Цветовая гамма: либо белая, либо черная.
7. Font
Просто задание шрифта для надписи "мне нравится".
После задания настроек наживаем на кнопку "get code" и размещаем на сайте. Обычный код кнопки для facebook:
<-- эту часть кода разместите в конце страницы --> <div id="fb-root"></div> <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"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <-- эту часть кода нужно разместить в месте отображения: --> <div class="fb-like" data-send="false" data-width="100" data-show-faces="true" data-font="lucida grande"></div>
1. Мне нравится от ВКонтакте
Теперь рассмотрим как получить код кнопки "мне нравится" от ВКонтакте. Для этого перейдите на следующую страницу: http://vk.com/developers.php?o=-1&p=Like. У Вас должна открыться следующая страница:
Настройка и получения кода кнопки мне нравится от вконтакте
Сначала нужно будет добавить новый сайт. Для этого выберите из выпадающего меню "сайт/приложение" пункт подключить новый сайт:
Добавление нового сайта в API ВКонтакте
После добавления нового сайта сохраните его. Теперь выберите из выпадающего меню нужный сайт. Далее следуют небольшое число параметров: "вариант кнопки", "высота", "название кнопки" - это все настраивается под Ваш вкус. В конце будет код для кнопки:
<!-- Put this script tag to the <head> of your page --> <script type="text/javascript" src="http://userapi.com/js/api/openapi.js?49"> </script> <script type="text/javascript"> VK.init({apiId: 2872188, 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: "button"}); </script>
Добавляем на сайт кнопку tweet
Как и в предыдущих случаях, для начала перейдите в место получения и настройки кнопки: https://twitter.com/goodies/buttons. Вы должны увидеть такую страницу:
Добавление кнопки tweet на сайт
Выберите из горизонтальных кнопок ту, которая больше всего понравится. Мне больше всего нравится кнопка "Share a link". После того как Вы щелкните по ней, то Вам сразу же предложат готовый код кнопки:
Получения кода кнопки tweet
Слева в колонке можно выбрать определенные параметры. Например, можно задать полностью текст твита или же выбрать, чтобы текст брался из html тега <title> сайта. Я всегда выбираю значение из тайтла (Use the title of the page). Можно включить/отключить отображение счетчика "Show count".
Последние три параметра можно опустить (лично я так делаю), поскольку дополнительные приписки к твиту могут раздражать многих. В конце можно задать язык кнопки, а также её размер "Large button". Код кнопки для tweet выглядит следующим образом:
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ru">Твитнуть</a> <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>
Добавляем на сайт кнопки "Поделиться"
На последок можно добавить на свой сайт сразу группу социальных кнопок от Яндекса. Для этого перейдите на страницу: http://api.yandex.ru/share/. Вы должны увидеть следующую картину:
Получения кода кнопки поделиться
Как видно из скриншота Вы можете сами добавлять необходимые сервисы в Ваш блок. Так же есть возможность задания внешнего вида блока. Код блока выглядит следующим образом:
<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"> </script> <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="button" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki, moimir,lj,friendfeed,moikrug,gplus"></div>
Мы обсудили самые распространенные социальные кнопки для сайта. Старайтесь их установить где-то на видном месте, чтобы давать пользователям отдать свой голос в социальных сетях и тем самым поднять вам рейтинг. Обычно кнопки ставят сразу же после статьи. Думаю не стоит отступать от этого негласного стандарта.
Читайте также:
• Социальное продвижение
• Как сделать фон для сайта
• Как сделать фон для сайта
• Эффект падающих снежинок на сайт
• Добавление счетчика посещений на сайт
• Как сделать красивую подсказку для ссылок
← Перейти в каталог html уроков и советов
|
