Главное меню

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

  • Обновлено:
    2016-02-22
  • Просмотров:
    4328
  • Отзывов:
    3
  • Рейтинг: 4.6
uSocial - современный конструктор социальных кнопок "Поделиться" и "Мне нравится" для сайта. Стильный внешний вид, популярные социальные сети, мобильная версия, масса гибких настроек, чистый код и подробная статистика!

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

Кнопки соцсетей – неотъемлемая составляющая поискового продвижения и комфорта пребывания посетителей на сайте. Благодаря им можно делиться интересными публикациями или сохранять что-либо для дальнейшего ознакомления. Или просто лайкнуть, просигнализировав владельцам о полезном материале. 

Сегодня мы хотели бы поговорить о специализированном сервисе по созданию/размещению соцкнопок от создателей uCoz – uSocial. Универсальном конструкторе социальных кнопок для вашего сайта.

Особенности uSocial

Сервис позволяет создавать наборы кнопок двух типов: «Поделиться» и «Нравится». Среди преимуществ его использования отметим следующие моменты:

  1. Удобство и простота конструктора. Даже далёкий от всех этих вещей человек сможет без проблем воспользоваться им.
  2. Аккуратный и современный дизайн, который легко настраивается. Кнопки отлично впишутся в любой интерьер сайта.
  3. Все наиболее важные социальные сети включены в комплект поставки. Список сервисов будет расширятся.
  4. Наличие мобильной версии кнопок.
  5. Просмотр подробной статистики, что очень полезно для анализа продуктивности и продвижения.

Как видите, помимо приятной внешности кнопки uSocial носят глубокий прикладной характер, являясь довольно мощным инструментом для продвижения любых проектов.

Инструкция как установить кнопки соцсетей на сайт

Для размещения социальных кнопочек на своём сайте необходимо выполнить несколько простых шагов:

Шаг-1. На сайте сервиса и выбираем, какой тип кнопок будем создавать.

Шаг-2. Собираем набор социальных кнопок. Можно выбрать отображаемые сервисы и настроить внешний вид: положение, размер кнопок, форму, стиль, включить отдельные счётчики для каждой кнопки и добавить суммарный счётчик «Поделиться». Здесь же можно задать название для текущего набора и перейти к предпросмотру.

Шаг-3. После завершения всех операций вводим адрес своего сайта и жмём на кнопку «Получить код». Необходимо будет авторизоваться через любую соцсеть.

Шаг-4. Копируем код скрипта в появившемся окне. Вставлять код нужно на те страницы вашего ресурса, где необходима панель социальных кнопок. Например, в футер перед закрывающим тегом </body>.

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

В личном кабинете uSocial будут храниться все созданные наборы и статистика для сайтов, к которым они были прикреплены. В любое время можно переключаться между сайтами и анализировать полученные со счётчиков данные.

Как увеличить КПД соцбара?

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

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

При корректном заполнении социальных мета-тегов записи будут правильно восприниматься социальными сервисами, ибо в них указан тип материала, релевантный заголовок, ссылка на нужную картинку. Всё это повышает эффективность от репостинга: ваш материал корректно проиндексируется социальными сервисами.
 
Примеры кода микроразметки для популярных социальных сетей (код нужно прописывать перед тегом </head>):

1. Facebook и Вконтакте используют Open Graph protocol: 

<meta property="og:title" content="Название страницы"/> 
<meta property="og:description" content="Описание"/> 
<meta property="og:image" content="http://www.site.com/logo.png" />
<meta property="og:url" content="http://www.site.com"/> 
<meta property="og:site_name" content="Название сайта"/>

3. Для Twitter код выглядит так:

<meta name="twitter:site" content="Название сайта"/> 
<meta name="twitter:title" content="Название страницы"> 
<meta name="twitter:description" content="Описание"/> 

4. Для Google+ так:

<link rel="author" href="https://plus.google.com/Blogger777/"> - cсылка на профиль автора в Google+
<link rel="publisher" href="https://plus.google.com/+ScotchIo/"> - название сайта
<meta itemprop="name" content="Блог о разведении слоников"> - текст сниппета (до 40 символов)
<meta itemprop="description" content="Описание сайта"> - описание сайта
<meta itemprop="image" content="http://site.ru/pic/img.jpg"> - путь к файлу изображения

Инструменты для работы с микроразметкой:

1. Open Graph Object Debugger — сервис проверки микроразметки и очистки кэша урла для Facebook.
2. Очистка кэша страниц для Вконтакте.
3. Валидатор микроразметки Twitter Cards.

Как видите, процесс добавления микроразметки под социалки технически несложен, но требует внимательности.

Выводы

uSocial – простой и эффективный способ установить на ваш сайт красивые кнопки социальных сетей. Процесс создания виджета занимает не более 10 минут. Результат получается весьма приятным, а главное – функциональным. Вы сможете просматривать подробную статистику и оптимизировать сайт в соответствии с полученной информацией. Кроме того, соцбар качественно собран: код чистый, легковесный. Никаких лагов или сбоев – панель работает как часы. А что ещё нужно от подобного сервиса? Рекомендуем ознакомиться.

  • Автор: Дмитрий Луценко

avatar

Комментариев:3

Аватар admin-nevyansk
3 uid Никита Андреевич • 12:06, 2016-03-12
Спасибо!
нет аватара
2 ya Naz Bayr • 12:30, 2016-02-27
Спасибо за полезную статью. Скажите, если пропишу вышесказанное на страницы с материалом то как быть с этими?

<?if($SOCIAL_IMAGE_SRC$)?>
<link rel="image_src" href="$SOCIAL_IMAGE_SRC$" />
<?endif?>
<meta name="title" content="$ENTRY_TITLE$" />
<meta name="description" content="$SOCIAL_DESCRIPTION$" />
Аватар admin-nevyansk
1 uid Никита Андреевич • 14:20, 2016-02-26
Сейчас стоит яндекс-поделиться такой:


т.е. при наличии картинки $IMG_SMALL_URL1$
именно она встает в репост.

Как повторить подобное в текущем коде?
uGuide.ru: Добавьте микроразметку между <head></head>, как указано в посте.

Код конкретно для изображения:

<meta property="og:image" content="<?if($IMG_SMALL_URL1$)?>$IMG_SMALL_URL1$<?else?>http://www.nevyansk.org.ru/tofr/logo.jpg<?endif?>" />

<meta itemprop="image" content="<?if($IMG_SMALL_URL1$)?>$IMG_SMALL_URL1$<?else?>http://www.nevyansk.org.ru/tofr/logo.jpg<?endif?>">