Нет никакой тайны в том, что уже много лет существуют особые кнопки социальных сетей, установка которых на сайте позволяет увидеть прирост трафика, а заодно способствует развитию PR-кампании своего ресурса. Расшаривание материалов обеспечивает охват гигантской аудитории, которая состоит из потенциальных клиентов, читателей и подписчиков.
С установкой инструментов шаринга социальных сетей повышается уровень доверия к сайту со стороны поисковых систем. Метод отлично показывает себя и в рамках продвижения в органической выдаче по Микро НЧ запросам , если дописывать уникальные комментарии к шейру.
Наша статья расскажет, как выбрать, правильно установить и добавить на свой сайт удобные и красивые социальные кнопки; какие сервисы предлагают свои услуги и в чем их достоинства; как самостоятельно добавить код и кастомизировать кнопки социальных сетей.
Расшаривание с помощью соц. кнопок позволяет увеличить посещаемость сайта до 20% !
Преимущества и недостатки сервисовЭффективные инструменты для шаринга могут быть добавлены двумя способами:
Множественные многофункциональные сервисы предлагают пользователям широкие возможности в настройке и оформлении, не требуют наличия специальных навыков, имеют интуитивно понятный интерфейс для создания красивых элементов.
Все сервисы представляют собой площадки, где после ввода данных генерируется код, который необходимо разместить на веб-сайте.
К основным преимуществам этих «помощников» можно отнести:
Статистика переходов комфортно отслеживается в Яндекс.Метрике и Google Analytics.
И все же ничего идеального не бывает. Сервисы социальных кнопок, в отличие от официальных решений, имеют ряд недостатков:
В интернете представлено большое количество сервисов, каждый из которых имеет свои особенности и постоянно радует пользователей улучшениями в системе настройки кнопок социальных сетей и их внедрения на сайт. Рассмотрим самые популярные конструкторы.
Яндекс кнопки соц сетейВарианты внешнего вида:
Список доступных для шаринга сетей:
Первичная настройка отображения кнопок соц сетей от Яндекса и готовый код:
Для установки блока необходимо вставить сгенерированный код в нужное место html-кода сайта. Возможна более точная работа с атрибутами, установка асинхронной загрузки скрипта и т.д. (см. документацию).
PlusoИзвестный в российском сегменте аналог знаменитого сервиса. Конструктор выделяется привлекательным дизайном элементов, удобным функционалом и наличием полезных настроек.
Окно предварительного просмотра и дополнительных опций:
Произведя нехитрые манипуляции по выбору нужных соц. сетей, иконок и их настроек, можно увидеть код:
(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"); h.appendChild(s); }})();
Для корректного отображения сервиса полученный скрипт с прилагающимися данными достаточно скопировать и установить в верстку сайта в выбранном месте.
Наряду с инструментами для шаринга дает возможность установить специальные служебные элементы: «печать», «в закладки» и т.д.
UptolikeПосетители могут выбрать 4 вида кнопки, один из которых – виджет (с разным положением относительно страницы).
Скрипт социальных кнопок выглядит так:
Для работы с виджетом код сложнее:
window.informerPosition = {vert:"top",hor:"left"}
Для установки достаточно поместить данные в шаблон.
Pip.Qip.ruПредставитель «моментальных» сервисов генерации кодов для установки социальных кнопок - Pip.Qip . Простота здесь лишь подчеркивает комфорт.
Для получения заветного кода нужно:
Останется лишь поместить его в код сайта.
Добавление кнопок соц сетей вручнуюАльтернативой безусловно удобным, но не всегда приемлемым сервисам социальных кнопок являются сами соц. сети, которые дают возможность вручную добавить кнопки на веб-сайт, используя плагины и API.
Знаменитый «Вконтакте» генерирует коды кнопок расшаривания по этому адресу.
С помощью виджета можно выбрать вид будущей кнопки и «прикрутить» счетчик (пункт «стиль»), придумать оригинальное название («текст») и получить заветный код.
Первую часть кода следует поместить внутри тега :
Вторую – в место непосредственного расположения кнопки:
Методика получения официальных кнопок Facebook еще более проста и понятна. На сайте можно воспользоваться
Один из них - малая гибкость и ограниченный выбор стандартных настроек. Взять к примеру блок , с недавних пор зачем-то вместе с социальными кнопками загружается встроенная Метрика… Опять же изменить размер или цвет кнопок довольно проблематично.
Со временем популярные решения обрастают дополнительными функциями, которые не только увеличивают размер подгружаемых скриптов, но и могут содержать вредоносный код.
После использования различных вариантов я пришел к мнению, что собственное решение гораздо лучше и сегодня расскажу об этом. Но вначале я рекомендую вам ознакомиться с инструкцией по установке шрифта - он будет задействован в примере.
Онлайн-демо и исходники данного примера вы найдете в конце статьи, а сейчас по порядку приступим к реализации. Сперва убедитесь, что на сайте используется jQuery, в противном случае подключите его, в WordPress это лучше делать через файл functions.php:
1 2 3 4 | function my_jquery() { wp_enqueue_script( "jquery" ) ; } add_action( "wp_enqueue_scripts" , "my_jquery" ) ; |
function my_jquery() { wp_enqueue_script("jquery"); } add_action("wp_enqueue_scripts", "my_jquery");
Затем подключите Font Awesome - мы будем использовать векторные иконки социальных сетей вместо изображений. Теперь необходимо вставить HTML основу кнопок в код шаблона:
1 2 3 4 5 6 7 8 9 |
/images/vk.png"
/
>
<
/
a
>
< / div > |