Кнопки социальных сетей в блоке «Поделиться» от Яндекса

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

Яндекс Поделиться

Чем он выгодно отличается от других подобных ему скриптов или плагинов? Во-первых, здесь представлены социальные сети, ориентированные в первую очередь на русскоязычных пользователей — это Вконтакте, Одноклассники, Мой Мир. А во-вторых, блок «Поделиться» создан крупной и широко известной компанией Яндекс, которая не допустит внедрение вредоносного кода, что иногда себе позволяют недобросовестные разработчики.

Иногда мне приходилось задумываться: зачем в конце каждой статьи размещать кнопки социальных сетей? Быть может на самом деле они не приносят никакой пользы, а их значение при этом сильно преувеличено? Давайте разберёмся!

Предназначение кнопок социальных сетей на сайте

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

Поделиться в соцсетях

Но этим преимущества не ограничиваются:

  • Если посетители активно нажимают на кнопки поделиться — это хороший социальный сигнал для сайта, значит размещённый на нём материал нравится пользователям и они готовы рекомендовать его своим друзьям.
  • Ускоряется индексация новых страниц сайта роботами поисковых систем, для большего эффекта я рекомендую использовать хэштеги.
  • Наблюдается рост трафика из социальных сетей. Как правило, пользователи соцсетей заводят знакомства по интересам, а значит трафик является целевым. Вам же нужны новые клиенты или подписчики?
  • Увеличение количества обратных ссылок неплохо скажется на ранжировании сайта, даже если они закрыты от индексации, то всё равно вносят свой вклад в продвижение, как минимум улучшая поведенческие факторы.
Статистику кликов по кнопкам можно отслеживать в Яндекс Метрике, она доступна в стандартном отчёте Содержание — Кнопка «Поделиться».

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

Настройка и установка блока «Поделиться»

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

На момент составления обзора на выбор представлено более 20 сервисов, для рунета наиболее известными являются Яндекс.Коллекции, Вконтакте, Facebook, Одноклассники, Мой Мир, Pinterest, Twitter, Blogger, Livejournal, Viber, WhatsApp, Skype, Telegram. С полным списком вы можете ознакомиться на официальном сайте.

Внешний вид блока настраивается и представлен в трёх вариантах:

  • Только иконки — выбранные вами иконки и ничего лишнего:
  • Иконки и меню — в зоне видимости только три иконки, остальные скрыты под кнопкой с выпадающим списком:
  • Маленького размера — то же самое, что в первом варианте, только иконки меньшего размера:

После настройки внешнего вида на этой же странице вы получите код скрипта, который необходимо скопировать и вставить в шаблоне сайта, например, в конце статьи. Чтобы загружать скрипт асинхронно и не блокировать загрузку страницы, укажите атрибут async="async" изменив код таким образом:

<script src="https://yastatic.net/share2/share.js" async="async"></script>

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

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(5 голосов, в среднем: 3.4 из 5)
  1. Ольга

    С подозрением отношусь к кнопочкам от Яндекса… большей частью из-за того, что их подредактировать нельзя. По этой же причине отказалась и от сервиса ОднаКнопка, который используется на этом сайте. И пришла к новому сервису dimox-а (share42.com), где можно редактировать иконки и наличествует довольно «прозрачный» javascript. Ну вот люблю я все дотошно контролировать.

    А вообще соцкнопки приносят ощутимую пользу, по крайней мере, хочется в это верить. Сама, шаря по другим сайтам, часто сохраняю особенно понравившееся в соцзакладках.

    Ответить

  2. Webliberty

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

    Ответить

  3. Ольга

    Webliberty, что, собственно, я и делаю с большинством не устраивающих меня скриптов 😉 Именно таким путем у меня в дневнике сделан вывод последнего твита в шапке. Другое дело, что иногда смысла нет тратить время на это, проще найти другой способ решения)

    Ответить

  4. Павел

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

    Ответить

  5. Виктор Камень

    На мой взгляд лучшее решение предлагает сервис Addthis.com хотя бы тем что каждую неделю приходит отчет с тем сколько человек отправило страницы в соцсети и сколько вернулось обратно

    Ответить

  6. Webliberty

    Виктор Камень, а русскоязычные закладки в нем присутствуют? Кстати, отчеты по кнопке Поделиться от Яндекса можно получить в Метрике.

    Ответить

  7. Ziganochka

    Не работает! Пустое поле вместо кнопок! 🙁

    Ответить

  8. Webliberty

    Ziganochka, а правильно вставили код социальных кнопок? Проверьте все еще раз, если ситуация не изменится — попробуйте вставить код в другое место, попереставляйте его в шаблоне, а уж если и это не поможет — обращайтесь в Яндекс — это их инструмент)

    Ответить

  9. Людмила

    Скажите, а как можно поставить на сайт такие кнопки соцсетей, чтобы рядом с кнопкой указывалось количество поделившихся? У Вас такие кнопки или нет?

    Ответить

  10. Webliberty

    Людмила, нет, у меня не такие. Если хотите со счетчиками, то вставляйте код кнопок вручную, получая его на самих сервисах.

    Ответить

  11. ольга

    Не знаю как кому, а мне лично нравятся кнопки соц.сетей от Яндекса. Так он будет лояльнее относиться к моему сайту. Больше доверия будет

    Ответить

  12. alexisakov

    Внешние конструкторы кнопок конечно удобны, вот только здорово тормозят загрузку страницы.
    Я раньше использовал кнопки от PLUSO, но после того как проверил скорость загрузки сайта и увидел что они грузятся более одной секунды!! решил что это уж слишком.
    Считаю лучший вариант — вручную добавить код кнопок в шаблон сайта.

    Ответить

  13. Webliberty

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

    alexisakov, соглашусь, но частично. Если добавлять вручную, то код страницы от этого не уменьшится, скорее наоборот. Рекомендую попробовать скрипт Share42 — сам им уже давно пользуюсь, нареканий нет.

    Ответить

  14. Radistka Kat

    Жалко, что нет возможности поставить вертикальный блок кнопок на сайт. Ведь не всегда в дизайн сайта «впишется» горизонтальный вид. С их возможностями Яша мог бы и придумать что-то поразнообразней…

    Ответить

  15. Webliberty

    Radistka Kat, да и с размерами кнопок им бы не помешало поэкспериментировать, предложить несколько вариантов на выбор. Полностью поддерживаю.

    Ответить

  16. Георгий

    Здравствуйте, вписал в код шаблона «Блок социальных кнопок от Яндекса» на сайт, но столкнулся с одной неприятностью — размером кнопок, подскажите как увеличить размер иконок социальных сетей?

    Ответить

  17. Webliberty

    Здравствуйте, за размер иконок отвечает атрибут data-size который может принимать два значения:

    • m — большие
    • s — маленькие

    Простой пример: data-size="m"

    Ответить

:) ;) :D :( :cry: :| :o :P 8-) :oops: :roll: :idea:

Отправляя комментарий, вы соглашаетесь с политикой конфиденциальности.