Вставляем виджеты социальных сетей на сайт

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

1. Виджеты групп

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

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

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

Виджет Вконтакте

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

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

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

После настроек нажмите кнопку Get code (получить код) и скопируйте оба поля в нужное место на сайте.

Виджет Facebook

 

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

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

Виджет Twitter

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

2. Виджеты комментариев

Для рунета наиболее популярными являются виджеты комментариев Вконтакте, причина тому очевидна. 

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

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

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

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

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

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

На странице настроек блока комментариев устанавливаем нужные параметры (url менять не обязательно) и нажимаем кнопку “Get code”.

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

Чтобы добавить администраторов к комментариям, дополнительно необходимо прописать мета-тег, в который вместо YOUR_FACEBOOK_USER_ID  нужно вставить ID вашего профиля.

property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}"/>

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

При возникновении каких-либо проблем или вопросов, задавайте их в комментариях или обращайтесь за помощью к нашим специалистам. Мы работаем практически с любыми системами управления сайтом!

 

Вернуться назад

Оставить комментарий:

 

Поля, помеченные *, обязательны к заполнению.