Авторизация:
Имя:

Пароль:

Поиск по сайту:

Поделиться:

Подписка на новости

Введите Ваш email:


Разделы:

рейтинг статьи: 5/5; голосов: 4; комментариев: 1

Главная > Создание сайта > Как добавить кнопки социальных сетей на сайт. Что это такое и зачем они нужны

31.12.2016

Как добавить кнопки социальных сетей на сайт. Что это такое и зачем они нужны

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

 

как добавить кнопки социальных сетей на сайт

 

Что такое социальные кнопки и зачем они нужны

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

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

Не стоит забывать, что социальные сети очень любят поисковые системы. Чем больше будет ссылок на страницу вашего сайта в аккаунтах Twitter, G+ и Facebook, тем выше она будет ранжироваться в поисковой выдаче. Потому что поисковики учитывают социальные сигналы, а расшаривание при помощи кнопок социальных сетей входит в список таких сигналов.

Кнопки социальных сетей Яндекс – это целый блок кнопок, в который входят кнопки всех популярных социалок. Этот блок позволяет посетителю быстро расшарить страницу вашего сайта. Ему достаточно просто нажать на кнопку интересующей его соцсети и ссылка на ваш материал улетит всем его подписчикам и друзьям. При этом никаких более действий сто стороны пользователя не требуется, блок Яндекса сам автоматически заполнит все нужные поля для отправки (url страницы, подпись, описание, картинку).

К оглавлению

 

Блок социальных кнопок от Яндекс – «Поделиться»

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

Каждая социальная сеть дает возможность размещать собственные кнопки (об этом поговорим ниже), но собрать воедино кнопки почти всех соцсетей и предоставить качественный код это под силу не каждому сервису. Впереди планеты все оказался поисковый гигант Яндекс. Именно он смог собрать в один блок кнопки всех соцсетей и предоставить пользователям качественный код, который не заразит ваш сайт вирусом и не замедлит его загрузку. Блок «Поделиться» (именно так назвал свой блок социальных кнопок Яндекс) смог избавить вебмастеров от необходимости размещать код кнопки каждой популярной соцсети.

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

Кнопки социальных сетей Яндекса – это гибкая, легко настраиваемая система. Пользователь может настроить внешний вид кнопок так, как считает нужным. Большая палитра цветов и множество вариантов отображения кнопок позволяет им гармонично вписаться в любой дизайн сайта. На кнопках самых популярных социальных сетей можно отображать количество расшариваний страницы, лайки и так далее.

блок социальных кнопок от Яндекса

Еще одним неоспоримым плюсом социальных кнопок от Яндекс является то, что можно просматривать статистику в Яндекс.Метрике, если вы зарегистрированы в этом сервисе и у вас установлен счетчик. Это дает возможность для анализа социальной активности ваших посетителей.

отслеживание статистики блока Поделиться в Яндекс.Метрике

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

К оглавлению

 

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

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

конструктор блока Поделиться

Справой стороны находится готовый код кнопок для вставки на ваш сайт. Чуть выше кода находится пример внешнего вида блока «Поделиться». На этой странице можно настроить внешний вид кнопок блока.

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

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

Как видите, не все социальные сети передают счетчик расшариваний в API Яндекс. В левой стороне представлен небольшой список соцсетей, работающий с блоком Яндекса.

настройка кнопок и меню блока Поделиться

Во вкладке «Иконки и меню» можно настроить блок «Поделиться» так, что будет отображаться минимум иконок соцсетей, а остальные иконки будут спрятаны в выпадающем меню.

Количество отображаемых иконок можно настроить в коде блока, а именно здесь:

настройка количества иконок в блоке Поделиться от Яндекс

Цифра «3» отвечает за количество иконок, которое будет отображаться в блоке Яндекс, остальные иконки будут скрыты в POP-UP меню.

Вкладка «Маленького размера» отвечает за размер иконок. В частности, иконки в блоке «Поделиться» будут маленького размера.

Настроив внешний вид блока нужно просто скопировать готовый код и добавить его в код вашей страницы в нужном вам месте. Причем не имеет значение, где и какую часть кода нужно вставлять. Первые две строчки кода для вставки кнопок отвечают за подключение скрипта кнопок с сервера Яндекс. Поэтому вы можете их размещать вначале HTML теста страницы между тэгами <head>…</head>. Третья строчка кода – это непосредственно отображение блока кнопок. Но, если вы не хотите заморачиваться с поиском тэгов <head>, то просто скопируйте код кнопок и добавьте его целиком в нужном месте на вашем сайте, и он будет работать.

Таким образом, настраивается внешний вид и содержание блока кнопок социальных сетей от Яндекса «Поделиться». Но это только общие настройки. Для более тонкой настройки блока стоит почитать документацию по API Яндекса (https://tech.yandex.ru/share/doc/dg/add-docpage/), а именно, про используемые в блоке атрибуты и их параметры. Так вы сможете более точно настроить внешний вид и функционал блока «Поделиться».

К оглавлению

 

Как добавить официальные кнопки соцсетей

Рассмотрев универсальный блок кнопок социалок от Яндекс, давайте рассмотрим, а что нам предлагают сами социальные сети установить на сайте в качестве своих кнопок. Хочется сразу заметить, что функционал официальных кнопок немного выше. Например, Вконтакте предлагает не просто кнопку разного размера и со счетчиком, но и без счетчика, ссылку, ссылку без иконки соцсети, просто иконку и так далее. То есть, визуализация таких кнопок будет выше. Давайте разберем, как добавить официальные кнопки социальных сетей на свой сайт.

 

Социальная сеть Вконтакте

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

социальная сеть ВКонтакте для разработчиков

Переходим по этой ссылке и попадаем на страницу инструментов разработчиков. На ней нас интересует раздел «Публикация ссылок».

приложение сообществ ВКонтакте

Переходим в этот раздел. В этом разделе представлен сервис по настройке функционала и внешнего вида кнопки, генерация кода кнопки Вконтакте. Давайте рассмотрим подробнее.

настройка кнопки социальной сети ВКонтакте

  1. Опция «Стиль». Предлагает выбрать стилистику вашей кнопки. А именно, как кнопка должна выглядеть (со счетчиком или без него, в виде ссылки или виде иконки и т.д.)
  2. В поле «Текст» пишем текст, который будет отображаться в самой кнопке
  3. «Ссылка» - отвечает за то, какую страницу будет расшаривать кнопка. То есть, нажав на кнопку, будет расшариваться именно страница с кнопкой или другая страница, где не установлена эта кнопка. Если другая страница, то нужно указать URL этой странице в поле «Ссылка»
  4. Ниже представлен готовый код для добавления кнопки социальной сети Вконтакте на ваш сайт
  5. Ниже кода показан пример вашей кнопки. Благодаря нему вы визуально видите, как меняется ваша кнопка при изменении тех или иных настроек

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

Код кнопки состоит из двух частей. Поэтому его нужно вставлять по отдельности.

как добавлять код кнопки ВКонтакте на сайт

Первую часть кода нужно вставлять между тэгами <head>…</head>. Вторую часть кода добавляем в том месте сайта, где вы бы хотели видеть сами кнопки социальной сети Вконтакте.

К оглавлению

 

Социальные кнопки Facebook

Чтобы добавить кнопки Facebook нужно авторизоваться в этой социальной сети и на главной странице посмотреть в нижний правый угол. В самом низу находим «Еще» и в выпадающем окне выбираем «Разработчикам».

ссылка на страницу создания кнопок в Facebook

Перейдя на страницу для разработчиков, нажимаем ссылку «Продукты»

Продукты социальных плагинов от Facebook

На следующей странице вам будут доступны все продукты, которые предлагает Facebook. Но нас интересуют социальные плагины.

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

Социальные сигналы Facebook

Далее мы попадаем на страницу описания социальных кнопок Facebook. Нажимаем на ссылку «Подробнее» внизу описания кнопки «Нравится».

описание социальных кнопок Facebook

И вот мы попали на страницу выбора и настройки социальных кнопок, которые нам предлагает Фейсбук. Как можно увидеть на скриншоте снизу, эта социальная сеть предлагает большой выбор социальных плагинов для установки их на сайте. Все они представлены в левом столбце. Рассмотрим настройку и получение кода кнопки «Нравится».

настройка кнопки Нравится в Facebook

В конфигураторе заполняем поля:

  1. Url адрес – это адрес вашей странице, на которой вы хотите разместить кнопку «Нравится»
  2. Композиция – настройка внешнего вида
  3. Размер кнопки – маленькая кнопка или большая
  4. Width – ширина кнопки. Это нужно, если стандартные размеры кнопок вас не устраивает или они не помещаются в нужном вам месте на сайте
  5. Тип действия – «Нравится» или «Рекомендовать», вы выбираете, что должна делать кнопка

Ниже формы настройки показывается внешний вид кнопки, то есть, во время настройки вы визуально видите, как меняется внешний вид – это очень удобно.

Стоит заметить, что если в поле Адреса странице не указать URL, то расшариваться дутее именно та страница, на которой расположен код кнопки.

Настроив основные элементы, нажимаем «Получить код». Код, также как и в случае с Вконтакте состоит из двух частей. Первую часть нужно установить в начале кода HTML вашей страницы после тэга <body>, а вторую часть устанавливаете там, где вам нужно.

К оглавлению

 

Кнопка Твитнуть

Не забудем и про социальную сеть Twitter. Как добавить твиттер кнопку был посвящен целый обзор, поэтому вдаваться в подробности не буду. Пройдемся по этой кнопке вкратце.

настройка кнопки в Twitter

Выбрав нужную вам социальную кнопку, перед вами откроется форма настройки ее. Заполнив поля этой формы, система сразу вам сформирует код для вставки на свой сайт. Как видно чтобы добавить социальную кнопку Twitter не нужно делать много манипуляций, все очень просто и быстро.

К оглавлению

 

Кнопка Google+

Чтобы добавить на свой сайт кнопку G+ нужно перейти на страницу настройки кнопки Google +1. Перед вами откроется форма настройки кнопки Google.

настройка кнопки Поделиться в Google+

Заполнив поля, копируем код и вставляем его в ваш сайт. Здесь принцип кода такой же, первую часть вставляем в начало код HTML вашей страницы, вторую – там, где вы хотите видеть социальную кнопку от Гугл.

К оглавлению

 

Сторонние ресурсы для получения кнопок социальных сетей

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

Конструктор кнопок соцсетей Share42. Он предоставляет возможность настройки обычного блока кнопок и вертикальных всплывающих панелей. Настройка очень проста и быстра, не вызывает сложностей у пользователей.

Сервис UpToLike share buttons. Этот сервис пытается работать по принципу Яндекса. То есть, дает возможность пользователям, которые установили код блока кнопок соцсетей на своем сайте, просматривать статистику нажатий на кнопки блока. Так же в код сервиса встроенная возможность цитировать в социальных сетях понравившееся тексты и стать подписчиком после расшаривания страницы. Настройка блока кнопок также не должна вызвать затруднений.

Можно также воспользоваться плагинами для популярных CMS (wordpress, joomla и тд).

К оглавлению

 

Вывод

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

Каждый из сервисов имеет свои недостатки и достоинства. На мой взгляд, самым оптимальным сервисов является Яндекс со своим блоком «Поделиться».

Вот несколько положительных моментов в пользу этого блока:

  1. Блок кнопок от поискового гиганта Яндекс (блок будет всегда работать, не зависимо от нагрузок на серверы компании, в отличие от сторонних онлайн-сервисов)
  2. Большой выбор социальных сетей для добавления в блок
  3. Большие возможности настройки блока, как внешнего вида, так и функционала

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

Если вы пользуетесь другими сервисами социальных кнопок, прошу вас, пишите в комментариях, всем будет интересно знать альтернативные сервисы размещения социальных плагинов (кнопок).

1274

Оцените статью:

1 2 3 4 5
рейтинг: 5/5; голосов: 4

Зарегистрируйтесьили войдите под своим именем чтобы оставить комментарий
miha2010
2017-01-10 22:28 #1

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