Кнопки социальных сетей для вашего сайта
Не клюет? И средств на прикормку посетителей уже много потратили. А кнопки социальных сетей для сайта установили? Понятно! Все симптомы заболевания на лицо – асоциальность сайта. Будем лечить.
Зачем сайту нужны кнопки социальных сетей?
Наличие на страницах сайта социальных кнопок является не только обязательным атрибутом, или модным аксессуаром. Прежде всего, социальные кнопки помогают владельцу ресурса экономить средства на раскрутке сайта. При этом продвижение происходит с помощью посетителей. А владельцу остается лишь наполнять свой сайт качественным контентом и ждать притока новых пользователей:
Но эти кнопки нужны не только владельцам сайтов. Их размещение важно и для самих социальных сетей. Каждая из этих кнопок является ссылкой, ведущей на социальный портал. А благодаря такому обмену ссылками поддерживается высокий уровень пользовательской активности внутри самих социальных сетей. Именно поэтому популярные социальные сети и предоставляют сайтам уже готовые коды своих кнопок.
Что представляет собой обычная социальная кнопка?
Для примера возьмем скрипт социальной кнопки ВКонтакте. Ее код:
<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="http://vk.com/js/api/share.js?90" charset="windows-1251"></script>Эту часть кода нужно разместить в так называемой «шапке» страницы сайта. В этом коде указан адрес скрипта, который должен выполняться при нажатии на социальную кнопку. Вот вторая часть кода, которая отвечает за отображение картинки кнопки:
<!-- Put this script tag to the place, where the Share button will be -->
<script type="text/javascript"><!--
document.write(VK.Share.button(false,{type: "round", text: "Сохранить"}));
--></script>Второй кусок кода нужно поместить в той части страницы, где будет отображаться кнопка:
Внешний вид кнопки можно легко скорректировать. Для этого нужно зайти в специальный раздел технической поддержки на сайте социальной сети. Здесь можно задать стиль кнопки, согласно которому и будет сгенерирован ее код.
Варианты легкого размещения
Существуют специализированные сервисы, позволяющие размещать на своем сайте кнопки сразу всех популярных социальных сетей. Это намного легче, чем вставлять скрипты каждой из них по отдельности. Рассмотрим наиболее популярные из этих сервисов:
- Блок «Поделиться» от Яндекс – позволяет сгенерировать код сразу для нескольких социальных кнопок. Данный сервис отличается ясным и понятным интерфейсом. Выбор социальных сетей осуществляется с помощью флажков в левой стороне страницы. Справа можно задать внешний вид кнопок:
- AddThis – данный сервис обладает англоязычным интерфейсом. Но в тоже время позволяет добавить кнопку любой социальной сети мира:
Место расположения панели социальных кнопок можно выбрать на нескольких шаблонах. В бесплатной версии аккаунта доступна выдвигаемая боковая панель. Также есть бесплатная версия плагина для WordPress. После прохождения регистрации на сайте сервиса предоставляется доступ к статистике переходов по социальным кнопкам.
- Share42 – понятный и простой интерфейс с возможностью «тонкой» настройки внешнего вида панели социальных кнопок. При этом процесс настройки сопровождается пошаговыми инструкциями с описанием действий, которые необходимо осуществить. Поэтому сервис подходит даже для не опытных вебмастеров:
Еще одним плюсом данного сервиса является генерация скрипта панели социальных кнопок с поддержкой нескольких популярных CMS.
Социальные кнопки и WordPress
Для популярных CMS создано множество плагинов групповой установки социальных кнопок. Рассмотрим пример установки плагина Social Share Buttons for WordPress.
Положительными сторонами этого расширения является полностью русскоязычный интерфейс, простота настройки и «заточенность» под популярные социальные сети Рунета:
- Яндекс;
- Вконтакте;
- LiveJournal;
- Facebook;
- Mai.ru;
- Одноклассники.
Порядок действий при установке плагина социальных кнопок для WordPress.
1) Заходим в административную панель сайта. Слева выбираем вкладку «Плагины», «Добавить новый».
2) На странице «Установить плагины» в поисковое поле вводим название расширения и нажимаем на кнопку «Поиск плагинов»:
3) В результатах поиска находим имя нужного расширения. После чего нажимаем на ссылку «Установить»:
4) После загрузки архива и установки активируем плагин нажатием соответствующей ссылки:
5) После его активации в левой консоли инструментов появится новый раздел «Share Buttons»:
Настройки плагина состоят из нескольких пунктов:
- «Главные настройки» - здесь можно загрузить логотип, задать текст, который будет отображаться перед социальными кнопками, а также их расположение;
- «Share настройки» - задаются параметры отображения кнопок share («Поделиться»);
- «Like настройки»:
Еще несколько проверенных плагинов для WordPress:
- Fixed Social buttons – этот плагин позволяет добавить на сайт плавающую социальную панель, которую можно «прилепить» сверху, снизу или сбоку;
- Html Social share buttons – данный плагин включает в себя социальные кнопки, созданные исключительно с помощью css и html.
Социальные кнопки и Joomla
Под этот движок также создано много плагинов для работы с социальными кнопками. Рассмотрим процесс установки расширения на примере SocButtons. Особенности этого плагина:
- Поддержка всех наиболее популярных версий движка;
- Простота настройки;
- Характеристики внешнего вида задаются для каждой кнопки отдельно;
- Малый вес инсталляционного пакета.
Порядок действий:
1) Заходим в административную часть сайта на Joomla и выбираем значок «Менеджер расширений».
2) Здесь определяемся с источником для загрузки расширения:
3) После инсталляции расширения переходим в «Менеджер плагинов» и активируем только что установленное расширение. Для этого нужно нажать на зеленый значок вверху страницы:
4) Для настройки нажимаем на имя расширения в списке. В данном плагине настройки отображения задаются для каждой социальной кнопки отдельно:
Еще несколько проверенных расширений для Joomla:
- Social Bookmarking – данный плагин существует сразу в нескольких версиях. Каждая позволяет расположить социальную панель в определенном положении (горизонтально, вертикально, или вообще сделать ее плавающей);
- JL Like – этот плагин не производит дополнительную загрузку внешних скриптов, позволяет вести статистику голосов из социальных сетей.
Скрипт или плагин?
Установка плагина является самым простым и быстрым вариантом. Чаще всего после его инсталляции весь сайт работает исправно. Но все может разрушиться сразу после обновления версии движка на более новую.
Из-за несовпадений версий движка и плагина могут возникать проблемы в работе сайта. Чаще всего они связаны с некорректным отображением каких-либо элементов дизайна. В нашем случае это кнопки социальных сетей. Тогда и приходит понимание того, что иногда лучше использовать голый скрипт вместо специализированного плагина.
Код социальных кнопок можно получить на одном из специализированных сервисов. Их обзор представлен выше. Для примера возьмем сервис Share42. Он поддерживает создание социальных кнопок для популярных движков. Порядок действий:
1) Заходим на сайт сервиса и настраиваем «под себя» панель социальных кнопок.
2) Скачиваем готовый скрипт:
3) Размещаем его в папке, находящейся по адресу wp-content/plugins/share42/share42.js.
4) Добавляем кусок сгенерированного кода из пункта 5, руководства опубликованного на сайте сервиса:
5) Добавляем его в начало файла single.php редактируемой темы:
6) Список доступных для настройки параметров отображения социальных кнопок приведен в пункте 6 руководства опубликованного на сайте сервиса.
Ну, вот мы и вылечили сайт от асоциальности. Теперь вам, как продвинутому владельцу ресурса, остается только сидеть и ждать волны новых пользователей.