-->

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

Кот программиста

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

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

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

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

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

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

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

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

ShareThis

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

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

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

статистика ShareThis

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

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

Share the Button

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

Get Sharing Tools for Your Site

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

Pick a Style

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

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

визуальный редактор набора социальных кнопок sharethis

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

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

Create Account - No thanks, just give me the code!

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

код кнопок ShareThis

Как вы видите, код состоит из двух частей. Первый - это набор кнопок, которые надо будет разместить в том месте сайта, где они будут выводиться. Второй – это 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». В открывшемся окне, нажмите кнопку «Приступить». Установите галочку «Расширить шаблоны виджета».

вставка панели социальных кнопок в шаблон на Blogger.com

Первое, что нам надо сделать – подключить вторую часть кода с 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. Плюс код автоматически был несколько оптимизирован блоггером. Нажмите кнопку «Сохранить шаблон». Если всё было сделано правильно, то на блоге появится панель социальных кнопок.

Послесловие

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

Twitter Facebook ВКонтакте Одноклассники Google+

36 комментариев:

Павлуха
Заинтересовался такой панелькой, когда увидел её аналог на сайте Вовки (vovka .su). Думал, каждую кнопку в панель надо вручную встраивать. Спасибо за информацию о сервисе, который позволяет избежать этого ручного труда - теперь есть стимул попробовать.
wmascat
2Павлуха: по сути, на Вовкин блог используется то же решение с дополнительным JavaScript обработчиком позиции, чтобы панель не поднималась выше определённой позиции.
Денис
Жаль только зачем-то уводит пользователя на новую страницу, и просит с чем нибудь согласиться. По-моему утруждает посетителей.
wmascat
При клике на кнопку? Ну так я же и говорил, что социальная кнопка - это ссылка на скрипт шаринга.
personNet
Многие ксожалению не кликают((((
Денис
У меня на сайте кнопки, никуда не уводят. Кликнул, лайк засчитался и все...
wmascat
2personNet: ну, тут слишком много факторов. В тоже время, предлагаемая панель всегда на глазах, так что шансов получить ссылку куда как больше.
wmascat
2Денис: да, в этом плюс кнопок социальных сетей, там публикация производится автоматически через JavaScript. Но, как я и говорил, приходится подключать множество однотипных библиотек с разных ресурсов.
Весельчак
Честно говоря, мне больше всего нравятся кнопки от Яндекс-шары. хоть и без циферок.
wmascat
2Весельчак: в этом то вся и фишка, что циферки могут неплохо стимулировать... Хотя, я и Яндекс-шару было дело оптимизировал. Ух они и наворотили коду. Впрочем, ShareThis в этом плане не лучше :(
Денис
Интересный скрипт, кликнул по лайку 10 раз, 10 кликов засчитано))
wmascat
2Денис: Как я и говорил у ShareThis есть один существенный недостаток - он выводит количество кликов, а не количество ссылок в соц сетях.
Unknown
Addthis нравится больше тем, что там больше :) сервисов доступно. И ещё у них аналитика с умом сделана. Хотя все эти сервисы (ну кроме Яши, хотя у него косяков достаточно тоже) предлагают какой-то слабовменяемый дизайн кнопок. Видел красиво сделаны кнопочки у Алексея Симоненко
wmascat
2Alexander Polyakhov: увы, но всем не угодишь. У Симоненко вроде стандартные кнопки соц.сетей или вы о тех, что у него в подвале? Так у меня в сайдбаре тоже свои кнопки на соц.аккаунты.
Ruslan
Мир вам!

можно ли убрать счетчики из кнопок sharehtis? сделать просто кнопки?
wmascat
2Ruslan: на втором шаге выбрать соответствующий стиль и будет без циферок. Хотя, в этом случае я рекомендовал бы вот такой вариант ;)
Ваван
Здравствуйте, искал у вас в блоге как добавить кнопки Pluso в блоггер.
Может есть статья или напишите?
Добавляю после data:post.blog
Но они отображаются и для не открытого поста.. А как сделать подобно вашему сайту?
wmascat
2Ваван: о Pluso я не рассказывал, но думаю найти подобную информацию в интернете не проблема, тем более, что там всё очень просто. Что до моей панельки слева... принцип тот же, но sharethis я уже не использую :)
Ваван
Sharethis это не та панель, что слева в данной статье?
К сожалению по плюсо просто нет в рунете толкового объяснения для блоггер. Те, что есть дублируют инструкции с оф.сайта.
Попробуем поставить согласно описанному в этой статье.
wmascat
2Ваван: у меня стоит оригинальный набор кнопок соц сетей. В тоже время, приведённая в посте инструкция вполне себе работает, т.к. именно так я и делал... меня просто не устраивал виджет шарезис... хотелось большей динамики и точности в циферках :)
Ваван
Константин, замечательно!
Действительно, описанная инструкция подойдет ко многим сервисам. Для читателей посоветую) Но у плюсо есть и минусы!

К тому же, мне кажется я что-то не усвоил из изложенного в этой статье. А именно, мои кнопки прижаты к границе браузера. Выстроить как здесь в блоге мне не удается. Пришлось оставить кнопки с правого края браузера.

И еще уточняю *оригинальный набор кнопок соц сетей
Получается для оригинальные кнопки надо разместить в тот же контейнер div как здесь(?), а скрипты прописывать отдельно как обычно(?)
Ваван
2PersonNet,
Мне кажется дело в стиле кнопок... У всех сервисов, что попадались, мягко говоря непривлекательный дизайн. Будь то яндекс, share42, sharethis. Их незаметно. Оригинальные берут своей привычностью. Т.е. они знакомы, и срабатывает привычка. Тут нужны целые макро-микро исследования. Потому остановился на крупных, ярких кнопках пускай и сырого Pluso.
Но, возможно, нужны собственные решения для лучшего эффекта? Наличие интересного текст — это по умолчанию!)
wmascat
2Ваван Ну, давайте разбираться. Для того чтобы позиционировать панель кнопок используется CSS, в частности свойства top и left, они в статье расписаны, но если что рекомендую почитать мануал.

Что до варианты реализованного на моём блоге. Здесь используется хитрость с центрирование и свойством margin. В частности задаётся: left: 50% - т.е. отступ о левого края окна половина экрана. Т.к. мне известна ширина моего блога, мне осталось произвести смешение влево используя: margin:-{отступ}px;

Другими словами, всё чистый CSS.
Ваван
Знание - сила.
Причина прилипания к краю браузера в несохранении синтаксиса. Вместо 20 на 20% теперь выравнивание есть!
А для размещения стандартных кнопок соцсетей можно использовать описанный в статье контейнер div? Или все неско иначе?
wmascat
2Ваван: принцип тот же ;)
Unknown
Добрый день. Подскажите если сталкивались. не работает статистика по кнопкам. после обновления странички снова нолики... подскажите где копать...
wmascat
@Дмитрий Жураковский по всей видимости, произошла ошибка при вставке кода... в общем, идёт какое-то не срабатывание событие клика... даже не знаю чем помочь. Я в целом от sharethis отказался. Как видите использую стандартные кнопки соц.сетей.
Jwenning
Есть такая проблема с кнопкой Facebook. При нажатии переходим на специальную страницу Facebook, где можно выбрать "поделиться в группе". При этом появляется поле, в которое надо ввести название группы. К сожалению, там нет никого списка моих групп, а при вводе названия, пишет ошибку. Подскажите, кто знает, как можно таким образом поделиться ссылкой с группой?
wmascat
@Daniel Jwenning попробуйте писать латинское название группы, т.е. не название, а адрес. Но это только предположение...
Анонимный
Хотел поставить себе такую панельку на сайт. Но видимо статья на другой уровень совсем рассчитана. Мозаика ну никак не складывается:(( Все же сформулирую по порядку, что не ясно
1) Где находится контейнер HEAD?
2) Куда разместить DIV, в существующий уже шаблон страницы? Если да, то в какое место?
3) То же относительно CSS, нужно новый стилевой файл создавать или использовать уже созданные?
wmascat
@migal70 действительно, здесь нужно иметь хотя бы общие представления о HTML и CSS... к тому же у вас улучшенный аккаунт, а значит доступа к редактированию шаблона, за исключением CSS, у вас отсутствует.
Анонимный
Не знаю, что у меня там отсутствует, но в панели редактирования есть такая вкладка "Редактор шаблонов" называется. И в ней, ПОМИМО СТИЛЕЙ CSS имеется подпункт "Шаблоны", открывается без проблем. Насколько я могу судить со своей чайной колокольни - это именно оно. Существующий шаблон даже трогать не надо, можно новый создать и с ним уже экспериментировать, если что - ничего не будет порушено необратимо, надеюсь. Так HTML и осваиваю - по мере необходимости. И вот, в данный момент чертовски необходимо узнать, где находится этот контейнер HEAD. Подскажете?
Анонимный
Не так страшен черт... Подрихтовал я шаблон, и О, Чудо, панель появилась!))) НО НИКУДА НЕ ДВИЖЕТСЯ ЗАРАЗАААА))) Видимо, я пока не дотямкал, куда засунуть СSS. Из прочих траблов: дизайн панельки не ахти, цвет текста - тоже рябит, и, при наведении мышки, ничего не всплывает. Но это уже детали
wmascat
@migal70 насколько я знаю, в livejournal редактирование шаблонов доступно только для платных аккаунтов, но дело было давно, счас и не помню
Анонимный
Аааааа понятно)))) Это я через ЖЖ с Вам общаюсь))) А сайт вот он: http://znaemfiz.ru/yumor
На этой странице как раз результаты моих успехов, на данный момент,не знаю уж в кавычках или без
Анонимный
"В принципе, вариант «Bars» - это и есть требуемое нам решение, но оно выглядит не так, как того хотелось бы."

Надо было обратить на это место внимание. И панель закреплена, и выглядит, как хотелось бы. Не понимаю, чем Вам в ней не понравилось? Не бог весть что, но вполне приемлемо, пока, во всяком случае.
Инструкция по установке на "продвинутых" как я пользователей рассчитана. Я же теперь знаю, что такое head-контейнер:))) А жаль, немного бы еще так потупил мог бы и CSS освоить... тот, кто сказал, что ЛЕНЬ - двигатель прогрессе, этот фактор явно недооценил))))
Отправить комментарий