ШаблоныТарифыПартнерамНовостиБлогПомощьПосмотреть сайты

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

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

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

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

подключение соцсетей

Блок «Поделиться» позволит пользователям вашего сайта в один клик поделиться контентом сайта в социальных сетях

Далее зайдите на свой сайт в режиме редактирования Edit-in-Place (F2) и кликните на текстовое поле, где вы хотите разместить виджет. Появится визуальный редактор, выберите в нем «Исходный код». Вставьте код в поле исходного кода. Нажмите «ОК», сохраните изменения на странице, после чего на вашем сайте появится виджет.

соцсети

Блок с вкладками значительно сэкономит место на странице вашего сайта

 

***

Виджет группы ВКонтакте

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

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

ВК

Скопируйте сформированный код для вставки, вставьте его в поле исходного кода на вашем сайте и сохраните изменения на странице

виджет ВК

Дополнительным стимулом для вступления в группу служит отображение друзей в виджете, которые уже вступили в сообщество

 

***

Виджет комментариев ВКонтакте

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

комментарии ВК

Скопируйте код и вставьте на свой сайт в поле «Исходный код»

коменты ВК

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

 

***

Виджет сообщества Facebook

Чтобы получить код вставки виджета сообщества Facebook, перейдите на страницу разработчика. Здесь вам нужно заполнить форму с настройками виджета:

  • Facebook Page URL — url адрес вашего сообщества
  • Width и Height — ширина и высота виджета соответственно
  • Color Scheme — темная или светлая цветовая схема для виджета
  • Show Friends’ Faces — показывать участников сообщества
  • Show Posts — показывать последние публикации
  • Show Header — показывать надпись «Найдите нас на Facebook»
  • Show Border — показывать рамку

сообщество ФБ

После настроек нажмите кнопку Get Code (получить код)

код ФБ

Вставьте код на свой сайт

Соо ФБ

Виджет сообщества Facebook одновременно повышает доверие к вашей компании и дает возможность пользователям присоединиться к группе

 

***

Виджет комментариев Facebook

Зайдите на страницу настроек блока комментариев и установите нужные параметры.

генератор кода ФБ

Нажмите кнопку Get Code

код виджета ФБ

Скопируйте код на свою страницу, после чего появится виджет комментариев

комментарии ФБ

Пользователь, который оставил комментарий, может направить его также в свою ленту, поставив соответствующую галочку

***

Виджет Twitter-ленты

Для того, чтобы добавить twitter-ленту на сайт, зайдите на страницу настроек (Настройки → Виджеты → Создать новый). Если вы вошли с профиля того аккаунта, виджет которого хотите создать, то у вас уже будет представлен готовый его вариант, который при необходимости можно подкорректировать. Ширина блока адаптивная, то есть виджет будет подстраиваться под ширину блока, в котором его разместят, регулировать можно лишь высоту.

твиттер-лента

Нажмите кнопку «Создать виджет» и скопируйте появившийся код в поле «Исходный код» на вашем сайте

твиттер-лента на сайте

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

 

***

Лайки в «Одноклассниках»

Теперь в «Одноклассниках» создана новая кнопка «Класс». Если у вас установлена старая кнопка, рекомендуем сменить ее на новую хотя бы потому, что работает она намного быстрее.

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

Откройте конструктор кнопки «Класс» и скопируйте URL вашего ресурса в соответствующую строку. Если вы хотите, чтобы пользователь выражал отношение к конкретной странице сайта, то включите опцию «Использовать текущий URL пользователя».

кнопка ОК

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

Кнопка Одноклассников

Кнопка, размещенная на вашем сайте, привлечет дополнительных посетителей

 

***

Группа в «Одноклассниках»:

Зайдите на страницу настроек, вставьте в соответствующее поле ID вашей группы в «Одноклассниках». Задайте нужные параметры по высоте и ширине.

группа в ОК

Скопируйте код для вставки в поле «Исходный код» и сохраните изменения на странице

Код группы ОК

Этот плагин, размещенный на вашем сайте, будет рекламировать вашу группу в «Одноклассниках» и позволит пользователям присоединиться к ней буквально в один клик

Как получить ID своей группы:

  1. Вы должны быть администратором группы.
  2. Зайдите в свою группу.
  3. Слева под аватаркой группы в меню есть опция «Изменить настройки». Выберите ее.
  4. В низу открывшейся страницы найдите надпись «ID этой группы на Одноклассниках:».
  5. Скопируйте указанный ID и подставьте в код встраивания виджета.

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

Виджет доступен и по https протоколу.