Как добавить виджет комментариев из социальной сети

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

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

Facebook

1. Регистрация сайта.

Чтобы поставить виджет от Facebook, для начала нужно зайти на страничку http://developers.facebook.com/docs/reference/plugins/comments и заполнить форму, в которой нужно указать адрес вашего сайта, количество комментариев, которые будут отображаться на странице, затем указать ширину виджета и вариант цветовой схемы:

Регистрация сайта в facebook

Остается нажать на кнопку «Get Code» (получить код).

2. Размещение на сайте.

Полученный код можно разделить на 2 части. Первая, в идеале, ставится после тега <body>.

Пример:

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

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

Пример:

<div class="fb-comments" data-href="адрес_сайта" data-num-posts="кол-во_комментов" data-width="ширина"></div>

Добавляем код в шаблон сайта themes/site.php.

В результате получается что-то похожее:

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

Вконтакте

1. Регистрация сайта.

Чтобы разместить сам виджет, для начала необходимо перейти на страничку http://vk.com/developers.php?oid=-1&p=Comments и заполнить форму, в которой последовательно указываем сайт (возможно, его нужно будет добавить, если его нет в выпадающем списке), количество отображаемых комментариев, настраиваем тип контента, доступного для показа, и ширину виджета.

Регистрация сайта в vk

Код генерируется автоматически, изменяясь по ходу заполнения формы.

2. Размещение на сайте.

Полученный код делится на 2 части. Первая размещается внутри тегов <head></head>.

Пример:

<script type="text/javascript">
VK.init({apiId: твой ап, onlyWidgets: true});
</script>

Вторая часть ставится в то место, где будет выводиться контент виджета.

Пример:

<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "496", attach: "*"});
</script>

Добавляем код в шаблон сайта themes/site.php.

В результате получаем знакомый интерфейс для размещения комментариев:

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

Оформление.

Оба виджета можно оформить в виде шаблонных тегов. Чтобы сделать это, создадим два новых файла.

themes/functions/facebook.php

Пример:

<?php
if (! defined('DIAFAN'))
{
    
$path = __FILE__;
    while(!
file_exists($path.'/includes/404.php'))
    {
        
$parent = dirname($path);
        if(
$parent == $path) exit;
        
$path = $parent;
    }
    include
$path.'/includes/404.php';
}
echo
"<div id=\"fb-root\"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = \"//connect.facebook.net/ru_RU/all.js#xfbml=1\";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class=\"fb-comments\" data-href=\"адрес_сайта\" data-num-posts=\"кол-во_комментов\" data-width=\"ширина\"></div>"
;

themes/functions/vk.php

Пример:

<?php
if (! defined('DIAFAN'))
{
    
$path = __FILE__;
    while(!
file_exists($path.'/includes/404.php'))
    {
        
$parent = dirname($path);
        if(
$parent == $path) exit;
        
$path = $parent;
    }
    include
$path.'/includes/404.php';
}

echo
'<script type="text/javascript" src="//vk.com/js/api/openapi.js?63"></script>
<script type="text/javascript">
    VK.init({apiId: тут будет твой ap, onlyWidgets: true});
</script>

<div id="vk_comments"></div>
    <script type="text/javascript">
    VK.Widgets.Comments("vk_comments", {limit: 10, width: "496", attach: "*"});
</script>'
;

Теперь мы можем использовать шаблонные теги.

Пример:

<insert name="facebook">
<insert name="vk">
Ваши комментарии и дополнения

Ваш комментарий будет первым.

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