Главная / SMM / Социализируем сайт самостоятельно

Социализируем сайт самостоятельно

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

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

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

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

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

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

Is it bikini season yet theCHIVE - Google Chrome

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

Главная страница - BBC Russian - Google Chrome

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

Доска бесплатных объявлений от частных лиц и компаний в Москве на Avito - Google Chrome

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

Target Free Shipping on Every Order - Google Chrome

Forbes — журнал

Information for the Worlds Business Leaders - Forbes.com - Google Chrome

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

иконки соц сетей - Поиск в Google - Google Chrome

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

<a href="https://www.facebook.com/ВашаСтраница" target="_blank" title="Мы на Facebook"><img src="путь к иконке Фейсбука" alt="Иконка Facebook" /></a>
<a href="https://vk.com/ВашаГруппа " target="_blank" title="Мы ВКонтакте"><img src="Путь к иконке ВКонтакте" alt="Иконка ВКонтакте" /></a>
<a href="https://twitter.com/ВашаАккаунт " target="_blank" title="Мы в Twitter"><img src="Путь к иконке Twitter" alt="Иконка Twitter" /></a>

 

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



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

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

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

Dailymail — новости

Home Daily Mail Online - Google Chrome

CNN — новости

CNN.com International - Breaking, World, Business, Sports, Entertainment and Video News - Google Chrome

BuzzFeed — журнал

BuzzFeed - Google Chrome

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

Facebook Like Button

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

Facebook Like Button - Google Chrome

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

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

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

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

Action Type:

  • Like
  • Recomendation

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

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

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

  • HTML5
  • XFBML
  • IFRAME
  • URL

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

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

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

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

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

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

Виджет Мне нравится Разработчикам - Google Chrome

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

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

Виджет «Подписаться на автора» Разработчикам - Google Chrome

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

Twitter Follow Button

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

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

Twitter Buttons About - Google Chrome

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

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

<a href="https://twitter.com/Forbes" class="twitter-follow-button" data-show-count="false" data-lang="ru">Читать @Forbes</a>
<script>!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');</script>

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

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

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

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

Google+ Follow Button

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

Google+ Follow Button - Google+ Platform — Google Developers - Google Chrome

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

Instagram Follow Button

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

Instagram Widgets and TOOLS Websta (Webstagram) - Google Chrome

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

Pinterest Follow Button

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

Widget Builder Pinterest for Business - Google Chrome

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

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

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

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

IMDB — самая большая база фильмов в мире. («Кинопоиск» — русскоязычный аналог)
IMDb - Movies, TV and Celebrities - IMDb - Google Chrome

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

Sexy Hot Bikini Models, Beautiful Girls, Sexy Bikini Babes at Lowrider Girls - Google Chrome

Facebook Like Box

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

Facebook Like Box - Google Chrome

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

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

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

Виджет для сообществ Разработчикам - Google Chrome

 

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

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

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

Конфигуратор виджетов - Google Chrome

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

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

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

Социальные виджеты - api - Confluence - Google ChromeВведите ID группы Одноклассников и вы получите код для вставки на сайт.

Значок Google+

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

Значок Google+ - Google+ Platform — Google Developers - Google Chrome

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

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

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

3 комментария

  1. доступно и подробно 😉

  2. Хорошая статья! Заходите в гости

  3. Статья — супер! Люблю, когда материал преподносят с
    примерами и иллюстрациями, сразу все становится предельно доходчиво. Мне еще в
    этом плане нравятся статьи здесь — http://socialair.ru, тоже по пунктикам расписаны
    многие smm кейсы.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *