Выбор и установка кнопок соцсетей для сайта

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

Содержание:

• Преимущества и недостатки сервисов
• Обзор сервисов кнопок социальных сетей
  • Яндекс кнопки
  • Pluso
  • Uptolike
  • Share42
  • Sharethis
  • Addthis
  • Social-Likes
  • Odnaknopka
  • Pip.Qip
• Добавление кнопок соц сетей вручную
  • Вконтакте
  • Facebook
  • Одноклассники
  • Google+
  • Твиттер
  • Mail.ru
• Добавление иконок на профили и группы в социальных сетях
• Легкие и кастомные кнопки расшаривания

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Share42

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

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

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

   

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

   

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

   

Sharethis

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

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

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

   

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

   

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

   

Addthis

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

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

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

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

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

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

Здесь можно выбрать счетчик (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 – компактный и простой скрипт социальных кнопок «лайк» со счетчиком. На странице можно выбрать нужные сети, тип и расположение иконок, их скин и внешний вид.

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

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>

<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 еще более проста и понятна. На сайте можно воспользоваться конфигуратором кнопки «Поделиться» и в мгновение ока получить код.

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

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

Шаг 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 в официальном конструкторе.

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

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

Кнопка поделиться от 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. Нет проблем с поеданием памяти браузера.

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

https://twitter.com/intent/tweet?text=YOUR-TITLE&url=YOUR-URL&via=TWITTER-HANDLE

https://www.facebook.com/sharer/sharer.php?u=YOUR-URL

https://plus.google.com/share?url=YOUR-URL

https://www.linkedin.com/shareArticle?mini=true&url=YOUR-URL&title=YOUR-TITLE&summary=YOUR-SUMMARY&source=YOUR-URL

https://pinterest.com/pin/create/button/?url=YOUR-URL&description=YOUR-DESCRIPTION&media=YOUR-IMAGE-SRC

https://vk.com/share.php?url=YOUR-URL&title=YOUR-TITLE&description=YOUR-DESCRIPTION&image=YOUR-IMAGE-SRC&noparse=true

https://www.tumblr.com/share/link?url=YOUR-URL&description=YOUR-DESCRIPTION

https://www.reddit.com/submit?url=YOUR_URL&title=YOUR_TITLE

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'ы для шаринга, которые приведены выше.