Добрый день всем на wmbn.ru! Продолжаем (а точнее заканчиваем) запись социальных плагинов от Facebook, в которой я рассказал о виджете комментариев и кнопках отправить и подписаться на обновления. В данном посте будут рассмотрены 3 социальных блока от Facebook — новостная лента, рекомендации посетителей и Like блок (виджет лайков).

Виджеты от Facebook и ВКонтакте для сайта

Ниже узнаем назначение каждого виджета и его пользу для блога, а так же как установить виджеты от Facebook на блог WordPress, добавив код в нужные файлы. Но для этого данные виджеты нужно настроить и получить сгенерированый код, чем сейчас займемся. Так же рассмотрим варианты виджетов от популярной социальной сети России — ВКонтакте (VK), которая предоставила код виджетов для комментариев, сообществ и опросов.

Виджет от Facebook новостная лента — Activity Feed

Новостная лента (Activity Feed) нужна для показа всех событий, которые происходили за последнее с блогом (в социальном плане). То есть данный блок показывает последние Лайки, комментарии от посетителей, подписки и т.д. Посмотрев данный блок пользователь может заинтересоваться какой-либо записью, на которой ведется активная дискуссия и имеет больше всего лайков и т.д.

Блок активности от Facebook для сайта

Чтобы получить новостной блок перейдите на страницу плагинов Facebook и выберите Activity Feed. Приступим к настройке виджета — первым делом укажите адрес вашего сайта в поле Domain, App ID если имеется и Action (показывать только определенные действия), а так по умолчанию будут транслироваться каждое действие. Затем настраиваем ширину (Width) и высоту (height). Header — показывать заголовок виджета, Coloe Scheme — цветовая схема, Link Target — устанавливаем поведение открытия ссылки (в новом окне, вкладке или на этой же странице). Border color — цвет границы, Font — шрифт для основного текста и Recommendations — показывать рекомендации.

После всех манипуляций нажимаем Get Code и приступаем к установке блока Activity Feed. Первый участок кода нужно скопировать в файл header.php (Заголовок) сразу после тега body:

<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
...
}(document, 'script', 'facebook-jssdk'));</script>

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

Like блок — получение кода и установка виджета

Переходим ко второму плагину — Блок Лайков (Like Box). Назначение уже ясно из названия — показывает тех посетителей, которым понравился ваш сайт на Facebook и они нажали Like Botton. Установка такая же, как и Activity Box — заходим на страницу виджетов Facebook, выбираем Like Box и приступаем к настройке блока.

В поле Facebook Page URL указываем ваш адрес на странице Facebook (можно указать адрес группы), затем настраиваем ширину (Width) и высоту (Height) для блока. Отмечаем пункт Show Faces, если нужно показывать фотографии пользователей, Header для показа заголовка блока и затем выставляем цвет (Border Color) для рамки. Затем жмем Get Code и также первый участок кода копируем в файл header.php, а второй в то место, где он будет отображаться.

Установка виджета Recommendations Box на блог

Остался последний виджет от Facebook — Recommendations Box или Блок Рекомендаций. Его, как и два предыдущих находим на странице виджетов. В данном виджете, в отличие от Activity Box, показываются рекомендации для пользователей. То есть в нем можно транслировать новости, связанные допустим с ошибкой в каком-либо коде, изменении в настройках и т.д. Данные рекомендации будут помечены пользователями как показатель важности новости.

Виджеты рекомендации для сайта от Facebook

Приступим к настройке блока Recommendations Box. В поле Domain укажите адрес сайта, с которого будут показываться рекомендации. App ID оставляем пустым, если его у вас нет, Action тоже можно оставить пустым, так как в этом случае будут показаны все рекомендации с сайта. Как обычно указываем длину (height) и ширину (width) блока, ставим Show header (показывать заголовок) если это требуется. Color Scheme — цветовая схема подбирается по дизайну сайта. Link Target — в каком окне будут открываться страницы (новая вкладка, окно или та же страница). Установка происходит точно также, как и для Activity Box и Like Box.

Виджет для создания комментариев от ВКонтакте

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

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

Приступим к получению кода виджета для комментариев — перейдите на страницу виджетов от VK и выберите пункт Комментарии. Далее на странице настройки виджета укажите адрес вашего сайта. Количество комментариев — оптимальный вариант 5-10 штук. На вкладке Медиа можно выбрать различные дополнения для виджета комментариев — изображения, видео, аудио, ссылки. Затем указываем ширину блока и приступаем к установке блока на сайт. Первый участок кода:

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src=""></script>
<script type="text/javascript">
  VK.init({});
</script>

Установите до тега Head в файле header.php. Далее установим блок в то место, где лн будет отображаться — лучше всего сразу после записи в файле single.php:

</div>
<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "496", attach: "*"});
</script>
	<?php comments_template(); ?>

После сохранения настроек виджет комментариев ВКонтакте будет отображаться сразу после основного текста.

Блок сообщества от ВКонтакте и создание Опросов

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

Виджет сообществ ВКонтакте

И последний интересный виджет от Контакта — блок опросов. Настраивается он очень просто — указываем сайт, тему для опроса и варианты ответа. После чего жмем Получить код, где первую часть копируем в header.php, а вторую в single.php точно также, как и блок комментариев.

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

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

  1. Макс

    Здравстввуйте. А как указать виджету какую картинку постить на ФБ? Бо у меня на ФБ попадает первая картинка на странице.

    1. writer

      Это уже Facebook со своими алгоритмами. Попробуйте схитрить с картинками, поскрывав их

  2. Александр

    С большим интересом прочитал несколько статей на сайте. Веб-дизайном занялся в начале марта, сделал свой сайт про осетров ossetr.ru/.
    Однако возникает много технических вопросов, в частности, о виджетах. Дизайн и функциональность моего сайта меня не совсем удовлетворяет, хочется их усовершенствовать. Виджеты — один из наиболее эффективных и доступных подходов. Поэтому с удовольствием нахожу на этом сайте много полезного. Желающим обсудить вопрос о наиболее интресных новых виджетах — мой твиттер all.lozo

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>