Панель социальных кнопок на вашем сайте

Дорогие друзья, продвижение сайтов в социальных сетях сейчас становится всё более актуальным. Это несколько более сложный вариант, чем традиционное SEO, но результат того стоит. Стоит отметить и то, что здесь тоже имеется ряд простых, основополагающих решений. Вот об одной из таковых я и хочу рассказать в данном посте.

В частности, речь пойдёт о социальных кнопках, которые мы оформим в виде фиксированной панели. При этом я буду использовать такой сервис как ShareThis. Он во многом облегчит нашу задачу и позволит снизить нагрузку на сайт. А главное, это просто, красиво и эффективно. Приступим?

Что такое социальная кнопка?

У большинства социальных сетей есть готовые решения для создания социальных кнопок. Что такое социальная кнопка? В первую очередь это ссылка на скрипт, который публикует данные о странице в социальной сети. Это действие называется шарингом (от англ. share – делиться). При этом скрипту передаётся ряд параметров о публикуемой странице, её адрес, заголовок, описание и т.д. Обычно это делается автоматически, за счёт использования JavaScript. Он же позволяет отобразить в кнопке количество шарингов, т.е. ссылок в социальных сетях.

Проблема в том, что каждая социальная сеть предлагает свою социальную кнопку. Несмотря на то, что общий формат их оформления стандартизировался, они отличаются друг от друга. А главное – вам придётся подключить кучу почти идентичных JavaScript библиотек. Нужно ли объяснять, что такой подход создаёт некоторую нагрузку на сайт?

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

ShareThis

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

Нюанс в том, что сервис не производит считывания данных из социальных сетей, основывая вывод циферки на своей статистике кликов по ссылкам. С одной стороны мы имеем неточность, а с другой – циферки могут превышать количество опубликованных ссылок, что выглядит более привлекательно. В общем, всё относительно.

Следует отметить и то, что ShareThis может предоставлять статистику в развёрнутом виде для зарегистрированных пользователей с учётом данных Google Analytics. Здесь я ещё не очень хорошо разобрался. Потому сказать что-то определённое затрудняюсь. В общем, мы пойдём по пути наименьшего сопротивления, и панель социальных кнопок создадим без регистрации на сервисе. Благо и такое возможно.

Инструмент шаринга для вашего сайта

И так. Зайдите на сайт ShareThis. На главной странице сервиса нас интересует блок «Share the Button» - кликаем его.

На открывшейся странице «Get Sharing Tools for Your Site» нам будет предложено выбрать платформу для которой будет создан виджет. Лично я рекомендую использовать вариант «Website», т.к. нам ещё придётся довести полученный виджет до ума. Кликаем ссылку «Next: Step 2. Pick a Style».

На следующем шаге нам будет предложено выбрать стиль (англ. style) виджета. ShareThis предлагается три варианта: buttons (кнопки), bars (панели) и featured (скажем так – фишечки). В принципе, вариант «Bars» - это и есть требуемое нам решение, но оно выглядит не так, как того хотелось бы.

В своей панели я использую вертикальные социальные кнопки с циферками. Поэтому выберите соответствующий стиль и жмите ссылку «Next: Step 3. Customize».

На следующем шаге нам будет предложено выбрать соответствующие кнопки для нашей панели. Примечательно, что здесь вы можете выбрать стандартные кнопки сервиса из «Standard Services» или подключить кнопку социальной сети из «Add-ons». Получается своеобразный визуальный редактор набора социальных кнопок.

Напомню, что подключение аддонов (от англ. add-ons) не желательно. В этом случае будет всё та же нагрузка и неоднородность оформления. Поэтому я рекомендую использовать стандартные кнопки ShareThis. Для себя я выбрал: Twitter, Facebook, ВКонтакте, Blogger и Google+. После того всё будет готово, нажмите кнопку «Finish: Get the Code».

В открывшемся окне «Create Account» вам будет предложено создать свой аккаунт на ShareThis. Сделать это можно, авторизовавшись через Facebook, Twhitter, Google и т.д. Этот шаг можно и пропустить, кликнув по ссылке «No thanks, just give me the code!» находящуюся в правом верхнем углу окна, но я рекомендую зарегистрироваться.

В открывшемся окне «Code and Instructions» вы получить сгенерированный код и инструкцию по его установке.

Как вы видите, код состоит из двух частей. Первый - это набор кнопок, которые надо будет разместить в том месте сайта, где они будут выводиться. Второй – это JavaScript библиотека с установкой опции уникального идентификатора издателя publisher. Его надо будет разместить в контейнер head. Ну а дальше начинается магия создания красивой панели средствами CSS и небольшой правки полученного кода.

Панель социальных кнопок на вашем сайте

И так. Мы получили требуемый код социальных кнопок сервиса ShareThis. Теперь нам надо создать панель, которая будет висеть на странице, оставаясь на месте при её прокрутке. Для этого нам понадобится создать соответствующий div. Например:

<div id='sharethis'>
<!-- сюда надо вставить первую часть кода ShareThis -->
</div>

Что нужно изменить в первой части вставляемого кода ShareThis? Замените теги span на div. Таким образом, кнопки будут выстраиваться вертикально без необходимости прописывания CSS-свойство display: block. Также я рекомендую попробовать прописать свои значения в атрибутах displayText. Они должны быть более короткими. Иначе ширина кнопок будет разной.

Ну а теперь сам CSS для созданного div. У меня он выглядит следующим образом:

#sharethis {
  z-index: 9999 !important;
  position: fixed;
  top: 10%;
  left: 0;
  padding: 3px;
  text-align: left;
  background: #fff;
  border: 1px solid #D4CCAA;
  border-left: 0;
  -webkit-border-radius: 0px 5px 5px 0px;
  border-radius: 0px 5px 5px 0px;
}

Разберём его подробней.

• z-index - задаёт порядок слоя на странице. Он должен быть максимально большим, чтоб слой был поверх остальных слоёв.
• position - задаёт позиционирование тега div. В данном случае используется вариант fixed, т.е. слой будет фиксирован в окне браузера при прокрутке страницы.
• top - отступ от верхней границы окна браузера.
• left - отступ от левой границы окна браузера.
• padding - отступ внутри панели.
• text-align - позиционирование текста внутри панели. У нас это center (по центру). Таким образом, даже если ширина кнопок будет разной, они будут отцентрированы.
• background - фон панели. В приведённом примере задан только цвет – белый (#fff).
• border - рамка панели. В примере используется сплошная линия (solid) толщиной в 1px и цветом #D4CCAA.
• border-left - левая рамка панели. В нашем примере панель находится слева, потому левая граница панели равно 0.
• -webkit-border-radius и border-radius - задают закругления соответствующих углов панели.

Для блогов на Blogger.com

Несмотря на то, что всё очень просто, решил написать и о том, как эту красоту добавить в шаблон блога на Blogger.com. По сути, вся фишка в том, что здесь можно сделать так, что панель социальных кнопок выводилась только на странице тех же постов. Как это сделано у меня на блоге. Зачем городить лишний код там, где он не нужен? Если вы согласны с этим утверждением, то приступим.

Авторизуйтесь на блогхостинге и перейдите на страницу «Шаблон» своего блога. На открывшейся странице нажмите кнопку «Изменить HTML». В открывшемся окне, нажмите кнопку «Приступить». Установите галочку «Расширить шаблоны виджета».

Первое, что нам надо сделать – подключить вторую часть кода с JavaScript сервиса ShareThis. Как видно на картинке, я совместил это с тегом title, но приведу и отдельный код, главное чтоб он был в контейнере head, например:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
  <script type='text/javascript'>stLight.options({publisher: &quot;0c256dc7-02e3-421e-81c0-3fc666e030db&quot;}); </script>
</b:if>

Разберём этот пример подробнее. Здесь мы задаём условие – если тип страницы data:blog.pageTyep равен item (запись), следовательно осуществляется вставка кода. Обращаю ваше внимание на то, что код будет несколько преобразован. Например, некоторые кавычки превратятся в мнемоники. Не суть важно, это будет сделано автоматически при сохранении шаблона. Главное, чтобы вы использовали свой код, со своим идентификатором publisher.

Теперь нам надо вставить CSS описание для панели. Найдите следующую секцию:

<b:skin><![CDATA[
<!-- здесь будут другие CSS описания -->
]]> </b:skin>

Рекомендую добавить нужное CSS описание в его конец, т.е. перед строкой:

]]> </b:skin>

Осталось лишь вставить HTML-код самой панели. Найдите в шаблоне следующую строку:

<b:includable id='post' var='post'>

Это начало виджета вывода списка постов. Он используется на всех страницах блога. Поэтому, после указанной строки, нам понадобится снова задать соответствующее условие и вставить требуемый HTML-код панели, например:

<!-- Share Burrons -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sharethis'>
<div class='st_twitter_vcount' displayText='Твит'/>
<div class='st_facebook_vcount' displayText='Лайк'/>
<div class='st_vkontakte_vcount' displayText='Лайк'/>
<div class='st_blogger_vcount' displayText='Лайк'/>
<div class='st_googleplus_vcount' displayText='Плюс'/>
</div>
</b:if>

Как вы видите, здесь я уже прописал свои значения в атрибуты displayText. Плюс код автоматически был несколько оптимизирован блоггером. Нажмите кнопку «Сохранить шаблон». Если всё было сделано правильно, то на блоге появится панель социальных кнопок.

Послесловие

Как вы видите, приведённый пример может послужить основой для огромного числа решений. Оформить панель вы можете так, как вам угодно. Более того, вы можете разместить в такой панели что угодно и, опять же, как угодно. На этом у меня всё. Спасибо за внимание. Удачи!