Кнопки социальных сетей для сайта

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

Эра социальных сетей в самом разгаре и с этим приходится считаться. Если вы планируете создать свой сайт, особенно если это что-то вроде блога, вам не пройти мимо кнопок социальных сетей.

Что же это такое? На самом деле социальная кнопка это обычная ссылка, которая ведёт на скрипт публикации информации в социальной сети (англ. share – доля, часть, участие). Благодаря тому же JavaScript эта ссылка может быть более динамичной. Например, открывать страницу шаринга во всплывающем окне или показать количество ссылок, а также многое другое.

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

• Facebook Like Button. Помимо кнопки «Мне нравится» может включать в себя кнопку «Отправить». Из-за невозможности прописать текст кнопки и длинного русскоязычного вариант «Мне нравится» часто использую англоязычную кнопку с текстом «Like». Для этого вместо ru_RU следует использовать en_US.

  

  К слову, если возможно, обеспечьте поддержку Open Graph тегов. Один из вариантов для блогов на Blogger я уже как-то упоминал в комментариях в ответ на вопрос Максима Булавинова.

• Кнопка «Сохранить» от ВКонтакте. Если говорить о социальной кнопке с циферкой, то тут возможен только горизонтальный вариант. Единственный плюс - здесь вы можете задать текст ссылки в параметре text.

  

• Кнопка «Мне нравится» от ВКонтакте. Этот вариант куда как интересней предыдущего. В тоже время здесь мы имеем жесткую привязку к сайту/приложению. Текст кнопки можно выбрать только из предложенных вариантов. В общем, есть свои нюансы.

  

• Кнопка «Поделиться» для блогов на Я.ру. Как всегда - просто и лаконично. Хотя, асинхронный код несколько великоват. Как и у Mail.ru здесь сам код идёт после кнопки.

  

• Кнопки «Нравится» для Мой Мир и «Класс» для Одноклассники от Mail.ru. По сути, это два в одном, но можно сгенерировать код и для каждой кнопки отдельно. Опять же, название кнопок можно выбрать только из имеющихся вариантов. Причём только вариант «Поделиться» может быть выбран для обоих кнопок, остальные варианты отличны.

  

• Google «+1 Button». Очень важная кнопка для продвижения в поисковой системе Google. Благодаря тому, что кнопка имеет краткий текст «+1» проблем с её интеграцией не возникает.

  

  К слову, здесь будет не лишним упомянуть о микроданных от Schema.org, именно их рекомендует Google.

• Google «Share». На самом деле именно эта кнопка позволяет поделиться ссылкой в социальной сети Google+. Предыдущий вариант добавляет отметки в отдельную ленту.

  

• Отправить ссылку кнопкой «Твитнуть» от Twitter. На самом деле генератор кода не предоставляет достаточного количества вариантов. Для создания кнопки со счётчиком вверху придётся самостоятельно внести изменения в код. В частности data-count='vertical'. Опять же, слишком большая получается кнопка, приходится использовать англоязычный вариант.

  

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

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

• Pluso – отечественный сервис генерации единого кода кнопок для нескольких соц.сетей. Отличается достаточно красивыми кнопками и оптимальным набором функций. Производит подсчёт кликов по кнопкам, что может отображаться в счётчике.

  

• ShareThis – зарубежный сервис с достаточно широкими возможностями, в том числе и по обработке статистики. Собственно именно его код я по началу использовал для создания панели социальных кнопок. Проблема в том, что он тоже использует свои, легко накручиваемые счётчики, правда для каждой кнопки отдельный.

  

• AddThis – ещё один популярный зарубежный сервис из этой серии. К слову, здесь имеется возможно встраивать и стандартные кнопки некоторых соц.сетей, как и на предыдущем сервисе. Тем не менее, это уже на любителя.

  

• Блок «Поделиться» от Яндекс – достаточно кривое и убогое решение, но стоящее внимание хотя бы потому, что позволяет не заморачиваться с адресами страниц шаринга соц.сетей, передаваемыми им параметрами и т.д. Таким образом, легко создать своё решение для того чтобы поделиться ссылкой в социальны сетях.

  

Промежуточным решением в рассматриваемом нами направлении является Share42.com от Димка. Это бесплатный сервис, генерирующий скрипт, который позволяет посетителям вашего сайта публиковать ссылки на ваши статьи в социальные медиа (закладки и социальные сети). Достаточно хороший функционал и неплохая реализация, но требуется свой хостинг или место, где можно было бы хранить скрипт.

Ну и если уж мы заговорили о криптах, то стоит упомянуть Social Share Buttons for WordPress – навороченный плагин для блогов на движке WordPress. Создаёт дополнительную нагрузку, но вполне оправдывает себя из-за обширного набора настроек. К слову, если вам и это показалось сложно, то могу посоветовать свой простенький WordPress плагин вставки социальных кнопок. Его нужно будет закачать, активизировать и всё.

Как вы видите, вариантов тут достаточно много и ничего сложного здесь нет. Главное, определиться, что и как вы хотите реализовать, а также сопоставить свои возможности и потребности. На этом у меня всё. Спасибо за внимание. Удачи!

Короткая ссылка: http://goo.gl/Mv9gQ