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

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

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

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

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

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

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

    генератор кода социальной кнопки Facebook Like Button

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

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

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

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

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

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

    социальная кнопка гугл плюс

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

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

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

    социальная кнопка Twitter

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

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

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

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

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

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

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

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

share24 - скрипт кнопок социальных закладок и сетей

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

Social Share Buttons for WordPress

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

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

Twitter Facebook ВКонтакте Одноклассники Google+

23 комментария:

Курченко Антон
Вот только вчера задался проблемой о установке к себе на блог социальных кнопок, а сегодня решил зайти на ваш блог, т.к. вспомнил про вашу мега крутую форму соц. кнопок слева. А тут на тебе и вы мануал написали, блин мне все больше и больше хочется с вами пообщаться получше, уже 2 совпадения!

Суть - как мне на своем блоге сделать такую же хрень сбоку с соц. кнопками, как и у вас? У меня стоит один твиттер и то плагином. А мне надо все кнопки, как у вас, но вот плагинов не найду для WP нормальных. Подскажите решение! Вверху вы вроде-бы указали сервисы, но там нету решения, как у вас!
Константин Кирилюк
О панели социальных кнопок я уже рассказывал, только надо будет вставить стандартные коды соц сетей вместо ShareThis ;)
Константин Кирилюк
2Иван Шипилов: ну, по моему, ответ очевиден... ведь именно так у меня всё и сделано на блоге. Стандартные кнопки - это достаточно серьёзная нагрузка, потому лучше ограничиться наиболее важными, остальные будут в "общем" варианте.
Игорь Кабакин
удачно я заглянул сюда)) Рluso - классная штука! А плагины мне не нравились - то того нет, то этого..
Константин Кирилюк
2Игорь Кабакин: ну генератор скрипта Димка тоже не плох, а вообще лучше всего самому, ручками сделать так как хочется :)
Алексей Рюмин
Здравствуйте! Подскажите, пожалуйста, в чём может быть проблема:
использую wordpress. В файл single.php поставил скрипт от Share42.com. Попробовал и скрипт поделиться от яндекса. Картинка записи в wordpress не "цепляется" - при публикации в контакте или facebook отображается только логотип сайта.
Сейчас сайт находится на beze.aryumin.ru
Сегодня/завтра переношу на другой домен fotobeze.ru (то есть ссылка поменяется).
На другом сайте этот скрипт отлично работает - видит все фотографии страницы. Здесь не видит ни картинки от nextgen gallery ни отдельно загруженные в запись картинки.
Константин Кирилюк
2Алексей Рюмин: для кнопок используется та картинка, которая прописана в og:image.
Алексей Рюмин
Спасибо за ответ, Константин! Извините, а какие образом эту ситуацию в принципе можно решить? Как заставить прописываться все картинки страницы в og:image? Я не знаком с работой этого тега.
Константин Кирилюк
2Алексей Рюмин: ну, это чисто технический нюанс. Как я понял, у вас на блоге используется динамическая галерея, т.е. с десяток фоток в крутилке. В таком варианте можно реализовать замену значения тега og:image средствами JavaScript, но это значит - править готовое решение. В общем, проще всего будет подыскать что-то соответствующее или обратить внимание в сторону статики. Ах да, в принципе адрес нужной картинке можно передать напрямую в кнопку, но это тоже самое, что и с динамическим og:image.
Алексей Рюмин
Константин, у меня не работает эта штука (og:image) в отношении простой галереи nexgen gallery (в разделе новости галереи). То что на главной крутится на джаве как раз работает, но мне оно не особо нужно. В разделе новости og:image не работает и с простыми картинками загруженными без использования плагинов галерей... Там джавы нет
Константин Кирилюк
На главной у меня только первая картинка из сета вставляется при шаринге... хотя и это не должно было бы быть. В тег og:image прописана только адрес логотипа, на всех страницах... вот он по идее и должен вставляться... везде.
Алексей Рюмин
а там в og:image можно как-то обозначить что б все картинки видел на сайте, а не только логотип?
Константин Кирилюк
Попробуйте вообще убрать все эти "og:" теги из шаблона, тогда будут подставляться все картинки, размещенные на картинки и имеющие достаточный размер...
Алексей Рюмин
Спасибо за совет, Константин, попробую! А все og бурать или только og-image?
Константин Кирилюк
Наверное, оптимальней будет убрать именно все, в противном случаю будут подставляться именно эти, дефолтные... наверное :)
Людмила Сахнова
Спасибо за Share42.com ,давно ищу кнопочку от Li.ru почему то в наборах редко встречается.Попробую этот сервис.
Денис Воеводин
Интересная статья) коротко и ясно как установить кнопки)
Антон Коробский
Константин, а что за кнопки соц. сетей стоят в конце Вашей статьи? Уж очень они красивые, хочу себе такие же :)
Константин Кирилюк
2Антон Коробский кнопки "Поделиться" от Яндекс с data-yasharetype="big"
Антон Коробский
2Константин Кирилюк. Спасибо большое. А что это за атрибут Вы указали, что он дает?
Константин Кирилюк
2Антон Коробский этот параметр создаёт большие кнопки как у меня, чего нет в конструкторе. Подробней читайте тут.
Антон Коробский
2Константин Кирилюк. Спасибо :)
Platon Fedorovich
Спасибо за статью. Использовал около года Pluso. Теперь всё больше видно, что разработчики забили на сервис.. а жаль! Pluso стало тормозить, а некоторые соц. сети, которые уже не поддерживают функционал расшаривания (Мой Круг, mySpace) или просто закрыты (FriendFeed, например) — до сих пор поддерживаются.

Ну про то, что там до сих пор старые логотипы у LiveJournal, Google Plus, Мой Мир и нет крутых сервисов закладок (типа Pocket) — это вообще молчу :)

В качестве альтернативы, лично я использую вот эти кнопки: http://goodshare.ru/ Дизайн — какой хочешь, скорость работы через CDN — отличная, нет всяких трекингов и сборщиков статистики (как у pluso и подобных), всегда актуальные данные счётчиков (ибо берутся через API самих соц. сетей, а не из БД сайта, как у pluso). Для меня эти фитчи стали решающим факторам, но вообще там много чего ещё есть :)

Короче, советую ознакомиться, если ищите достойную альтернативу.
Отправить комментарий