Кнопки социальных сетей в Joomla 2.5

Куда внедрять?
Какие и где взять?
  Блок Поделиться от Яндекса и панель от Pluso
  Плавающая вертикальная панель от Share42
Выборочное размещение

Локализовав файлы и места в их коде, куда внедряются скрипты панелей социальных кнопок, перейдем к вопросу, где взять эти скрипты. Есть множество сервисов, помогающих сгенерировать подобный код в соответствии с потребностями вебмастера. Рассмотрим два из них.

Блок "Поделиться" от Яндекса

Неплохой вариант для русскоязычного сайта. Идем на http://api.yandex.ru/share/ и настраиваем панель. В группе Набор сервисов выбираем интересующие нас соцсети. Почему-то включены только 12 сервисов, хотя на деле поддерживается 21 (включая Яндекс.Закладки), в чем можно убедится на странице документации. Как добавить остальные - чуть позже.

Теперь выберем внешний вид блока, кликнув на одном из вариантов в соответствующем меню. Скопируем содержимое раздела Код. Полученный скрипт вставляем согласно инструкции из предыдущей статьи. Чтобы добавить сервисы, не вошедшие в сгенерированный код, кликаем на линк Документация и скроллим вниз до раздела Список поддерживаемых сервисов. Я, например, зарегистрирован в LinkedIn. Нахожу его в списке, копирую ID сервиса - linkedin и добавляю к скрипту: data-yashareQuickServices="yaru, vkontakte, facebook, twitter, odnoklassniki, moimir, lj, gplus, linkedin". В результате код приобрел такой вид:

<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,gplus,linkedin"></div>

Если есть желание добавить панель как перед содержимым, так и после (как вариант - интегрировать с JComments), то первую строку - ссылку на JavaScript - можно добавить один раз - перед содержимым, а сам блок DIV - перед и после.

Панель соцкнопок от Pluso.

Мой выбор на момент написания. Три размера кнопок, квадратные или круглые, несколько вариантов заливки, включая черно-белые, выбор цвета фона. Опционально - счетчик кликов. Нравится, продолжу пользоваться.

На сайте производителя строим подходящий макет. Копируем сгенерированный код. Вот мой:

<script type="text/javascript">(function() { if (window.pluso)if (typeof window.pluso.start == "function") return; var d = document, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true; s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://share.pluso.ru/pluso-like.js'; var h=d[g]('head')[0] || d[g]('body')[0]; h.appendChild(s); })();</script> <div class="pluso" data-options="big,square,line,horizontal,counter,theme=06" data-services="facebook,twitter,vkontakte,odnoklassniki,yandex,moimir,google,linkedin" data-background="transparent"></div>

Как и в случае с блоком от Яндекса, код состоит из двух частей: скрипта и контейнера DIV. В случае помещения одинаковых панелей перед и после - скрипт можно вставить единожды в место перед содержимым. Если же делать две разные панели вверху и внизу - тогда два сгенерированных фрагмента кода вставляются как есть перед статьей и после нее. В общем, все гибко.

Также есть возможность создать вертикальную панель. В этом случае ей можно задать соответствующий стиль и подвесить в любой части страницы без привязки к конкретному материалу. Такой вариант будет рассмотрен отдельно на примере другой разновидности социальных кнопок - от Share42.