В современном интернет-пространстве нет ничего более популярного, чем социальные сети. Различные площадки сосредоточили миллионы людей, которые ежедневно листают ленту, делают репосты, ставят лайки и ведут активную онлайн-жизнь. Так почему бы не воспользоваться этой системой для бесплатного продвижения собственного сайта в данной среде?
Содержание:
- Преимущества и недостатки сервисов
- Обзор сервисов кнопок социальных сетей
- Добавление кнопок соц сетей вручную
- Добавление иконок на профили и группы в социальных сетях
- Легкие и кастомные кнопки расшаривания
Нет никакой тайны в том, что уже много лет существуют особые кнопки социальных сетей, установка которых на сайте позволяет увидеть прирост трафика, а заодно способствует развитию PR-кампании своего ресурса. Расшаривание материалов обеспечивает охват гигантской аудитории, которая состоит из потенциальных клиентов, читателей и подписчиков.
Наша статья расскажет, как выбрать, правильно установить и добавить на свой сайт удобные и красивые социальные кнопки; какие сервисы предлагают свои услуги и в чем их достоинства; как самостоятельно добавить код и кастомизировать кнопки социальных сетей.
Преимущества и недостатки сервисов
Эффективные инструменты для шаринга могут быть добавлены двумя способами:
- Вручную (с помощью скриптов и плагинов, образуемых API самих сетей);
- Посредством популярных сервисов для добавления кнопок «поделиться в социальных сетях».
Множественные многофункциональные сервисы предлагают пользователям широкие возможности в настройке и оформлении, не требуют наличия специальных навыков, имеют интуитивно понятный интерфейс для создания красивых элементов.
Все сервисы представляют собой площадки, где после ввода данных генерируется код, который необходимо разместить на веб-сайте.
К основным преимуществам этих «помощников» можно отнести:
- Простоту интеграции и легкость в освоении;
- Возможность охватить сразу все актуальные соц. сети «одним махом»;
- Вариативность в выборе внешнего вида кнопок и их эстетическая привлекательность;
- Выдерживание общей стилистики и геометрии блока, независимо от выбранных социальных сетей.
Статистика переходов комфортно отслеживается в Яндекс.Метрике и Google Analytics.
И все же ничего идеального не бывает. Сервисы социальных кнопок, в отличие от официальных решений, имеют ряд недостатков:
- Снижение скорости загрузки страницы, что может отрицательно сказаться и на позициях сайта при его ранжировании в поисковой выдаче, и на объеме продаж;
- Сбои и ошибки в работе серверов, ведущие к длительной загрузке кнопок или их временной недоступности;
- Периодическое появление рекламы;
- Отсутствие стабильного алгоритма работы через AJAX;
- Возможное использование памяти браузеров;
- Наличие сомнительного трафика;
- Непредставление гарантий безопасности данных пользователей.
При добавлении кнопок соцсетей «вручную» таких проблем можно избежать, но это не абсолютная панацея:
- Плагины разных платформ могут отличаться по дизайну и размерам, что усложняет их гармоничное сосуществование на одной странице;
- Процесс занимает больше времени, требует некоторых подготовительных действий и начальных знаний html.
И все же эти способы – самые востребованные и удобные варианты для быстрой установки скриптов кнопок «поделиться в социальных сетях».
Обзор сервисов кнопок социальных сетей
В интернете представлено большое количество сервисов, каждый из которых имеет свои особенности и постоянно радует пользователей улучшениями в системе настройки кнопок социальных сетей и их внедрения на сайт. Рассмотрим самые популярные конструкторы.
Яндекс кнопки соц сетей
Отечественный поисковый гигант предлагает удобный сервис установки кнопок социальных сетей от Яндекса – блок «Поделиться». Представленный инструментарий позволяет в считанные минуты создать «панель» из нужных элементов и произвести ее базовую настройку.
Варианты внешнего вида:
- Со счетчиком расшариваний;
- С выпадающим меню;
- Мелкие иконки в стиле минимализма.
Список доступных для шаринга сетей:
Первичная настройка отображения кнопок соц сетей от Яндекса и готовый код:
Для установки блока необходимо вставить сгенерированный код в нужное место 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 – понятный пошаговый генератор создания красивых кнопок социальных сетей.
Сервис предлагает быстрое формирование блоков, которое включает:
- Выбор необходимых соцсетей и размера иконок;
- Первичную настройку панели и другие опции;
- Функции предварительного просмотра и скачивания;
- Установку блока на свой ресурс: необходимо скачать архив (со скриптом), распаковать его, загрузить папку «share42» на свой сайт и указать путь до нее (http://site.name/share42/). Далее нужно выбрать тип ресурса и вставить в шаблон полученный в последнем окне код:
Sharethis
Англоязычная платформа с приятным оформлением и всеми необходимыми опциями для внедрения кнопок соц. сетей на веб-сайт. Сервис позволяет создать «фиксированные» или «скользящие» блоки, состоящие из множества иконок популярных сетей («Вконтакте» присутствует).
Функционал конструктора – все, что нужно для быстрого создания панелей. Принцип работы:
- После определения типа блоков («inline» или «sticky») осуществляется переход к выбору самих иконок (методом клика);
- Избрание расположения;
- Дополнительные настройки (размер, вид, наличие счетчика, тип обрамления);
- Финальное получение кода (требует регистрации).
Addthis
Самый известный иностранный сервис с услугами для размещения кнопок социальных сетей на сайте. Для доступа к полному функционалу необходимо пройти процедуру быстрой регистрации. И оно того стоит!
Addthis превращается в мощный и полный полезных «фишек» наглядный конструктор с превью в режиме онлайн.
Кнопки соц. сетей на сайте могут быть:
- Скользящими (floating);
- Зафиксированными на странице (inline);
- Раскрывающимися при наведении (expanding);
- Баннерами и слайдерами.
Все вариации полностью адаптированы для мобильных устройств.
После выбора типа блока и нажатия «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 – компактный и простой скрипт социальных кнопок «лайк» со счетчиком. На странице можно выбрать нужные сети, тип и расположение иконок, их скин и внешний вид.
Дальнейшие действия для установки:
- Нажать «скачать кнопки»;
- Сохранить архив на ПК;
- В шаблоне сайта создать папку «social» и вложить в нее распакованные файлы архива;
- Перед </head> прописать:
<link rel="stylesheet" href="путь-до-папки-social/social/social-likes_classic.css"> <script src="путь-до-папки-social/social/social-likes.min.js"></script>
Название файла .css может иметь другое значение (зависит от выбора, сделанного на сайте).
- Использовать другую часть кода и вставить ее в шаблон для размещения кнопок:
<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. Простота здесь лишь подчеркивает комфорт.
Для получения заветного кода нужно:
- Указать тип площадки для размещения;
- Выбрать стиль из списка;
- Нажать «Уже хочу!» – и лицезреть готовый код внизу страницы.
<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&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, скрипта и шрифтов (картинок).
Плюсы такого подхода:
- Нет лишнего трафика;
- Нет рекламы;
- Корректная работа;
- Нет проблем с зависимостью от сервиса (который может часто тупить и не загружаться);
- Нет проблем с поеданием памяти браузера.
Список ссылок на шаширнг в популярных социальных сетях:
Twitterhttps://twitter.com/intent/tweet?text=YOUR-TITLE&url=YOUR-URL&via=TWITTER-HANDLEFacebook
https://www.facebook.com/sharer/sharer.php?u=YOUR-URLGoogle plus
https://plus.google.com/share?url=YOUR-URLLinkedIn
https://www.linkedin.com/shareArticle?mini=true&url=YOUR-URL&title=YOUR-TITLE&summary=YOUR-SUMMARY&source=YOUR-URLPinterest
https://pinterest.com/pin/create/button/?url=YOUR-URL&description=YOUR-DESCRIPTION&media=YOUR-IMAGE-SRCVK
https://vk.com/share.php?url=YOUR-URL&title=YOUR-TITLE&description=YOUR-DESCRIPTION&image=YOUR-IMAGE-SRC&noparse=trueTumblr
https://www.tumblr.com/share/link?url=YOUR-URL&description=YOUR-DESCRIPTIONReddit
https://www.reddit.com/submit?url=YOUR_URL&title=YOUR_TITLEOdnoklassniki
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'ы для шаринга, которые приведены выше.