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

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

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

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

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

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

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

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

Is it bikini season yet theCHIVE Google Chrome - Социализируем сайт самостоятельно

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

Glavnaya stranitsa BBC Russian Google Chrome - Социализируем сайт самостоятельно

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

Doska besplatnyih ob'yavleniy ot chastnyih lits i kompaniy v Moskve na 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 кодом ваш сайт.

ikonki sots setey Poisk v 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>

 

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

vk icon - Социализируем сайт самостоятельно
face icon - Социализируем сайт самостоятельно
twitter icon - Социализируем сайт самостоятельно

Не совсем красиво, но с помощью манипуляций с 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

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

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

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

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

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

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

Vidzhet Mne nravitsya Razrabotchikam Google Chrome1 - Социализируем сайт самостоятельно

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

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

Vidzhet   Podpisatsya na avtora   Razrabotchikam 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>

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

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

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

Novaya knopka   Klass   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 своей страницы, выбираем настройки и получаем код.

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

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

Vidzhet dlya soobshhestv Razrabotchikam Google Chrome - Социализируем сайт самостоятельно

 

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

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

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

Konfigurator vidzhetov Google Chrome - Социализируем сайт самостоятельно

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

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

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

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

Значок Google+

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

Znachok Google  Google  Platform     Google Developers Google Chrome - Социализируем сайт самостоятельно

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

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

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

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

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

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

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

  4. «Метод до безобразия простой » для тех, кто в этом Асс! Они не будут искать подобные статьи в интернете. Ищут те, кто не совсем хорошо разбирается в вопросе. Поэтому, статья ни о чем. Называется, возьмите и сделайте, а как, это ваши проблемы!

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.