Всем привет! Разбираясь как-то с сервисом социальных кнопок от share42.com, я потратил значительно больше времени на его установку и настройку — очень много действий надо было потратить, чтобы поставить незамысловатый код в шаблон — закачать архивный файл, затем распаковать его и папку загрузить на сервер и установить код в шаблон.

Установка социальных кнопок на блог

Можно было использовать скрипт Одна кнопка, но его дизайн и примитивность заставили меня выбрать первый вариант. Однако, кроме блока share42 существуют и другие, более простые в установке и при этом не менее красивые блоки кнопок социальных сетей. Рассмотрим еще два таких сервиса — Поделиться от Яндекса, который похож на Одна кнопка, но с более приятным оформлением и популярный в интернете AddThis, который имеет достаточно настроек внешнего вида, а также предоставляет статистику и блок подписки в социальных сетях.

Блок Поделиться от Яндекс и установка его на сайт

Первый блок кнопок предоставил Яндекс, который находится в меню API. Настройка такая же не замысловатая, как и от сервиса Одна кнопка, но вид более приятный. Есть выбор из набора сервисов, куда будут публиковаться записи — Facebook, Twitter, ВКонтакте, Я.Ру, одноклассники и мой мир от mail, ЖивойЖурнал (lovejournal), FriendFeed и мой круг.

Блок кнопки поделиться от Яндекс

А также несколько вариантов вида блока — кнопка, когда кроме всех выбранных сервисов, в закладке будут спрятаны…они же, вид ссылки — кнопка просто становится ссылкой, в которой так же спрятаны эти кнопки. Иконки и меню — вывод всех выбранных сервисов с кнопкой поделиться, но в варианте простой иконки, и только иконки — нет кнопки поделиться. От каждого выбора сервиса и внешнего вида меняется код скрипта.

Код скрипта поделиться от Яндекс

После выбора всех настроек приступим к установке блока кнопок на блог. Сложного ничего не будет, надо лишь скопировать полученный код в то место, где будет располагаться данный блок. Достаточно распространенный вариант установки блока кнопок социальных сетей — это сразу после текста поста. Конечно, можно установить до начала записи и в сайдбаре — данные способы тоже будут рассмотрены. Начнем с установки в конец записи.

Сначала откройте редактор шаблона, который расположен на панели администратора в блоке Внешний вид — Редактор. Далее откройте файл single.php (Одна запись) — именно туда потребуется вставить сгенерированный код блока Поделиться. Так как структура шаблона у всех примерно одинаковая, то сложности найти место, где будет отображаться блок не должно возникнуть — примерное место для вставки кода:

</div>
<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"></div>
</div>
<?php comments_template(); ?>

Догадаться можно по последним двум строчкам кода — первая закрывает блок текста (div), вторая начинает выводить на страницу комментарии. Можно было код поместить ниже, после div, тогда бы блок располагался за чертой. Чтобы блок был в самом начале записи, то его следует расположить следующим образом:

<div id="content">
<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"></div>
<?php if (have_posts()) : ?>

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

Сервис социальных кнопок для сайта AddThis — настройка, получение кода и установка на блог

Второй блок социальных кнопок предоставил сервис AddThis. Он намного гибче настраивается, имеет более приятный внешний вид — как share42 и вид стандартных кнопок от Facebook, Twitter, ВКонтакте, так же он более популярный в интернете, чем тот же блок Поделиться от Яндекс.

Если верить их статистики, то AddThis используется на более чем 11 миллионов доменов и показ блока составляет более чем 1,2 миллиарда раз в месяц. Такими показателями сервис меня непременно завлек на изучение его в более подробных деталях. Какие же еще особенности имеет в себе этот с виду простенький и элегантный блок — около 350 различных сервисов социальных сетей и закладок, среди которых самые распространенные — Facebook, Twitter и Google +1 (так как сервис англоязычный, то ВКонтакте видимо не пошел в счет).

Для тех сайтов, у которых есть посещения с планшетных компьютеров и смартфонов, то данный сервис будет не заменим — тоже по их утверждению. Еще одна особенность данного сервиса — ведение учета статистики, в частности повышения посещаемости, с которым помог социальный блок AddThis.

Блок кнопок социальных сетей AddThis

А теперь получение кода и установка блока AddThis на блог. Заходим на страницу Get AddThis (не стоит переживать, что сервис англоязычный, в нем есть база с русским языком) и заполняем форму. Можно обойтись без нее и использовать для получения кода блока аккаунт из Facebook, Twitter, Google или OpenID.

Для регистрации я выбрал аккаунт из Twitter, но далее все равно придется вводить адрес почты для подтверждения регистрации. Жмем Continue и продолжаем настройку и получение кода. Есть три варианта использования блока — как кнопки социальных сетей (Sharing Tools), кнопки подписки (Follow Tools) и…просто аналитика — так там и написано (Just Analytics).

Получение кода блока социальных кнопок AddThis

Рассмотрим вариант с блоком социальных сетей. На странице так же выбор стиля (Style), предварительный просмотр (Preview), сгенерированный код (Install AddThis). Но, есть готовые варианты для популярных блоговых и универсальных движков для создания сайта (Get AddThis for) — WordPress, Blogger, Drupal, Joomla и т.д. Для WordPress уже есть готовый плагин, который можно установить прямо с панели администратора и там же настроить — Параметры — AddThis.

Также, как и на странице, есть выбор внешнего вида блока — от простой иконки до целой группы. Можно сделать собственный набор кнопок, предварительно выбрав их из сервиса AddThis — еще раз повторюсь, что там их около 350. Кого не устраивает плагин, то выбираем пункт A Website в блоке Get AddThis for, затем кликаем на понравившийся стиль (третий очень похож на то, что предоставляют сами социальные сети, а шестой как раз для установки такого блока вверху поста). Затем так же, как и с блоком Поделиться копируем код в файл single.php, примерно в таком виде:

<div id="content">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f1d86f76fbfc7b0"></script>
<!-- AddThis Button END -->
</div>
<?php if (have_posts()) : ?>

Кнопки социальных сетей установлены на блоге. Но на этом останавливаться не буду, так как еще остались вкладки Follow Tool и Just Analytics, которую ради интереса рассмотреть стоит. В подвале некоторых сайтов (footer) часто замечал кнопки с надписью — Follow Me On …, перейдя по которой попадаешь, чаще всего, на страницу микроблога в Twitter или Facebook. Рассмотрим как установить такой блок подписки на блог.

Первое — настраиваем внешний вид блока. Заголовок (Header Text) задаем как хотим — следуй за мной в:, или найди меня в: и т.д. Далее выбираем стиль (Style) кнопок, их 4 вида — горизонтальный с большими кнопками, с миниатюрами, вертикальный с подписью и большими кнопками и миниатюрами. Затем, ниже вводим адреса ваших профилей в Facebook, Twitter, Flickr, Google +1, YouTube, адрес RSS рассылки и LinkedIn. Жмем Get the Code и на следующей странице копируем его в то место, где хотим расположить данный блок (думаю в сайдбаре он будет смотреться лучше).

Анализ использования блока социальных кнопок

Just Analytics — страница, кроме кода размещения скрипта для сбора статистики ничего не имеет. Данная статистика показывает в реальном времени сколько принес в общем трафика сервис AddThis вашему сайту из социальных сетей, а также какие страницы были помечены с помощью блока кнопок. Рассмотрим демо вариант аналитики, который не требует регистрации на сайте. Информация на странице аналитики представлена удобно — в виде графиков и таблиц. Указываются количество кликов и подписок, ниже популярные записи (Top Content) и в какую социальную сеть (Srvices) они публиковались.

Сервис  сбора аналитики AddThis

В самом низу показаны браузеры (Browsers) и операционные системы (Operating Systems), с которых производились клики. На вкладке Контент (Content) тоже указываются наиболее популярные страницы сайта.

Еще одна удобная функция AddThis — показ всех социальных сетей и закладок, на которые были опубликованы посты (все это в виде графиков и таблиц). Еще можно узнать посетители каких стран кликали на блок социальных кнопок — представлен график, таблица и карта мира. Последний интересный инструмент — Live View. Интересен он тем, что показывает всю статистику в реальном времени.

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

Видео о сервисе AddThis:

Комментариев: 9

  1. West Blogger

    У меня когда-то давно стояли кнопки закладок. Так как их не использовался, я их снес :)

    Но думаю такие кнопки как лайки от вконтакте, фасбук, +1, ретвиты обязательно нужны

  2. Сергей Монеткин

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

  3. writer

    Сергей Монеткин Ну это смотря как — если от каждого сервиса (соц сети) по кнопке и скрипту то больше времени уйдет, а такие сервисы как AddThis, Share42 помогают решить данный вопрос (хотя второй наоборот их только может вызвать)

  4. zanuda

    А как у вас в сайдбаре прописаны кнопки (следите за мной) — через AddThis? Мучаюсь идеологическим вопросом, не прописать ли просто через текствовый виджет — хтмл код. Не так уж много групп я в состоянии поддерживать, пари-тройку…

  5. zanuda

    Спасибо. А то я смотрю, народ если уж и пишет, то либо как в статью вставить, либо — через плагин. Последнее ради 3х кнопок странно как-то. С другой стороны, может какие-то плагины дают какое-то преимущество, не упомянутое в статьях…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>