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

Вчера Toribloger попросил написать пост про то, где искать кнопки ретвита, лайки и виджеты прочих социальных сетей для добавления на свой сайт. В этой статье будут рассмотрены кнопки и виджеты от социальных сетей: Твиттер, Фейсбук, ВКонтакте, Одноклассники, Мейл.ру и РуТвит. Для быстрого перехода к нужному разделу жмите ссылки выше.

Кнопки и виджеты для работы с Твиттером

• Кнопки для фолловинга / Follow buttons

Приятные и узнаваемые кнопки разных размеров и цветов, которые прекрасно впишутся в дизайн большинства блогов. Кликаешь на понравившийся вариант, и получаешь всплывающую подсказку с кодом ссылки для установки. Посмотреть и добавить можно здесь: http://twitter.com/about/resources/buttons.

• Кнопка ретвита постов / Retweet Button

Одну из таких кнопочек вы можете увидеть на этом блоге в конце каждой статьи. Считаю, что официальная кнопка лучше разного рода плагинов и дополнений. При добавлении кнопки нам предлагают выбрать дизайн кнопки, публикуемый текст (заголовок страницы или свой вариант текста), ссылку, на которую твит будет ссылаться (опять же, текущий URL страницы, или кастомный адрес) и язык (для России пока не актуально). Так же можно выбрать аккаунт, который будет упоминаться в публикуемых твитах — удобная штука, помогает привлечь не только трафик на блог, но и фолловеров на твиттер-аккаунт. В общем смотрите сами: http://twitter.com/about/resources/tweetbutton.

• Виджет последних твитов / Profile Twitter Widget

Пример реализации немного доработанного виджета можно увидеть в сайдбаре. Установка такого виджета на блог позволит читателям познакомиться с вами поближе и зафолловить для дальнейшего просмотра анонсов статей. Сам виджет имеет множество настроек как визуальных (высота, ширина, цвета оформления), так и контентных (публикация даты, аватара, хэштегов, тертвитов и т.п.), с которыми лучше разобраться самостоятельно: http://twitter.com/about/resources/widgets/widget_profile.

• Другие виджеты для твиттера /  Other Twitter Widgets

Хоть эти виджеты и не являются популярными, стоит о них все же упомянуть. Это и виджет вывода последних твитов по хэштегу или слову, виджет вывода избранных твитов, виджет вывода твитов из списков и виджет для Фейсбука. Посмотреть эти виджеты подробнее можно здесь: http://twitter.com/about/resources/widgets.

Официальные кнопки и виджеты Фейсбука

• Кнопка «Мне нравится» / Like button

Пример применения можно так же увидеть в конце поста. Если пользователю понравилась статья — он может нажать «Лайк» и поделиться ей с друзьями на Фейсбуке. Присутствие на сайте кнопки «Мне нравится» может дать неплохой заряд трафика при хорошем раскладе. Как видите по картинке выше, существует 3 вида таких кнопок: Стандарт (вывод со списком пользователей), горизонтальная кнопка, и коробочка. Страница кнопки тут: http://developers.facebook.com/docs/reference/plugins/like.

• Виджет «Мне нравится» для Фейсбука / Facebook Like Box

Я не поклонник применения этого виджета на сайтах, но видел его в сайдбаре у многих блогеров, например, на http://blackpig.ru. Возможно, скоро попробую поставить и себе в сайдбар и посмотреть на эффект. Виджет «Мне нравится» позволяет пользователям подписаться на новости блога, публикуемые на официальной странице в Фейсбуке. Имеет 2 цветовые схемы: светлую и темную, соответственно. Можно включить показ анонсов последних новостей. Отображение аватаров подписавшихся пользователей и синюю шапку тоже по желанию можно убрать, либо оставить. Ознакомиться с настройками этого виджета для Фейсбука можно на официальной странице: http://developers.facebook.com/docs/reference/plugins/like-box.

• Другие виджеты Фейсбука / Other Facebook Widgets

Кроме двух вышеупомянутых еще много других виджетов, которые не пользуются популярностью, но кому-то могут быть полезны. Это комментарии, кнопка логина и регистрации, рекомендации, лента активности и другие. Посмотреть список можно вот здесь: http://developers.facebook.com/docs/plugins.

Кнопки и виджеты социальной сети ВКонтакте

• Кнопка «Мне нравится»

Одну из таких кнопочек можно так же увидеть в конце статьи. Как видите, существует 4 варианта внешнего вида кнопки «Мне нравится» от ВКонтакте: кнопка с текстовым счётчиком, кнопка с миниатюрным счётчиком, миниатюрная кнопка и миниатюрная кнопка, счётчик сверху. Немного напрягает, что высота кнопок выделяется по отношению с кнопками Твиттера и Фейсбука, но в целом виджет вполне удобный в использовании. Польза в плане привлечения трафика вебмастерской тематики сомнительна, разве что у вас в друзьях находятся коллеги по цеху. Но я добавил, посетителей не много, но приходят ежедневно. Для добавления виджета нужно не просто добавить код на исходник, но и зарегистрировать id для кнопки своего сайта в API Контакта, правда это не сложно и делается буквально в один клик. Подробнее о том, как использовать кнопку «Мне нравится» на своем сайте, смотрите на официальной странице: http://vkontakte.ru/developers.php?o=-1&p=Like.

• Виджет «Мы ВКонтакте» для сообществ и страниц

Данный виджет по сути представляет собой аналог виджета «Мне нравится» от Фейсбука. Пока писал пост, твердо решил на днях добавить оба этих виджета в сайдбар и посмотреть на их эффективность. Отличие «Мы ВКонтакте» от Фейсбуковского аналога заключается в том, что он не только позволяет подписаться на новости сайта или группы и получать в общем потоке новостей, но и дает возможность подписаться на бесплатную СМС-рассылку новостей сайта. В виджете «Мы ВКонтакте» можно настраивать высоту, ширину и вывод аватаров подписавшихся пользователей. Для более тонкой настройки виджета нужно будет допиливать исходники (на странице есть руководство). Ссылка: http://vkontakte.ru/developers.php?o=-1&p=Groups.

• Кнопка «Сохранить» ВКонтакте

Эта кнопка отличается от «Мне нравится» тем, что при нажатии на нее, статья публикуется у пользователя в «заметках» со ссылкой на источник. Имхо, в большинстве случаев это неудобно для пользователей. Именно поэтому в дальнейшем был создан «Лайк» от ВК. Кнопка имеет 5 видов внешнего оформления и настройки страницы для публикации. Посмотреть можно здесь: http://vkontakte.ru/developers.php?o=-1&p=Share.

• Другие официальные виджеты для сайтов от ВКонтакте

Здесь я снова описал лишь самые популярные виджеты, на самом деле их больше. У ВКонтакте есть еще такие виджеты как: комментарии, пожертвования, опросы, виджет для авторизации и Open API. Ознакомиться с ними всеми можно на официальной странице: http://vkontakte.ru/developers.php?o=-1&p=Сайты.

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

Кнопка для сайта «Класс» от Одноклассники.ру

Одноклассники предлагают только кнопку «Класс» в различных комбинациях, виджетов или чего-то еще у них нет. Есть выбор между тремя видами кнопок: со счетчиком, без счетчика, и маленькая иконка. Очень порадовало, что эти кнопки можно полностью настроить под себя при использовании CSS, т.е. можно вставить свое фоновое изображение в кнопку. Использовать «Класс» нужно на тех сайтах, где аудитория более ориентирована на Одноклассники, нежели на ВКонтакте или Фейсбук. Обычно это более взрослые люди, которые достаточно редко заходят в интернет и тем более не являются продвинутыми пользователями. Страница описания: http://dev.odnoklassniki.ru/wiki/display/plugins/Social+Plugins.

Социальные плагины от «Мой Мир@Mail.Ru»

• Кнопка «Мне нравится»

Функция кнопки по сути такая же, как ВКонтакте или на Фейсбуке. Кнопка имеет ряд настроек: замена текста «Нравится» на синонимы (Рассказать, Поделиться и т.п.), выбор между большой и маленькой кнопками, показ фотографий и текста, ширина их отображения. Мне так и не удалось найти пунтк «Убрать счетчик», но это можно сделать, задав нужную ширину. Документация: http://api.mail.ru/sites/plugins/share/.

• Плагин рекомендаций Mail.Ru

Плагин показывает пользователям сайта те страницы, которые до этого понравились другим пользователям. При выводе популярных статей учитывается «мнение друзей», страницы которые им нравятся имеют больший вес и показываются выше. Естественно, что для работы плагина на сайте должна стоять кнопка «Мне нравится». Такой же плагин есть у Facebook, и настройки тоже мало чем отличаются. Можно менять высоту и ширину плагина, задавать свой заголовок или убирать его вообще, менять все детали цветовой схемы и шрифт. Подробнее: http://api.mail.ru/sites/plugins/recommendations/.

• Плагин «Люди на сайте»

Плагин показывает друзей пользователя и других людей с проекта «Мой Мир», которым нравились какие-либо страницы сайта. Опять же, для функционирования плагина должна быть установлена кнопочка «Мне нравится». Данный плагин — копия виджета «Мне нравится» от Фейсбук и «Мы ВКонтакте». В настройках все схоже с предыдущим: ширина, высота, цвет фона, текста, ссылок, рамки, шрифт. Тоже можно задать свой вариант надписи с заголовке или скрыть совсем. Посмотреть можно вот здесь: http://api.mail.ru/sites/plugins/faces/.

Кнопки и виджеты для сайта от РуТвит.ру

• Кнопка «Опубликовать» в РуТвит

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

• Кнопка «Читать меня»

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

• Кнопки профиля от РуТвита

Тут РуТвит может похвастать хоть каким-то разнообразием. Чтобы получить код кнопки нужно нажать на нее, и он появится во всплывающем окошке. Сами кнопки после установки на сайт будут вести в профиль пользователя социальной сети. Посмотреть все три типа кнопок можно здесь: http://rutvit.ru/tools/buttons.

• Виджет «Мои твиты на сайте»

Аналог твиттеровского виджета. В принципе, возможности такие же: настройки цветовой схемы, размеров окна, количества твитов и вывода определенных категорий твитов. Подробнее тут: http://rutvit.ru/tools/widgets.

• Другие виджеты и плюшки от социальной сети РуТвит

В РуТвите, кроме вышеперечисленных, есть еще несколько виджетов: Окно отправки твитов прямо с сайта, «Прямой эфир» — своего рода чат, приложения для мобильного, плагин для WordPress и дополнение к браузерам. Единой страницы со всеми виджетами у РуТвита нет (идиотизм, не правда ли?), поэтому кликайте на ссылку в предыдущем абзаце и смотрите виджеты в правом меню.

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

Upd: попробовал добавить виджеты в сайдбар и тут же убрал. Причины: на личном блоге — это лишнее, и немного портит дизайн.