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

Посещаемость одного только Facebook – около 2 млрд. человек в месяц!

Содержание:

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

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

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

Расшаривание с помощью соц. кнопок позволяет увеличить посещаемость сайта до 20%!

Преимущества и недостатки сервисов

Эффективные инструменты для шаринга могут быть добавлены двумя способами:

  • Вручную (с помощью скриптов и плагинов, образуемых API самих сетей);
  • Посредством популярных сервисов для добавления кнопок «поделиться в социальных сетях».

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

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

К основным преимуществам этих «помощников» можно отнести:

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

Статистика переходов комфортно отслеживается в Яндекс.Метрике и Google Analytics.

И все же ничего идеального не бывает. Сервисы социальных кнопок, в отличие от официальных решений, имеют ряд недостатков:

  • Снижение скорости загрузки страницы, что может отрицательно сказаться и на позициях сайта при его ранжировании в поисковой выдаче, и на объеме продаж;
  • Сбои и ошибки в работе серверов, ведущие к длительной загрузке кнопок или их временной недоступности;
  • Периодическое появление рекламы;
  • Отсутствие стабильного алгоритма работы через AJAX;
  • Возможное использование памяти браузеров;
  • Наличие сомнительного трафика;
  • Непредставление гарантий безопасности данных пользователей.

При добавлении кнопок соцсетей «вручную» таких проблем можно избежать, но это не абсолютная панацея:

  • Плагины разных платформ могут отличаться по дизайну и размерам, что усложняет их гармоничное сосуществование на одной странице;
  • Процесс занимает больше времени, требует некоторых подготовительных действий и начальных знаний html.

И все же эти способы – самые востребованные и удобные варианты для быстрой установки скриптов кнопок «поделиться в социальных сетях».

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

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

Яндекс кнопки соц сетей

Отечественный поисковый гигант предлагает удобный сервис установки кнопок социальных сетей от Яндекса – блок «Поделиться». Представленный инструментарий позволяет в считанные минуты создать «панель» из нужных элементов и произвести ее базовую настройку.

Варианты внешнего вида:

  1. Со счетчиком расшариваний;
    Кнопки социальных сетей на сайт от Яндекса со счетчиком расшариваний
  2. С выпадающим меню;
    Яндекс кнопки соцсетей с выпадающим меню
  3. Мелкие иконки в стиле минимализма.
    Маленькие кнопки поделиться от Яндекса

Список доступных для шаринга сетей:

Доступные социальные сети для шаринга в Яндексе

Первичная настройка отображения кнопок соц сетей от Яндекса и готовый код:

Внешний вид блока социальных кнопок Яндекса

Для установки блока необходимо вставить сгенерированный код в нужное место html-кода сайта. Возможна более точная работа с атрибутами, установка асинхронной загрузки скрипта и т.д. (см. документацию).

Для сайтов на Wordpress всё можно сделать с помощью плагина Ya.Share (ссылка для скачивания).

Pluso

Известный в российском сегменте аналог знаменитого сервиса. Конструктор выделяется привлекательным дизайном элементов, удобным функционалом и наличием полезных настроек.

Доступные стили и социальные сети:

Внешний вид кнопок соц. сетей Pluso Доступные социалки в Pluso

Окно предварительного просмотра и дополнительных опций:

Предварительный просмотр и дополнительные опции

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

<script type="text/javascript">(function() {

  if (window.pluso)if (typeof window.pluso.start == "function") return;

  if (window.ifpluso==undefined) { window.ifpluso = 1;

    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]('body')[0];

    h.appendChild(s);

  }})();</script>

<div class="pluso" data-background="#ebebeb" data-options="big,round,line,horizontal,counter,theme=03" data-services="vkontakte,facebook,twitter,google"></div>

Для корректного отображения сервиса полученный скрипт с прилагающимися данными достаточно скопировать и установить в верстку сайта в выбранном месте.

Наряду с инструментами для шаринга дает возможность установить специальные служебные элементы: «печать», «в закладки» и т.д.

Uptolike

Качественный конструктор, имеющий удобные опции для моментальной генерации кода, обширные настройки (со статистикой) и даже «спецэффекты».

Готовые иконки могут иметь такой вид:

Внешний вид кнопок Uptolike

«Всплывающее» окно:

Всплывающее окно Uptolike

Можно выбрать все значимые современные сети:

Социальные сети Uptolike

Для индивидуализации используются различные настройки, среди которых важная адаптация для мобильных платформ:

Адаптация Uptolike под мобильные

После выполнения всех процедур по выбору и регулировке параметров следует нажать «Сгенерировать код», после чего будет предложено ввести свой e-mail для последующей отправки на него кода для установки.

Полученный скрипт и все остальные данные размещаются в html-коде сайта.

Share42

Share42 – понятный пошаговый генератор создания красивых кнопок социальных сетей.

Сервис предлагает быстрое формирование блоков, которое включает:

  1. Выбор необходимых соцсетей и размера иконок;
  2. Первичную настройку панели и другие опции;

    Первичная настройка Share42

  3. Функции предварительного просмотра и скачивания;

  4. Установку блока на свой ресурс: необходимо скачать архив (со скриптом), распаковать его, загрузить папку «share42» на свой сайт и указать путь до нее (http://site.name/share42/). Далее нужно выбрать тип ресурса и вставить в шаблон полученный в последнем окне код:

Sharethis

Англоязычная платформа с приятным оформлением и всеми необходимыми опциями для внедрения кнопок соц. сетей на веб-сайт. Сервис позволяет создать «фиксированные» или «скользящие» блоки, состоящие из множества иконок популярных сетей («Вконтакте» присутствует).

Функционал конструктора – все, что нужно для быстрого создания панелей. Принцип работы:

  1. После определения типа блоков («inline» или «sticky») осуществляется переход к выбору самих иконок (методом клика);

  2. Избрание расположения;

  3. Дополнительные настройки (размер, вид, наличие счетчика, тип обрамления);
  4. Финальное получение кода (требует регистрации).

Addthis

Самый известный иностранный сервис с услугами для размещения кнопок социальных сетей на сайте. Для доступа к полному функционалу необходимо пройти процедуру быстрой регистрации. И оно того стоит!

Addthis превращается в мощный и полный полезных «фишек» наглядный конструктор с превью в режиме онлайн.

Выбираем тип кнопок в Addthis

Кнопки соц. сетей на сайте могут быть:

  1. Скользящими (floating);
  2. Зафиксированными на странице (inline);
  3. Раскрывающимися при наведении (expanding);
  4. Баннерами и слайдерами.

Все вариации полностью адаптированы для мобильных устройств.

После выбора типа блока и нажатия «Continue» левая панель окна принимает следующий вид:

Кастомизация Addthis

Здесь можно выбрать счетчик (share counters), посмотреть список всех доступных кнопок шаринга социальных сетей (select your own + add more services), настроить дизайн (design) и дополнительные функции (скрытие блоков и т.д.)

Для получения кода достаточно нажать «Save & Continue». На следующей странице появится скрипт вида

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-59a54bda17a98a6a"></script> 

код самого блока

<div class="addthis_inline_share_toolbox"></div>

и подробная инструкция по установке скрипта для разных шаблонов (включая доступные плагины).

Social-Likes

Social-likes – компактный и простой скрипт социальных кнопок «лайк» со счетчиком. На странице можно выбрать нужные сети, тип и расположение иконок, их скин и внешний вид.

Панель соц кнопок Social Likes

Дальнейшие действия для установки:

  1. Нажать «скачать кнопки»;
  2. Сохранить архив на ПК;
  3. В шаблоне сайта создать папку «social» и вложить в нее распакованные файлы архива;
  4. Перед </head> прописать:
    <link rel="stylesheet" href="путь-до-папки-social/social/social-likes_classic.css">
    <script src="путь-до-папки-social/social/social-likes.min.js"></script>
    

    Название файла .css может иметь другое значение (зависит от выбора, сделанного на сайте).

  5. Использовать другую часть кода и вставить ее в шаблон для размещения кнопок:
<div class="social-likes social-likes_light">
<div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>
<div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div> <div class="mailru" title="Поделиться ссылкой в Моём мире">Мой мир</div>
<div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
<div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>
<div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>

Odnaknopka.ru

Сервис от российских разработчиков с максимально упрощенной системой установки кнопок для социальных сетей.

Сервис Однакнопка

К недочетам можно отнести скудный функционал, но он компенсируется высокой скоростью работы скрипта «Одна Кнопка».

Посетители могут выбрать 4 вида кнопки, один из которых – виджет (с разным положением относительно страницы).

Скрипт социальных кнопок выглядит так:

<script src="http://odnaknopka.ru/ok2.js" type="text/javascript"></script>

Для работы с виджетом код сложнее:

<script language="javascript">window.informerPosition = {vert:"top",hor:"left"}</script><script language="javascript" src="http://odnaknopka.ru/ok4.js"></script>

Для установки достаточно поместить данные в шаблон.

Pip.Qip.ru

Представитель «моментальных» сервисов генерации кодов для установки социальных кнопок - Pip.Qip. Простота здесь лишь подчеркивает комфорт.

Внешний вид кнопок pip.qip.ru

Для получения заветного кода нужно:

  1. Указать тип площадки для размещения;
  2. Выбрать стиль из списка;
  3. Нажать «Уже хочу!» – и лицезреть готовый код внизу страницы.
<script src="//pip.qip.ru/js/pip_button.js" type="text/javascript" charset="utf-8" data-type="1"></script>

Останется лишь поместить его в код сайта.

Рекомендуем почитать: 16 полезных плагинов для интернет-маркетолога в Google Chrome

Добавление кнопок соц сетей вручную

Альтернативой безусловно удобным, но не всегда приемлемым сервисам социальных кнопок являются сами соц. сети, которые дают возможность вручную добавить кнопки на веб-сайт, используя плагины и API.

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

Знаменитый «Вконтакте» генерирует коды кнопок расшаривания по этому адресу.

С помощью виджета можно выбрать вид будущей кнопки и «прикрутить» счетчик (пункт «стиль»), придумать оригинальное название («текст») и получить заветный код.

Код для вставки кнопок от Вконтакте

Первую часть кода следует поместить внутри тега <head>:

<script type="text/javascript" src="https://vk.com/js/api/share.js?95" charset="windows-1251"></script>

Вторую – в место непосредственного расположения кнопки:

<script type="text/javascript"><!--document.write(VK.Share.button(false,{type: "round", text: "Сохранить"}));--></script>
Полная документация виджета содержит инструкции и дополнительные настройки.

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

Методика получения официальных кнопок Facebook еще более проста и понятна. На сайте можно воспользоваться конфигуратором кнопки «Поделиться» и в мгновение ока получить код.

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

Выбор функций ограничивается размером самой кнопки и тремя вариантами ее «композиции» (дизайна).

После нажатия кнопки «Получить код» на экране появится окно с двумя «шагами»:

SDK Javascript

Шаг 2 – Добавляем Javascript.

<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/sdk.js#xfbml=1&version=v2.10";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Встраивается в html-код страницы единожды. Лучшее место – сразу после тега <body>.

Шаг 3 – сам код кнопки и его размещение.

<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse">Поделиться</a></div>
Для веб-мастеров присутствует грамотный раздел с информацией о публикации материалов.

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

Разработчики сайта «Одноклассники» представили обновленную кнопку «Класс/Поделиться», которая работает значительно быстрее прошлого образца.

Здесь находится страница конструктора.

Кнопки репостов в Одноклассниках

С помощью интуитивно понятного интерфейса параметры подгоняются быстро и легко. Когда настройка завершена и вид элемента в блоке «Результат» устраивает, можно «пролистнуть экран» вниз и заметить код, который нужно встроить в html страницы в выбранном месте.

Пример кода кнопки Одноклассники

<div id="ok_shareWidget"></div>
<script>
!function (d, id, did, st, title, description, image) {
  var js = d.createElement("script");
  js.src = "https://connect.ok.ru/connect.js";
  js.onload = js.onreadystatechange = function () {
  if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
    if (!this.executed) {
      this.executed = true;
      setTimeout(function () {
        OK.CONNECT.insertShareWidget(id,did,st, title, description, image);
      }, 0);
    }
  }};
  d.documentElement.appendChild(js);
}(document,"ok_shareWidget",document.URL,'{"sz":30,"st":"straight","ck":2}',"","","");
</script>

Кнопка поделиться Google+

Такой гигант, как Google, не мог остаться в стороне, поэтому для соц. сети googleplus тоже есть своя кнопка расшаривания. В отличие от виджета того же «ВКонтакте», кнопка «+1» не ведет к публикации материалов на страницах нажавшего на нее человека и не имеет влияния на ранжирование. «Тогда зачем она нужна?» – спросите вы. «+1» является частью эффективной PR-кампании вашего ресурса, в ходе которой материалы рекламируются друзьями друзей через профили Гугл, а рекомендации можно увидеть прямо в выдаче поисковой системы!

Официальная страница открывает простой способ установки «+1» с помощью кода:

<script src="https://apis.google.com/js/platform.js" async defer></script>
  <g:plusone></g:plusone>
Множественные атрибуты и методы их применения описаны на странице разработчиков.

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

«Твитнуть или не твитнуть?». Чтобы у посетителей появились такие муки выбора, необходимо создать элемент для расшаривания от Twitter в официальном конструкторе.

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

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

Код для размещения будет находиться в правом окне.

Кнопка поделиться от Mail.ru

Плагин для шаринга от социальной сети . – кнопка «Нравится». Комфортное и быстрое создание доступно по ссылке.

Кнопка поделиться от Mail.ru

Можно внести изменения в параметры размера и вида кнопки, включить или отключить счетчик, выбрать тип текста.

Настройка сопровождается наглядным отображением внесенных изменений и автоматической генерацией кода.

<a target="_blank" class="mrc__plugin_like_button" href="https://connect.mail.ru/share" data-mrc-config="{'cm' : '1', 'sz' : '30', 'st' : '1', 'tp' : 'mm'}">Нравится</a>
<script src="https://connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script> 

Добавление иконок на профили и группы в социальных сетях на сайт

Иногда возникает необходимость оформить на сайте ссылку с красивой иконкой соц. сети. В интернете ждут своего часа сотни и тысячи значков разного стиля. Берите и пользуйтесь.

Используя тег <img>, можно вывести изображение понравившейся иконки в html.

<img scr ="адрес-изображения">

Совместив его с тегом ссылки <a>, мы получим иконку, которая будет являться кликабельной ссылкой

<a href="адрес-ссылки"><img src="адрес-изображения ></a>

Или вынести иконку в CSS и для каждой социалки создать свой класс. Пример в Vk.com:

a.vk-share{
  display: block;
  overflow: hidden;
  background: url('путь-до-картинки.png ') no-repeat;
  width: 30px;
  height: 30px;
  }

html-код в таком случае будет:

<a href="адрес-ссылки" class="vk-share"></a>

Легкие и кастомные кнопки расшаривания

Некоторые энтузиасты и просто талантливые люди полностью отказываются от сервисов, плагинов и других доступных решений. Их цель – использование самостоятельно написанного&кода&для расшаривания. Весомое преимущество таких «кастомных» кнопок – чистый код, предполагающий загрузку лишь CSS, скрипта и шрифтов (картинок).

Плюсы такого подхода:

  1. Нет лишнего трафика;
  2. Нет рекламы;
  3. Корректная работа;
  4. Нет проблем с зависимостью от сервиса (который может часто тупить и не загружаться);
  5. Нет проблем с поеданием памяти браузера.

Список ссылок на шаширнг в популярных социальных сетях:

Twitter
https://twitter.com/intent/tweet?text=YOUR-TITLE&url=YOUR-URL&via=TWITTER-HANDLE
Facebook
https://www.facebook.com/sharer/sharer.php?u=YOUR-URL
Google plus
https://plus.google.com/share?url=YOUR-URL
LinkedIn
https://www.linkedin.com/shareArticle?mini=true&url=YOUR-URL&title=YOUR-TITLE&summary=YOUR-SUMMARY&source=YOUR-URL
Pinterest
https://pinterest.com/pin/create/button/?url=YOUR-URL&description=YOUR-DESCRIPTION&media=YOUR-IMAGE-SRC
VK
https://vk.com/share.php?url=YOUR-URL&title=YOUR-TITLE&description=YOUR-DESCRIPTION&image=YOUR-IMAGE-SRC&noparse=true
Tumblr
https://www.tumblr.com/share/link?url=YOUR-URL&description=YOUR-DESCRIPTION
Reddit
https://www.reddit.com/submit?url=YOUR_URL&title=YOUR_TITLE
Odnoklassniki
https://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=YOUR_URL&st.comments=YOUR-DESCRIPTION

Далее нужно придать им нужный вид с помощью CSS. В нашем случае html-код кнопки расшаривания в ВК выглядит так:

<div id="vk_sharer" class="post-share-social vkontakte pop_up">
    <img src="/manager/templates/acades/img/social/vk-01.svg">
    <span data-social="vkontakte"></span>
</div>

Ну и стилизация кнопки в CSS:

.post-share {
    position: absolute;
    right: -webkit-calc(78% + 155px);
    right: calc(78% + 155px);
    width: 75px;
    text-align: center;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.post-share-social {
    padding: 0 10px 0 5px;
    height: 32px;
    cursor: pointer;
    -webkit-transition: all .4s;
    transition: all .4s;
}
.post-share-social:after {
    content: '';
    display: table;
    clear: both;
}
.post-share-social.vkontakte {
    background-color: #4c79a7;
}

Вам останется только добавить всё это дело в модальное окно и реализовать корректный парсинг тегов с вашей разметки OpenGraph и подставноку в url'ы для шаринга, которые приведены выше.

Просмотров: 198
Подпишись!
Оставьте адрес, и каждую среду мы будем высылать свежую статью
Что бы еще почитать?