Расширенная система комментариев для Joomla.

Сегодня наблюдается интересная тенденция. Социальные сети все больше и больше выходят за рамки просто сайтов. Они медленно начинают оплетать весь Интернет. Судите сами: в каждый сайт, ориентированный на широкую аудиторию, непременно интегрируются социальные кнопки. «Мне нравится», «Like», «Поделиться», «Сохранить в…». На кнопках дело не заканчивается. В настоящее время мы имеем возможность добавлять комментирование через социальные сети. Все это позволяет упростить жизнь посетителям и избавиться от лишней нагрузки на сайт. Звучит заманчиво, но есть несколько проблем. О проблемах, их решении, а также о создании расширенной системы комментариев, включающей в себя несколько социальных сетей и встроенные комментарии сайта, пойдет речь в этой статье.

Для начала попробуем разобраться зачем вообще интегрировать социальные комментарии. Причин несколько:

• Как  я  написал выше, это удобство. Обычно пользователи, зайдя в социальную сеть, не выходят из нее. Я имею ввиду авторизацию. Это означает, что посетитель нашего сайта увидит себя уже подписанным в комментариях и с аватаром. Ему не нужно будет вводить код с картинки. Нужно только написать комментарий и нажать кнопку «Отправить».
• Снижение нагрузки на сервер сайта. Если сайт посещаем, то количество комментариев, оставленных на нем, легко может перевалить и за десять тысяч. Вся эта информация хранится в базе данных сайта, раздувая ее. Кроме того, каждый раз часть этой информации нужно извлекать, показывая пользователям, просматривающим ту или иную статью.
• Относительно неплохая защита от спама. Это достоинство относительное, но все же имеет место быть. С каждым годом регистрация в социальных сетях усложняется. Сначала достаточно было просто ввести свой email, затем добавилась обязательная проверка телефона, сегодня, например, Вконтакте стало возможно зарегистрироваться только по приглашению. Все эти действия направлены на сокращение количества спама. Это касается и социальных комментариев.

А вот еще более весомые достоинства, которые приводит Вконтакте:

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

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

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

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

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

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

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

Несмотря на все достоинства социальной интеграции, существует ряд проблем, препятствующих ей:

1. Возможность добавления комментариев через социальные сети появилась достаточно недавно, а существующие системы, установленные на сайтах, могут работать длительное время и содержать в себе тысячи комментариев. Запихнуть их в социальную сеть вряд ли получится, а избавляться не рационально, т.к. это все-таки уникальный, местами даже полезный контент. Из этого вытекает необходимость интеграции социальных комментариев без отключение собственной системы.
2. Популярных социальных сетей несколько и народ распределен между ними. У каждого человека есть любимая сеть. Сие означает, что для получения максимального эффекта нужно интегрировать несколько социальных сетей.

Не сложно представить, как будет выглядеть сайт, если после текста статьи в нем будут встроены хотя бы 3 системы комментариев. Чтобы представить все компактно и красиво, нам помогут вкладки. Идея такова: под статьей мы создаем блок с тремя вкладками в которых будут размещены формы комментариев Jcomments, Вконтакте и Facebook соответственно. Посетитель сможет сам выбрать через какую из форм комментировать. Ему останется лишь открыть соответствующую вкладку и написать комментарий.

Всю работу по созданию такого чуда я разбил на 4 этапа:

• Создание вкладок на страницах материалов
• Добавление Jcomments в первую вкладку
• Добавление Вконтакте во вторую вкладку
• Добавление Facebook в третью вкладку

Рассмотрим все этапы по порядку.

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

Многие не знают, что для создания вкладок Joomla имеет встроенный инструмент. Я уже писал о нем подробно в статье VirtueMart – интернет-магазин на Joomla. Часть 24. Добавление mootools-вкладок для VirtueMart. Пусть вас не пугает название. Пример, описанный там, подходит не только к VirtueMart но и к Joomla. В статье приводится код, формирующий любое количество вкладок, а также, CSS-стили, создающие красивое отображение. Прежде, чем продолжать чтение этой статьи, настоятельно советую ознакомиться с вышеприведенной.

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

В Joomla существует возможность переопределения некоторых каркасов страниц, в том числе и страницы материала. Переопределение можно описать следующим образом: в Joomla есть каркасы, которые строят разные страницы, будь то блог категории, материал, список ссылок и.т.д. Изменять просто так  эти каркасы нельзя – изменения потеряются при обновлении Joomla да и при использовании нескольких шаблонов каркасы изменятся во всех. Для того, чтобы работать с каркасами более гибко используются переопределения. Мы создаем копию каркаса в одном из шаблонов Joomla(обычно в используемом) и переделываем ее так, как душе угодно. Исходный же каркас остается неизменным. Но Joomla знает, что если в папке с шаблоном есть какой-то каркас, то он важнее исходного и использоваться будет именно он. Таким образом мы можем создать собственные каркасы(шаблоны) различных страниц Joomla, для каждого отдельного шаблона Joomla. Думаю, что получилось запутанно. Попробую показать на примере:

Копируем файл components\com_content\views\article\tmpl\default.php (шаблон страницы материала Joomla)

И вставляем его в templates\Ваш_Шаблон\html\com_content\article\

При этом все недостающие папки(html, com_content, article) создаем самостоятельно(если они уже существуют, значит шаблон уже использует переназначения. В этом случае ничего копировать не нужно. Достаточно просто открыть файл templates\Ваш_Шаблон\html\com_content\article\default.php).

Теперь, внося изменения в шаблон default.php, находящийся в папке шаблона Joomla мы будем видеть их на странице материала сайта.

Вставляем в конец этого шаблона(default.php) код вкладок(из статьи, приведенной выше), добавляем CSS-стили в CSS-файл шаблона Joomla и любуемся результатом: в конце каждой статьи у нас теперь есть вкладки.

Добавление Jcomments.

Jcomments является отличным компонентом комментариев. Аналогов (бесплатных) у него нет. Именно Jcomments используется для комментариев на большинстве сайтов, построенных на Joomla. Наша задача – поместить комментарии Jcomments и форму их ввода в первую вкладку. Казалось бы ничего сложного, но задача не так проста. Дело в том, что Jcomments показывает комментарии и форму их добавления в конце статей, используя плагин. Этот плагин выводится в шаблон default.php с помощью строчки:

1

<?php echo $this->article->event->afterDisplayContent; ?>

Первое, что приходит в голову – взять, да и засунуть эту строчку во вкладку. Можно так и сделать, но только в некоторых случаях. Дело в том, что эта строчка выводит не только комментарии Jcomments, а еще и некоторые другие плагины(например, если после статьи у вас отображаются ссылки на последующие и предыдущие, и.т.д). В этом случае в первую вкладку попадут не только комментарии, но и все остальные платины, что, конечно, не хорошо.

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

1
2
3
4
5
6 

<?php

$comments = JPATH_BASE . '/components/com_jcomments/jcomments.php';
if (file_exists($comments)) {
require_once($comments);
echo JComments::showComments($_GET['id'], 'com_content', $title);
}
?>

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

Какой из вариантов выбрать – решать вам. Каждый из них имеет право на жизнь при определенных условиях.

После таких махинаций комментарии Jcomments уютно разместятся во вкладке.

Добавление Вконтакте.

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

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

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

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

Для того, чтобы получить ID материала Joomla достаточно придумать переменную и присвоить ей следующее значение:

1

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

Здесь $id – наша переменная.

Далее, мы добавляем ее в скрипт контакта следующим образом:

1

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

После этого остается правильно вставить код Контакта. Следуя указаниям, мы вставляем часть кода между тегами <head> и </head>:

1
2
3

<!-- 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 вкладку

1
2
3
4
5

$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();

Главное, не забудьте, про 

1

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

Его следует поместить перед кодом генерации вкладок.

Если все сделано правильно, то видим результат:

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

После этого можно переходить к Facebook.

Добавление Facebook.

Facebook жутко навороченный, а потому разобраться в нем достаточно сложно.

Идем на страничку Comments и видим там такую форму:

Заполняем ее и получаем следующий код:

1
2
3

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="http://wedal.ru" num_posts="10" width="500"></fb:comments>

Теперь нам нужно провести с ним некоторые махинации. Для того, чтобы форма комментариев отображалась на русском языке, изменим в коде «en_US» на «ru_RU». Регистр важен, не ошибитесь! Теперь, также, как и в Вконтакте, нам нужно передать уникальный идентификатор. В facebook это может быть только ссылка. Как раз эта:

fb:comments href="/http://wedal.ru". Т.к. страницы на сайте разные, мы должны прикрутить к URL основного домена еще ту часть, которая ведет на страницу. Получить ее можно с помощью:

1

$_SERVER["REQUEST_URI"]

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

1
2
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://wedal.ru'.$_SERVER["REQUEST_URI"].'" num_posts="10" width="500"></fb:comments>';
$output .= $myTabs->endPanel();

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

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

Финальный код:

В результате код получится следующий:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<?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://wedal.ru'.$_SERVER["REQUEST_URI"].'" num_posts="10" width="500"></fb:comments>';
$output .= $myTabs->endPanel();

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

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

?> 

Не забудьте еще про небольшой кусочек от скрипта Вконтакте, который помещен между <head> и </head>.

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

Об авторе

Wedal (Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.

Основной профиль – создание сайтов и расширений на CMS Joomla.

• Об авторе
• Портфолио
• Услуги
• Контакты