Нет никакой тайны в том, что уже много лет существуют особые кнопки социальных сетей, установка которых на сайте позволяет увидеть прирост трафика, а заодно способствует развитию PR-кампании своего ресурса. Расшаривание материалов обеспечивает охват гигантской аудитории, которая состоит из потенциальных клиентов, читателей и подписчиков.
С установкой инструментов шаринга социальных сетей повышается уровень доверия к сайту со стороны поисковых систем. Метод отлично показывает себя и в рамках продвижения в органической выдаче по Микро НЧ запросам , если дописывать уникальные комментарии к шейру.
Наша статья расскажет, как выбрать, правильно установить и добавить на свой сайт удобные и красивые социальные кнопки; какие сервисы предлагают свои услуги и в чем их достоинства; как самостоятельно добавить код и кастомизировать кнопки социальных сетей.
Расшаривание с помощью соц. кнопок позволяет увеличить посещаемость сайта до 20% !
Преимущества и недостатки сервисовЭффективные инструменты для шаринга могут быть добавлены двумя способами:
Множественные многофункциональные сервисы предлагают пользователям широкие возможности в настройке и оформлении, не требуют наличия специальных навыков, имеют интуитивно понятный интерфейс для создания красивых элементов.
Все сервисы представляют собой площадки, где после ввода данных генерируется код, который необходимо разместить на веб-сайте.
К основным преимуществам этих «помощников» можно отнести:
- Простоту интеграции и легкость в освоении;
- Возможность охватить сразу все актуальные соц. сети «одним махом»;
- Вариативность в выборе внешнего вида кнопок и их эстетическая привлекательность;
- Выдерживание общей стилистики и геометрии блока, независимо от выбранных социальных сетей.
Статистика переходов комфортно отслеживается в Яндекс.Метрике и Google Analytics.
И все же ничего идеального не бывает. Сервисы социальных кнопок, в отличие от официальных решений, имеют ряд недостатков:
- Снижение скорости загрузки страницы, что может отрицательно сказаться и на позициях сайта при его ранжировании в поисковой выдаче, и на объеме продаж;
- Сбои и ошибки в работе серверов, ведущие к длительной загрузке кнопок или их временной недоступности;
- Периодическое появление рекламы;
- Отсутствие стабильного алгоритма работы через AJAX;
- Возможное использование памяти браузеров;
- Наличие сомнительного трафика;
- Непредставление гарантий безопасности данных пользователей.
- Плагины разных платформ могут отличаться по дизайну и размерам, что усложняет их гармоничное сосуществование на одной странице;
- Процесс занимает больше времени, требует некоторых подготовительных действий и начальных знаний html.
В интернете представлено большое количество сервисов, каждый из которых имеет свои особенности и постоянно радует пользователей улучшениями в системе настройки кнопок социальных сетей и их внедрения на сайт. Рассмотрим самые популярные конструкторы.
Яндекс кнопки соц сетейВарианты внешнего вида:
Список доступных для шаринга сетей:
Первичная настройка отображения кнопок соц сетей от Яндекса и готовый код:
Для установки блока необходимо вставить сгенерированный код в нужное место 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 еще более проста и понятна. На сайте можно воспользоваться
Если вы боитесь, что за вами наблюдают в интернете — выключите компьютер.
К аждый вебмастер, рано или поздно, задумывается над установкой социальных кнопок на свой сайт. Ведь сейчас без социальных сетей некоторые люди не представляют своей жизни, зачем обделять их возможности в шаринге ваших статей? Но со временем многие сервисы социальных кнопок теряют рассудок и творят что хотят со своими кодами, запихивая туда всё что не нужно. Именно по этой параноидальной идеи в этой статье вы найдете коды самых чистых кнопок шаринга социальных сетей для вашего сайта.Ни для кого не секрет, что почти все сервисы соц.кнопок сливают инфу о ваших пользователях куда понадобится. О Боже! Не может быть! Я только что про это узнал! — Поздравляю! Им же нужно как-то пользоваться вами, за их труд и за старания. Они сделали хорошие сервисы, с большим функционалом, удобством и «качеством». Вам стоит только выбрать что нужно, и поставить код куда надо. И все. А какая им выгода задаром делать такие маневрирования в интернете? Правильно. Никакой. Вот и время от времени каждая такая контора и палится на сливе данных в какую-нибудь DMP.
Я не буду описывать каждый из таких сервисов, все они имеют хороший функционал, некоторые уникальные фишки, но представлять их по отдельности — не имею желания. Составил небольшой список ниже.
Список самых популярных сервисов социальных кнопок для сайта- share.pluso.ru
- uptolike.ru
- tech.yandex.ru/share
- share42.com
- sharethis.com
- pip.qip.ru
- www.addtoany.com
- www.po.st
- www.addthis.com
- sharebuttons.com
Если у вас не хватает времени, или вам лень делать больше чем пару движений кистей рук и фаланг пальцев, то вы смело можете пользоваться этими сервисами. Они великолепно подходят для сайтов, также как и для посетителей. Но 100% безопасность данных пользователей, 100% работы их DNS и загрузки ваших сайтов не гарантирует никто. Т.е. если произошел сбой на серверах соц.кнопок, то ваши сайты будут загружаться медленнее, чем обычно. Да это бывает редко, но бывает. Вы конечно же можете поставить асинхронную загрузку этих скриптов, оптимизировать их работу, но это уже больше чем пару движений, о которых я писал для ленивых.
Конечно в интернете есть коды соцок, которые ставятся внутри вашего сайта и никуда информацию не сливают, но многие из них содержат внешние ссылки на эти же социальные сети. Вебмастера не любят внешних ссылок и по этому, для самых параноидальных вебмастеров я собрал готовые коды на базе скрипта goodshare.ru, за что им собственно и спасибо.
Пример установки этого кода не для тех, кто не знает азы HTML или CSS, но если у вас есть руки и немного времени, у вас все получится, если будете идти строго по инструкции. И так поехали:
Выглядят они так:
По стандарту настроены шесть социальных сетей: Facebook, ВКонтакте, Одноклассники, Мой Мир, Google Plus, Twitter. В настройках скрипта их больше 30, но это все устанавливается отдельно по желанию. Плюсы этих кнопок, как заявляют авторы, с чем я полностью согласен:
Что делает сам скрипт, и вообще зачем нужно было делать этот скрипт? В скрипте этих кнопок написаны все API всех соц сетей, и скрипт делает любое место на сайте активным блоком шаринга.
Например, вы можете его поставить на пустые DIV блоки, или Span, или картинки, или пустые ссылки, да практически любой элемент сайта можно превратить в эти кнопки. В моем примере я использовал скрипт на пустые Div.
По поводу картинок: их тут нет. Иконки которые вы видите взяты из шрифта, это просто символ и не более.
Скачать архив кнопок вы можете по .Установка этих кнопок очень проста. В архиве есть всего четыре файла: Шрифт, CSS, JS, и TXT.
1). Шрифт вам нужно загрузить в любую папку на вашем сервере, можете закинуть ее туда-же, где лежат ваши JS или CSS.
2). Затем загрузите JS на ваш сервер, и выведите его на вашем сайте с помощью кода в любом месте, но я рекомендую в самом низу страницы:
Этот скрипт состоит из двух частей, первая — это Jquery, вторая — сам код кнопок. Если у вас уже подключается Jquery на сайте, то вы можете удалить первую часть кода и сократить тем самым размер файла.
ВАЖНО : (для тех, кто убрал часть код Jquery) скрипт кнопок должен загружаться после скрипта Jquery.
3). После установки JS и шрифта, вам следует добавить CSS себе на сайт. Просто скопируйте все содержимое файла soc.css в один из ваших подключаемых CSS на сайте.
ВАЖНО : В 82 строке файла soc.css поменяйте URL на свое местоположение Шрифта!
4). После всего этого, скопируйте HTML код из файла HTML.TXT к себе на сайт, где вы хотите видеть эти замечательные кнопки.
В структуре скрипта есть возможность установки счетчиков шаринга соц.сетей, но более подробнее вы можете почитать у них в документации на сайте.
А саму работу скрипта вы можете проверить чуть-ниже этих строк, ведь именно он установлен у меня на блоге.
Спасибо за внимание, если будут вопросы по установке, пиши комментарии.
С вами был, ленивый Staurus.
Доброго времени суток уважаемые пользователи сайта — сайт , в сегодняшней статье я хочу рассказать вам, о замечательном сервисе Share.Pluso.ru . Данный ресурс предлагает красивые и функциональные кнопки социальных сетей, для вашего сайта.
Основные преимущества сервиса Pluso — очень большое количество кнопок социальных сетей , быстрая настройка и установка, красивый дизайн, обширная статистика, код кнопок загружается асинхронно.
Преимущества и особенности сервисаСуществует много сервисов, плагинов (Socbuttons — плагин социальных сетей для Joomla) и других методов по добавлению кнопок социальных сетей на сайт, чем же отличается сервис Pluso и какие его преимущества?
- Огромный выбор вариации дизайна кнопок — более 300 вариантов
- Все что требуется, для установки кнопок себе на сайт — зайти на Pluso, выбрать дизайн кнопок и скопировать код, регистрация не требуется
- Если вы решите зарегистрироваться на сервисе, то вы сможете просматривать подробную статистику по использованию установленных кнопок.
- Сервис Pluso предлагает большое количество социальных сетей, а также кнопку печати и закладок.
Первым делом заходим в конструктор сервиса — https://share.pluso.ru/ , после чего приступаем к настройке дизайна кнопок.
1. Выбираем стиль кнопок и количество отображаемых социальных сетей. Выбор происходит простым перетаскиванием, между полями «Выбранные сети» и «Доступны к выбору», также вы можете менять порядок расположения кнопок.
2. В окне «Предпросмотр» можно наглядно посмотреть, как будут выглядеть наши кнопки. Справа есть дополнительные настройки:
- Размер иконок — большие, средние, маленькие
- Форма — квадратные или круглые
- Расположение кнопок — в одну или две строки
- Горизонтальные или вертикальные кнопки
- С счетчиком или без (имеется ввиду общий счетчик для кнопок)
- С фоном или без
3. После настройки внешнего вида кнопок, копируем код и вставляем у себя на сайте.
Как установить кнопки социальных сетей от Share.Pluso.ru на сайте JoomlaВставить скопированный код кнопок от Share Pluso на сайт Joomla, можно несколькими способами:
- Используя модуль «HTML-код»
- С помощью «Компоненты» — «Баннеры»
- Непосредственно в код страницы
На примере будем использовать первый способ: в админ панели заходим в «Сайт» -> «Общие настройки» — > «Редактор по умолчанию» — выбираем «Редактор без редактора» — нажимаем «сохранить и закрыть». Далее переходим в «Расширение» -> «Менеджер модулей» -> «Создать» -> «HTML-код». Вставляем скопированный код в поле «Текст», задаем заголовок и позицию (другие настройки по желанию), ставим «Опубликовано» и сохраняем. После сохранения можно выбрать другой «Редактор».
Примечание: еще одним преимуществом кнопок социальных сетей от Pluso, является то, что их можно «накручивать». Данное действие не приведет к улучшению показателей вашего сайта, но все же — некоторые ресурсы нуждаются не в нулевых показателях кнопок, для повышения солидности в глазах пользователя.
Как накрутить счетчик: все просто — после нажатия на любую кнопку, вы или другой пользователь можете отменить дальнейшие действия, а счетчик увеличится. Хотя в статистике на сайте Pluso — количество человек «поделившихся страницей» — будет корректным.
Pluso — как убрать иконку «плюс»После того, как мы выбрали необходимые для отображение на нашем сайте кнопки, автоматически к ним добавляется иконка «плюс», при наведении или нажатии на которую — будет появляться окно с абсолютно всеми доступными кнопками социальных сетей:
Если вам необходимо скрыть данную иконку, то вам необходимо добавить следующий код в вашу таблицу со стилями (css):
Pluso - more { display : none ! important ; } |
Данный код — блокирует отображение иконки на дисплее у пользователей сайта.
Статистика по кнопкам от сервиса PlusoКак я уже упоминал ранее, для получение расширенной статистики по кнопкам социальных сетей, необходимо зарегистрироваться на сервисе http://share.pluso.ru.
Статистика собирается и отображается по 4 критериям:
- Активность — социальная активность пользователей, на тех страницах, на которых расположен код с кнопками от Pluso. Здесь можно просмотреть количество действий, поделившихся страницей (реальное количество пользователей), процент пользователей поделившихся от общего числа пользователей и другие показатели.
- Популярные сервисы — график самых популярных сервисов и других кнопок среди ваших пользователей.
- Популярные страницы — страницы с самым большим показателем счетчика
- Социальный трафик — круговая диаграмма социального трафика.
Популярный модуль вывода групп Вконтакте для вашего сайта на Joomla.
Не клюет? И средств на прикормку посетителей уже много потратили. А кнопки социальных сетей для сайта установили? Понятно! Все симптомы заболевания на лицо – асоциальность сайта. Будем лечить.
Зачем сайту нужны кнопки социальных сетей?Наличие на страницах сайта социальных кнопок является не только обязательным атрибутом, или модным аксессуаром. Прежде всего, социальные кнопки помогают владельцу ресурса экономить средства на раскрутке сайта. При этом продвижение происходит с помощью посетителей. А владельцу остается лишь наполнять свой сайт качественным контентом и ждать притока новых пользователей:
Но эти кнопки нужны не только владельцам сайтов. Их размещение важно и для самих социальных сетей. Каждая из этих кнопок является ссылкой, ведущей на социальный портал. А благодаря такому обмену ссылками поддерживается высокий уровень пользовательской активности внутри самих социальных сетей. Именно поэтому популярные социальные сети и предоставляют сайтам уже готовые коды своих кнопок.
Что представляет собой обычная социальная кнопка?Для примера возьмем скрипт социальной кнопки ВКонтакте. Ее код:
Эту часть кода нужно разместить в так называемой «шапке » страницы сайта. В этом коде указан адрес скрипта, который должен выполняться при нажатии на социальную кнопку. Вот вторая часть кода, которая отвечает за отображение картинки кнопки:
Второй кусок кода нужно поместить в той части страницы, где будет отображаться кнопка:
Внешний вид кнопки можно легко скорректировать. Для этого нужно зайти в специальный раздел технической поддержки на сайте социальной сети. Здесь можно задать стиль кнопки, согласно которому и будет сгенерирован ее код.
Варианты легкого размещенияСуществуют специализированные сервисы, позволяющие размещать на своем сайте кнопки сразу всех популярных социальных сетей. Это намного легче, чем вставлять скрипты каждой из них по отдельности. Рассмотрим наиболее популярные из этих сервисов:
Место расположения панели социальных кнопок можно выбрать на нескольких шаблонах. В бесплатной версии аккаунта доступна выдвигаемая боковая панель. Также есть бесплатная версия плагина для WordPress . После прохождения регистрации на сайте сервиса предоставляется доступ к статистике переходов по социальным кнопкам.
- Share42 – понятный и простой интерфейс с возможностью «тонкой» настройки внешнего вида панели социальных кнопок. При этом процесс настройки сопровождается пошаговыми инструкциями с описанием действий, которые необходимо осуществить. Поэтому сервис подходит даже для не опытных вебмастеров:
Еще одним плюсом данного сервиса является генерация скрипта панели социальных кнопок с поддержкой нескольких популярных CMS .
Социальные кнопки и WordPressДля популярных CMS создано множество плагинов групповой установки социальных кнопок. Рассмотрим пример установки плагина Social Share Buttons for WordPress .
Положительными сторонами этого расширения является полностью русскоязычный интерфейс, простота настройки и «заточенность » под популярные социальные сети Рунета:
Порядок действий при установке плагина социальных кнопок для WordPress .
1) Заходим в административную панель сайта. Слева выбираем вкладку «Плагины
», «Добавить новый
».
2) На странице «Установить плагины
» в поисковое поле вводим название расширения и нажимаем на кнопку «Поиск плагинов
»:
3) В результатах поиска находим имя нужного расширения. После чего нажимаем на ссылку «Установить»:
4) После загрузки архива и установки активируем плагин нажатием соответствующей ссылки:
5) После его активации в левой консоли инструментов появится новый раздел «Share Buttons »:
Настройки плагина состоят из нескольких пунктов:
Еще несколько проверенных плагинов для WordPress :
- Fixed Social buttons – этот плагин позволяет добавить на сайт плавающую социальную панель, которую можно «прилепить» сверху, снизу или сбоку;
- Html Social share buttons – данный плагин включает в себя социальные кнопки, созданные исключительно с помощью css и html.
Под этот движок также создано много плагинов для работы с социальными кнопками. Рассмотрим процесс установки расширения на примере SocButtons . Особенности этого плагина:
- Поддержка всех наиболее популярных версий движка;
- Простота настройки;
- Характеристики внешнего вида задаются для каждой кнопки отдельно;
- Малый вес инсталляционного пакета.
Порядок действий:
1) Заходим в административную часть сайта на Joomla
и выбираем значок «Менеджер расширений
».
2) Здесь определяемся с источником для загрузки расширения:
3) После инсталляции расширения переходим в «Менеджер плагинов » и активируем только что установленное расширение. Для этого нужно нажать на зеленый значок вверху страницы:
4) Для настройки нажимаем на имя расширения в списке. В данном плагине настройки отображения задаются для каждой социальной кнопки отдельно:
Еще несколько проверенных расширений для Joomla:
- Social Bookmarking – данный плагин существует сразу в нескольких версиях. Каждая позволяет расположить социальную панель в определенном положении (горизонтально, вертикально, или вообще сделать ее плавающей );
- JL Like – этот плагин не производит дополнительную загрузку внешних скриптов, позволяет вести статистику голосов из социальных сетей.
Установка плагина является самым простым и быстрым вариантом. Чаще всего после его инсталляции весь сайт работает исправно. Но все может разрушиться сразу после обновления версии движка на более новую.
Из-за несовпадений версий движка и плагина могут возникать проблемы в работе сайта. Чаще всего они связаны с некорректным отображением каких-либо элементов дизайна. В нашем случае это кнопки социальных сетей. Тогда и приходит понимание того, что иногда лучше использовать голый скрипт вместо специализированного плагина.
В новой версии движка на php структура методов и функций меняется очень редко. Поэтому скрипт легко «переносит» процесс такого обновления.
Код социальных кнопок можно получить на одном из специализированных сервисов. Их обзор представлен выше. Для примера возьмем сервис Share42 . Он поддерживает создание социальных кнопок для популярных движков. Порядок действий.
В этом небольшом уроке мы создадим простые и кастомные кнопки для шаринга в социальные сети.
Предлагаемый мной вариант лишен этих недостатков — все файлы будут на вашем сервере (то есть упадёт вместе с сайтом), ничего не подгружая извне, и к тому же очень хорошо кастомизируется. Кроме того, у нас будет небольшой плюс — обыкновенно в состав социальных кнопок входит большая тройка (ВКонтакте, Facebook и Twitter). В нашем случае в обойме присутствует Mail.Ru, Одноклассники и Telegram, чтобы никто не ушёл с нашего сайта нерасшаренным.
Единственный существенный минус: количество нажатий на кнопки считаться не будет . Мы уходим за рамки простоты и гибкости.
Впервые вопрос о собственных кнопках соц.сетей меня посетил в тот момент, когда для страницы на сайте социальный шаринг был очень нужен, но все ресурсы не подходили по дизайну. И не меня одного — сама идея кастомных кнопок далеко не новая. Самое интересное решение, на мой взгляд, было мной обнаружено на Хабре и после непродолжительных поисков привела на GitHub . Я взял за основу логику работы таких кнопок шаринга и творчески их доработал.
Решение простое как валенок — делаются ссылки для социальных сетей, внутри которых передаются понятные им параметры. Поскольку для этого используется тег , то в него можно завернуть практически всё, что угодно — простор для кастомизаций (ради чего всё это и делается) огромный.
Но у этого скрипта есть один недостаток — скрипт, который обрабатывал поведение браузера при нажатии на одну из кнопок. Привожу его часть, в которой вы сами легко увидите две проблемы:
Vkontakte: function(purl, ptitle, pimg, text) { url = "http://vkontakte.ru/share.php?"; url += "url=" + encodeURIComponent(purl); url += "&title=" + encodeURIComponent(ptitle); url += "&description=" + encodeURIComponent(text); url += "&image=" + encodeURIComponent(pimg); url += "&noparse=true"; Share.popup(url); },
Первая проблема небольшая и многие могут сказать мне: “Эй, чувак написал это в 2012 году! Просто поменяй строчку и всё”. И я с вами соглашусь, что можно просто поменять vkontakte.ru на vk.com и просто закрыть вопрос.
Вторая — под каждый сервис нужно писать новый блок. Который тоже сделать не очень-то проблемно, просто скопипастив и убрав/добавив нужные параметры.
Но что делает этот скрипт в итоге? Он просто создаёт всплывающее окно, в которое передаёт перечисленные параметры. Вот эти строчки:
Popup: function(url) { window.open(url,"","toolbar=0,status=0,width=626,height=436"); }
Вот именно работу этого скрипта я немного видоизменил. Но об этом чуть ниже. Рассмотрим сами кнопки и принцип их работы.
Вначале нам необходимо иметь несколько переменных для кнопок шаринга:
- $Title — Заголовок (название) страницы
- $Description — Описание страницы
- $ImageUrl — путь к изображению страницы
- $Link — прямая ссылка на страницу
Я назвал их условно, чтобы было наглядно понятно, сколько их необходимо и что они из себя представляют. Каким способом они будут браться на вашем сайте — вручную или автоматически — зависит только от приложения, на котором это будет исполнено. Например, в CMS WordPress это будет выглядеть так:
- $Title — это
- $Description —
- $ImageUrl —
- $Link —
Теперь в нужном нам месте вставляем следующий код, где на место переменных подставляем нужные значения (если необходимо):
ВКонтакте Facebook Mail.Ru Одноклассники Twitter Telegram
Готово. Код уже рабочий и его можно использовать — при нажатии на ссылку открывается новая вкладка социальной сети. А теперь давайте сделаем так, чтобы он не плодил вкладок, а открывал небольшое окошко поверх браузера. Чуть ниже добавим следующего кода:
function setOnclick(a) {
a.setAttribute("onclick","popupWin = window.open(this.href,"contacts","toolbar=0,status=0,width=626,height=436"); popupWin.focus(); return false");
}
function externalLinks() {
var links = document.getElementsByTagName("a");
for (i=0; i
