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

Второе десятилетие 2000-ых годов можно смело назвать бумом социальных сетей. Соц. сети буквально ворвались в нашу жизнь и стали неотъемлемой частью. Просыпаясь мы первым делом, нераскрывшимся глазом, начинаем смотреть ленту новостей. Каждый человек имеет свое предпочтение той или иной сети, но максимально известные и популярные — это Facebook и Twitter. В странах СНГ на первом месте стоит ВКонтакте, затем идет Facebook, Одноклассники, Twitter и Instagram.

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

Первый вид. Социальные иконки

Самый простой и легкий способ объединить ваш сайт и ваши социальные группы.

TheChive — развлечение

Новостной сайт BBC Россия.

Авито — бесплатные объявления

Target — интернет-магазин

Forbes — журнал

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

Простой пример такого метода:

Выглядит это так:

Не совсем красиво, но с помощью манипуляций с CSS или нормальной верстки HTML вы можете сделать с ними все что угодно.

Второй вид. Социальные кнопки

Социальные кнопки отличаются от иконок, тем, что этот способ предоставляют сами социальные сети и дают некоторое преимущество над обычными иконками.

Dailymail — новости

CNN — новости

BuzzFeed — журнал

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

Facebook Like Button

Чтобы сделать кнопку для FB нажмите на ссылку — Кнопка Like от Facebook

URL to Like — введите ссылку вашей страницы

Width — размер по ширине в пикселях

Layout — вид кнопки:

• Стандартная
• Box_count
• Button_count
• Button

Action Type:

Также можно выбрать «Показывать аватарки друзей» Или «Добавить кнопку Шаринга».

После настройки кнопки получаем код и устанавливаем его на сайт.

Есть четыре метода размещения кода:

В итоге получается

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

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

ВКонтакте есть кнопка «Мне нравится», которую можно установить на любой странице вашего сайта. Кнопка «Мне нравится» позволяет Вашим посетителям одним кликом выразить своё отношение к статье или моментально поделиться ссылкой на статью с друзьями.

Чтобы получить кнопку пройдите по ссылке

Инструкция на картинке

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

Виджет «Подписаться на автора»

Просто вместо ID человека, прописываем URL нашей группы, и виджет автоматически подписывает к сообществу с одного клика.

Twitter Follow Button

Кнопка Follow дает нам возможность подписаться на аккаунт твиттера в один клик.

Чтобы получить кнопку пройдите по ссылке.

Выбираем кнопку «Follow». Добавляем логин своего аккаунта в твиттер, выбираем настройки, которые нам нужны и вставляем полученный код на страницу сайта.

Вот код кнопки для журнала Forbes.

Читать @Forbes
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

А вот так она выглядит на сайте:

Читать @Forbes

Одноклассники Кнопка «Класс»

Чтобы получить кнопку «Класс» на свой сайт, перейдите по ссылке

Бесполезная кнопка для сайтов, если конечно ваша аудитория не сидит на Одноклассниках. Не дает вступить в вашу группу в один клик. Просто кнопка Класс с функцией «Поделится».

Google+ Follow Button

Для получения кода кнопки от Google+ пройдите по ссылке.

Полезная кнопка, в один клик человек подписывается на вашу страницу в Google+.

Instagram Follow Button

Чтобы получить кнопку Follow на свой аккаунт Instagram пройдите по ссылке и нажмите на «Follow Me Button».

 

Вместо __USER__NAME__HERE__ введите свой логин инстаграма и добавьте код себе на сайте. Пользователи смогут в один клик присоединится к вашему аккаунту. Полезная кнопка для тех сайтов, которые используют аккаунт в Instagram.

Pinterest Follow Button

Чтобы получить код кнопки Pinterest Follow пройдите по ссылке

 

Просто указываем URL нашего профиля в Pinterest и получаем код кнопки для подписки на аккаунт.

С социальными кнопками мы закончили.  Они быстро помогут собрать лояльную аудиторию с сайта в ваши социальные группы.

Третий вид. Социальные виджеты групп

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

IMDB — самая большая база фильмов в мире. («Кинопоиск» — русскоязычный аналог)

А этот сайт использует сразу два типа — иконки и виджеты.

Facebook Like Box

Чтобы создать виджет от Фейсбука перейдите по ссылке

Вводим URL своей страницы, выбираем настройки и получаем код.

Виджет для сообществ ВКонтакте

Код от виджета ВКонтакте можно получить перейдя по ссылке

 

Все очень наглядно и просто. После настройки виджета, вы копируете код себе на страницу.

Виджет ленты пользователя Twitter

Чтобы получить код ленты новостей пользователя в Твиттере перейдите по ссылке

 

Просто введите ник пользователя в Twitter и вы получите код его ленты.

Социальный виджет Одноклассники

Чтобы получить код социального виджета от социальной сети Одноклассники перейдите по ссылке

Введите ID группы Одноклассников и вы получите код для вставки на сайт.

Значок Google+

Чтобы получить код значка Google+ перейдите по ссылке

 

Значок практически не отличается от кнопки. В виджете значка доступно оформление фона страницы.

Размещать кнопки, иконки или виджеты вы можете где угодно на сайте, главное, в доступных местах. Вы можете экспериментировать — ставить сразу несколько видов, менять расположение кнопок, использовать дополнительные скрипты и уловки. Но про это, в следующих статьях блога.

Спасибо, с вами был, ленивый Staurus.