Блок комментариев социальных сетей

Социальные сети в современном интернете начинают играть всё большую и большую роль. В каждый сайт, ориентированный на широкую аудиторию, непременно интегрируются социальные кнопки ( «Мне нравится», «Like», «Поделиться», «Сохранить в…»). Помимо кнопок появилась и возможность добавлять комментирование через социальные сети. Это позволяет упростить жизнь посетителям и избавиться от лишней нагрузки на сервер сайта. Продвижение сайта через социальные сети - важный момент для увеличения популярности вашего проекта.

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

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

Чтобы всё выглядело компактно и красиво, необходимо под каждую систему комментариев сделать вкладку, а все эти вкладки будут объединены в единый блок комментариев. Этот блок будет выводиться под статьёй. Посетителю будет нужно только открыть соответствующую вкладку и написать комментарий.

Причин, по которым веб-мастеру желательно установить блок комментариев социальных сетей несколько:

1)Удобно. Обычно пользователи, авторизировавшись (введя логин и пароль) и зайдя в социальную сеть, не выходят из нее. Это означает, что если потом посетитель зайдёт на ваш сайт, то увидит себя уже подписанным в комментариях и с аватаром и сможет спокойном делать комментарии под вашими статьями. Ему не нужно будет регистрироваться на сайте для получения возможности написания комментариев, не нужно будет вводить код с картинки. Нужно будет только написать комментарий и нажать кнопку «Отправить»;

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

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

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

5)Контроль. Администратор сайта, имеет возможность модерировать комментарии прямо со страниц своего ресурса, удаляя нежелательные. Администратор может назначить модераторов, которые смогут обеспечивать порядок через удобный интерфейс.

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

7)Независимость. Тексты всех комментариев хранятся и обрабатываются на серверах каждой социальной сети, но некоторые соцсети предоставляют для администраторов сайтов возможность сохранять все комментарии и на сервере вашего сайта. Это предоставляет расширенные возможности для анализа комментариев, и при необходимости можно отказаться от интеграции с конкретной социальной сетью.

Итак, для примера на сайте под управлением CMS Jooma создадим блок комментариев с тремя вкладками, в которых будут размещены формы комментариев Jcomments (система комментариев CMS Joomla), Вконтакте и Facebook соответственно.

 

1. Создание вкладок на страницах статей.

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

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

Как это работает - в папке с используемым на вашем сайте шаблоне Joomla создаётся копия каркаса страницы (нам будет нужен каркас страницы материала) и переделывается так, как нужно вам. В то же время изначальный каркас страницы останется неизменным. Joomla определяет, что в папке с шаблоном есть какой-то новый каркас, отличный от исходного. Он будет считаться важней исходного каркаса страницы и использоваться будет именно он. Таким способом вы можете создать собственные каркасы различных страниц Joomla, для каждого отдельного шаблона сайта Joomla.

 

Как это делается:

  1. Копируем файл default.php (расположение: components\com_content\views\article\tmpl\default.php). Это файл каркаса страницы материала в CMS Joomla.
  2. Вставляете его в: templates\ваш_шаблон\html\com_content\article\ . Если нет нужных папок на этом пути - создаёте их сами (html, com_content, article), если такие папки уже есть, значит шаблон уже использует переназначения и в этом случае ничего копировать не нужно. Достаточно просто открыть файл templates\ваш_шаблон\html\com_content\article\default.php). Теперь, внося изменения в файле default.php, вы будете видеть их на странице материала сайта.
  3. Далее открываете файл default.php в любом текстовом редакторе и вставляете в конец файла код вкладок.
  4. Далее добавляете код CSS-стилей для блока комментариев в CSS-файл шаблона Joomla и проверяете результат - в конце каждой статьи у вас должны появиться блок комментариев с вкладками.

 

Код вкладок (вставляется в файл default.php)

<?php

//Говорим Joomla, что мы хотим использовать панели
jimport('joomla.html.pane');
$myTabs = & JPane::getInstance('tabs',
array('startOffset'=>0));
$output = '';

//Создаем панель для вкладок

$output .=
$myTabs->startPane( 'pane' );

//
Создаем 1 вкладку
$output .= $myTabs->startPanel( '1st', 'tab1' );
$output .= '<p>
Это первая вкладка</p>';
$output .= $myTabs->endPanel();

//
Создаем 2 вкладку
$output .= $myTabs->startPanel( '2nd', 'tab2' );
$output .= '<p>
Это вторая вкладка</p>';
$output .= $myTabs->endPanel();

//
Создаем 3 вкладку
$output .= $myTabs->startPanel( '3rd', 'tab3' );
$output .= '<p>
Это третья вкладка</p>';
$output .= $myTabs->endPanel();

//
окончание панели
$output .= $myTabs->endPane();
//
Выводим
echo $output;
?>

 

Код CSS-стилей для блока комментариев, вставляется в CSS-файл шаблона Joomla  (примерный путь: public_html/templates/ваш-шаблон/css/template.css )

dl.tabs {
   float: left;
   margin: 10px 0 -1px 0;
   z-index: 50;
} 

dl.tabs dt {
   float: left;
   padding: 4px 10px;
   border-left: 1px solid #ccc;
   border-right: 1px solid #ccc;
   border-top: 1px solid #ccc;
   margin-left: 3px;
   background: #f0f0f0;
   color: #666;
 }

dl.tabs dt.open {
   background: #F9F9F9;
   border-bottom: 1px solid #F9F9F9;
   z-index: 100;
   color: #000;
 }

div.current {
   clear: both;
   border: 1px solid #ccc;
   padding: 10px 10px;
}

 div.current dd
{
   padding: 0;
   margin: 0;
 }

 

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

blok-kommanriev

 

2. Добавление комментариев вашего сайта.

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

Для CMS Joomla существует отличный бесплатный компонент Jcomments - комментарии для Joomla, именно он используется для комментариев на большинстве Joomla-сайтов. Скачать и установить его вы сможете в разеделе "Скачать", пункт "Расширения Joomla".

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

Поместим комментарии Jcomments и форму их ввода в первую вкладку блока комментариев. Для этого в код вкладок, который вы вставили в файл default.php необходимо внести изменения. В результате должно получиться вот так:

<?php

$comments = JPATH_BASE . '/components/com_jcomments/jcomments.php';
if (file_exists($comments)) {require_once($comments);

}
$id = JRequest::getInt('id');

//
Говорим Joomla, что мы хотим использовать панели
jimport('joomla.html.pane');
$myTabs = & JPane::getInstance('tabs', array('startOffset'=>0));
$output = '';

//
Создаем панель для вкладок
$output .= $myTabs->startPane( 'pane' );

//
Создаем 1 вкладку
$output .= $myTabs->startPanel( 'Jcomments', 'tab1' );
$output .= JComments::showComments($_GET['id'], 'com_content', $title);
$output .= $myTabs->endPanel();

// Создаем 2 вкладку
$output .= $myTabs->startPanel( '2nd', 'tab2' );
$output .= '<p>Это вторая вкладка</p>';
$output .= $myTabs->endPanel();
 
// Создаем 3 вкладку
$output .= $myTabs->startPanel( '3rd', 'tab3' );
$output .= '<p>Это третья вкладка</p>';
$output .= $myTabs->endPanel();
 
//окончание панели
$output .= $myTabs->endPane();
//Выводим
echo $output;
?>

 

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

blok-kommanriev-jcomments

 

3. Добавление комментариев ВКонтакте.

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

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

blok-kommanriev-vkontakte

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

Далее меняете все оставшиеся настройки под себя и получаете необходимый код. Первую часть кода необходимо вставить в файл шаблона вашего сайта - index.php, между тегами head и /head. Расположен этот файл по такому пути: public_html/templates/ваш_шаблон/index.php

Вставляем часть кода:

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?31"></script>

<script type="text/javascript">

VK.init({apiId: ВАШ-ID, onlyWidgets: true});

</script>

 

Оставшийся код помещаем в код блока комментариев в файле default.php (templates\ваш_шаблон\html\com_content\article\default.php

// Создаем 2 вкладку

$output .= $myTabs->startPanel( 'Вконтакте', 'tab2' );
$output .= '<div id="vk_comments"></div><script type="text/javascript">

VK.Widgets.Comments("vk_comments", {limit: 20, width: "450", attach: "*"});

</script>';
 $output .= $myTabs->endPanel();

 

В результате изменений кода блока комментариев в двух первых вкладках в файле default.php у вас должен получится следующий код:



<?php
$comments = JPATH_BASE . '/components/com_jcomments/jcomments.php';
if (file_exists($comments)) {require_once($comments);

}
$id = JRequest::getInt('id');

//
Говорим Joomla, что мы хотим использовать панели
jimport('joomla.html.pane');
$myTabs = & JPane::getInstance('tabs', array('startOffset'=>0));
$output = '';

//
Создаем панель для вкладок
$output .= $myTabs->startPane( 'pane' );

//
Создаем 1 вкладку
$output .= $myTabs->startPanel( 'Jcomments', 'tab1' );
$output .= JComments::showComments($_GET['id'], 'com_content', $title);
$output .= $myTabs->endPanel();

//
Создаем 2 вкладку
$output .= $myTabs->startPanel( '
Вконтакте', 'tab2' );
$output .= '<div id="vk_comments"></div><script type="text/javascript">

VK.Widgets.Comments("vk_comments", {limit: 20, width: "450", attach: "*"});

</script>';
$output .= $myTabs->endPanel();

// Создаем 3 вкладку
$output .= $myTabs->startPanel( '3rd', 'tab3' );
$output .= '<p>Это третья вкладка</p>';
$output .= $myTabs->endPanel();
 
//окончание панели
$output .= $myTabs->endPane();
//Выводим
echo $output;
?>

 

Визуально обновлённый блок комментариев будет выглядеть так:

blok-kommentariev-vkontakte2

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

 

4. Добавление комментариев Facebook.

Код для третьей вкладки будет выглядеть следующим образом:




// Создаем 3 вкладку

$output .= $myTabs->startPanel( 'Facebook', 'tab3' );
$output .= '<div id="fb-root"></div><script src="http://connect.facebook.net/ru_RU/all.js#xfbml=1"></script><fb:comments href="http://ВАШ-САЙТ.ru'.$_SERVER["REQUEST_URI"].'" num_posts="10" width="500"></fb:comments>';
$output .=
$myTabs->endPanel();

Не забудьте изменить URL на свой сайт и проверить уникальность комментариев на разных страницах.

 

Визуально обновлённый блок комментариев будет выглядеть так:

blok-kommentariev-facebook

 

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

1. В файле шаблона вашего сайта - index.php, между тегами head и /head. Расположен этот файл по такому пути public_html/templates/ваш_шаблон/index.php

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?31"></script>

<script type="text/javascript">

VK.init({apiId: ВАШ-ID, onlyWidgets: true});

</script>

 

2. В результате всех изменений кода блока комментариев во всех вкладках в файле default.php (templates\ваш_шаблон\html\com_content\article\default.php) у вас должен получится следующий код:



<?php


$comments = JPATH_BASE . '/components/com_jcomments/jcomments.php';
if (file_exists($comments)) {require_once($comments);

}
$id = JRequest::getInt('id');

//
Говорим Joomla, что мы хотим использовать панели
jimport('joomla.html.pane');
$myTabs = & JPane::getInstance('tabs', array('startOffset'=>0));
$output = '';

//
Создаем панель для вкладок
$output .= $myTabs->startPane( 'pane' );

//
Создаем 1 вкладку
$output .= $myTabs->startPanel( 'Jcomments', 'tab1' );
$output .= JComments::showComments($_GET['id'], 'com_content', $title);
$output .= $myTabs->endPanel();

//
Создаем 2 вкладку
$output .= $myTabs->startPanel( '
Вконтакте', 'tab2' );
$output .= '<div id="vk_comments"></div><script type="text/javascript">

VK.Widgets.Comments("vk_comments", {limit: 20, width: "450", attach: "*"},'.$id.');

</script>';
$output .= $myTabs->endPanel();

//
Создаем 3 вкладку
$output .= $myTabs->startPanel( 'Facebook', 'tab3' );
$output .= '<div id="fb-root"></div><script src="http://connect.facebook.net/ru_RU/all.js#xfbml=1"></script><fb:comments href="http://ВАШ-САЙТ.ru'.$_SERVER["REQUEST_URI"].'" num_posts="10" width="500"></fb:comments>';
$output .= $myTabs->endPanel();

//
окончание панели
$output .= $myTabs->endPane();

//
Выводим
echo $output;

?>

 

3. Код CSS-стилей для блока комментариев, вставляется в CSS-файл шаблона Joomla (примерный путь: public_html/templates/ваш-шаблон/css/template.css )

dl.tabs {
   float: left;
   margin: 10px 0 -1px 0;
   z-index: 50;
} 

dl.tabs dt {
   float: left;
   padding: 4px 10px;
   border-left: 1px solid #ccc;
   border-right: 1px solid #ccc;
   border-top: 1px solid #ccc;
   margin-left: 3px;
   background: #f0f0f0;
   color: #666;
 }

dl.tabs dt.open {
   background: #F9F9F9;
   border-bottom: 1px solid #F9F9F9;
   z-index: 100;
   color: #000;
 }

div.current {
   clear: both;
   border: 1px solid #ccc;
   padding: 10px 10px;
}

 div.current dd
{
   padding: 0;
   margin: 0;
 }

 

На этом установка блока комментариев социальных сетей для вашего сайта завершена. В нашем примере были использованы только 3 вкладки в блоке, но вы сможете добавить ещё столько, сколько вам нужно для интеграции комментарий с других социальных сетей. Мы привели варианты с ВКонтакте и Facebook, но есть также довольно популярные Одноклассники, Twitter, Живой Журнал и другие. На этом всё - успехов вам!