
Сегодня наблюдается интересная тенденция. Социальные сети все больше и больше выходят за рамки просто сайтов. Они медленно начинают оплетать весь Интернет. Судите сами: в каждый сайт, ориентированный на широкую аудиторию, непременно интегрируются социальные кнопки. «Мне нравится», «Like», «Поделиться», «Сохранить в…». На кнопках дело не заканчивается. В настоящее время мы имеем возможность добавлять комментирование через социальные сети. Все это позволяет упростить жизнь посетителям и избавиться от лишней нагрузки на сайт. Звучит заманчиво, но есть несколько проблем. О проблемах, их решении, а также о создании расширенной системы комментариев, включающей в себя несколько социальных сетей и встроенные комментарии сайта, пойдет речь в этой статье.
Для начала попробуем разобраться зачем вообще интегрировать социальные комментарии. Причин несколько:
- Как я написал выше, это удобство. Обычно пользователи, зайдя в социальную сеть, не выходят из нее. Я имею ввиду авторизацию. Это означает, что посетитель нашего сайта увидит себя уже подписанным в комментариях и с аватаром. Ему не нужно будет вводить код с картинки. Нужно только написать комментарий и нажать кнопку «Отправить».
- Снижение нагрузки на сервер сайта. Если сайт посещаем, то количество комментариев, оставленных на нем, легко может перевалить и за десять тысяч. Вся эта информация хранится в базе данных сайта, раздувая ее. Кроме того, каждый раз часть этой информации нужно извлекать, показывая пользователям, просматривающим ту или иную статью.
- Относительно неплохая защита от спама. Это достоинство относительное, но все же имеет место быть. С каждым годом регистрация в социальных сетях усложняется. Сначала достаточно было просто ввести свой email, затем добавилась обязательная проверка телефона, сегодня, например, Вконтакте стало возможно зарегистрироваться только по приглашению. Все эти действия направлены на сокращение количества спама. Это касается и социальных комментариев.
А вот еще более весомые достоинства, которые приводит Вконтакте:
1. Масштаб. Необходимость регистрации является дополнительной преградой при оставлении комментария, в результате чего общение часто приобретает анонимный или ограниченный характер. ВКонтакте зарегистрированы практически все пользователи Рунета, поэтому любой читатель сможет сразу прокомментировать Ваш материал от своего настоящего имени – с фотографией и ссылкой на подробную информацию о себе.
2. Вирусность. Каждый комментарий, оставленный через виджет, может автоматически транслироваться на страницу прокомментировавшего, а также попадает в Новости для его друзей. Такой комментарий всегда содержит ссылку на исходную статью. В результате о комментарии и существовании статьи узнают друзья комментатора, которые смогут присоединиться к дискуссии. Об их комментариях в свою очередь будут оповещены уже их друзья – и так далее. Дальше информация может распространяться лавинообразно.
3. Многомерность. Виджет ВКонтакте предусматривает возможность ответа на комментарии, причем ответы одновременно появляются как на странице статьи, так и на странице автора комментария, а также в новостях у его друзей. Автоматическая синхронизация ответов на комментарии приводит к тому, что Ваш материал обсуждается сразу на нескольких площадках, каждая из которых приносит внимание новых пользователей к исходной статье.
4. Скорость. В отличие от других возможностей социализации, виджет ВКонтакте очень прост в установке и может быть внедрен на все страницы Вашего сайта в течение 5 минут. Для достижения высокой скорости установки и работы виджета мы применили новейшие технологии и задействовали десятки наиболее мощных серверов ВКонтакте.
5. Контроль. Администратор сайта, устанавливающий код виджета, имеет возможность модерировать дискуссию прямо со страниц своего ресурса, удаляя нежелательные комментарии. Администратор также может назначать любое количество дополнительных модераторов, которые смогут обеспечивать порядок через удобный интерфейс.
6. Цитируемость. Каждый комментарий может становиться статусом пользователя ВКонтакте и содержит ссылку на Ваш ресурс. Комментарий появляется не только в новостях у друзей пользователя, но и в поиске по статусам ВКонтакте. Благодаря партнерству между ВКонтакте и Яндексом данные статусы в течение месяца будут индексироваться в поиске Яндекса в режиме реального времени, что станет источником дополнительной посещаемости для сайтов, разместивших виджет.
7. Независимость. Тексты всех комментариев хранятся и обрабатываются на серверах ВКонтакте, однако мы предоставляем API для администраторов сайтов, который позволяет сохранять все комментарии и на собственных серверах. Это не только предоставляет расширенные возможности для анализа комментариев, но и позволяет, в случае возникновения необходимости, отказаться от интеграции с ВКонтакте.
Несмотря на все достоинства социальной интеграции, существует ряд проблем, препятствующих ей:
- Возможность добавления комментариев через социальные сети появилась достаточно недавно, а существующие системы, установленные на сайтах, могут работать длительное время и содержать в себе тысячи комментариев. Запихнуть их в социальную сеть вряд ли получится, а избавляться не рационально, т.к. это все-таки уникальный, местами даже полезный контент. Из этого вытекает необходимость интеграции социальных комментариев без отключение собственной системы.
- Популярных социальных сетей несколько и народ распределен между ними. У каждого человека есть любимая сеть. Сие означает, что для получения максимального эффекта нужно интегрировать несколько социальных сетей.
Не сложно представить, как будет выглядеть сайт, если после текста статьи в нем будут встроены хотя бы 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 |
В этом случае все будет показано правильно, но на странице категории материалов исчезнут ссылки на комментарии и перестанет отображаться их количество.
Какой из вариантов выбрать – решать вам. Каждый из них имеет право на жизнь при определенных условиях.
После таких махинаций комментарии 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 --> |
а оставшийся код помещаем в нашу вкладку:
// Создаем 2 вкладку
1 2 3 4 5 | $output .= $myTabs->startPanel( 'Вконтакте', 'tab2' ); |
Главное, не забудьте, про
1 | $id = JRequest::getInt('id'); |
Его следует поместить перед кодом генерации вкладок.
Если все сделано правильно, то видим результат:
Обязательно проверьте, что на разных страницах показываются разные комментарии.
После этого можно переходить к Facebook.
Добавление Facebook.
Facebook жутко навороченный, а потому разобраться в нем достаточно сложно.
Идем на страничку Comments и видим там такую форму:
Заполняем ее и получаем следующий код:
1 2 3 | <div id="fb-root"></div> |
Теперь нам нужно провести с ним некоторые махинации. Для того, чтобы форма комментариев отображалась на русском языке, изменим в коде «en_US» на «ru_RU». Регистр важен, не ошибитесь! Теперь, также, как и в Вконтакте, нам нужно передать уникальный идентификатор. В facebook это может быть только ссылка. Как раз эта:
fb:comments href="/http://wedal.ru". Т.к. страницы на сайте разные, мы должны прикрутить к URL основного домена еще ту часть, которая ведет на страницу. Получить ее можно с помощью:
1 | $_SERVER["REQUEST_URI"] |
В результате код для третьей вкладки будет выглядеть следующим образом:
1 2 3 | $output .= $myTabs->startPanel( 'Facebook', 'tab3' ); |
Не забудьте указать 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 | <?php |
Не забудьте еще про небольшой кусочек от скрипта Вконтакте, который помещен между <head> и </head>.
Вот и все. Должен признать, что интеграция социальных комментариев да еще и во вкладках оказалась достаточно сложным квестом. Но вся прелесть в том, что для сайта открываются новые возможности. Никто не заставляет ограничиваться только этими социальными сетями. Мест под вкладки еще много и при желании можно добавить в них все, что душе угодно. Просто пробуйте и удачи в экспериментах!
Комментарии
Т.к. страницу комментариев вк генерирует сам вк и не пустит туда никого...
Есть другой вариант - автотизация пользователя через вк в джикомментс.
IvanG правильную мысль сказал про синхронизацию. Понятно, что программисту это может быть не просто всё сделать. Я лишь поделился мнением как это должно быть для пользователя.
http://www.joomla.ru/sites/shop-sites/1901-ikea
я им задал вопрос, молчат как портизаны)))
Правда из минусов: проблемы с индексацией ПС, хранение комментариев на серверах сервиса, платные тарифы(хотя есть и один бесплатный).
Но возиться с двумя шаблонами неудобно и это не совсем про определённые категории :)
Может кто подскажет как реализовать задуманное при помощи PHP ?
- если ID категории = 5(или другое число), то [код вывода вкладок]
Солидарен.Автору статьи спасибо.Статья очень актуально на данный момент у кого джумла 1,6 так как вменяемого компонента парламентариев для джумлы 1.6 на сегодняшний день нет,да и поисковики для ранжирования просят ссылки на социальные сети.В программирование не силен вопрос.
Как это реализовывать на джумле 1.6
Начну сначала по адресу templates\Ваш_Шаблон\html\com_content\article\ нет а есть templates/шаблон/html/ и там два файла php ?
Смотрите пример здесь: http://wedal.ru/rasshireniya-joomla/virtuemart-internet-magazin-na-joomla-chast-24-mootools-tabshtml.html
Joomla (1.5.20 Stable) установил, а плагин не ставиться:
Расширения — Установка и удаление — Обзор — закачать файл&установить.
Появляется полностью белое окно с адресом localhost/oboi/administrator/index.php, выхожу на предыдущую стр., расширение — плагины.
Название такого плагина «Editor — JCE 1.5.6» -НЕТ.
Сайт — Настройки — визуальный редактор по умолчанию — Здесь тоже НЕТ.
Система WinXP 32bit
Помогите, плз.
Когда захожу в вконтакт и вижу свой комментарий для той или иной статьи если нажать на переход к странице открывается стандартное окно
ВКонтакте | Переход по внешней ссылке
Ссылка указанна правильно (прямая и красивая) а когда нажимаю на переход к этой ссылке то открывается вот так вот %CF%EB%E0%F7-%C0%F1%F3%F0%FB.html
установил правильно, может быть как то по другому нужно к материалу подключаться дело в том что у меня стоит sh404sef и все ссылочки пишутся красиво и по русски.
Можно как то исправить?
ДОсканально плиззз разжуйте!!!
[code /code]
Есть другой вариант: в настройках Jcomments нужно не выделять категории, в которых будут показываться комментарии, а во вкладку вставить следующий код:
Код:
<?php
$comments = JPATH_BASE . '/components/com_jcomments/jcomments.php';
if (file_exists($comments)) {
require_once($comments);
echo JComments::showComments($_GET['id'], 'com_content', $title);
}
?>
Если ответите - сделаю перепост этой статьи с сылкой на ваш ресурс. (у меня пр3 )
В мне чомусь вибиває Notice: Undefined variable: title in /home/kinotrac/kinotrack.com/www/templates/vlue/html/com_content/article/default.php on line 147 ?
А коли встановив самий компонент JComments то вибило в адмінпанелі сайта: Your current site template doesn't have afterDisplayContent event!
Допоможіть розібратися.
Проблема в вашем шаблоне Joomla. Комментарии Jcomments выводятся на сайт плагином на событие afterDisplayContent(т.е. после контента). У вас в шаблоне установлено перенаправление(как раз на тот файл, который указан в ошибке) на переделанный шаблон материала, в котором отсутствует это событие.
Скажите пожалуйста, как сделать чтобы название "Вконтакте" было видно на русском языке и, чтобы как у Вас на рисунке было сразу поле для комментариев, а не просто надпись "Vkontakte", которую надо нажимать для коментирование?
И если можна объясните, что надо прописать в моем шаблоне, чтобы (после того как установил Jcomments) не появлялась ошибка Notice: Undefined variable: title in /home/kinotrac/kinotrack.com/www/templates/vlue/html/com_content/article/default.php on line 147, а в админпанели - Your current site template doesn't have afterDisplayContent event!
Заранее очень Благодарю!
Спасибо за очень хороший материал!
Все получилось, но есть конфликт java mootools и jquery!
Как это исправить?
Может есть решение не на mootools, а на jquery?
Что мне делать с этим?
как наличие зарегистрированного домена влияет на кодировку страницы? как влияет на кодировку страницы то, что сайт еще не был перенесен на хостинг?
набор фраз и взрыв мозгов....
Я так понял, что там можно писать комментарии в одном поле, авторизуясь через разные аккаунты.
Как только это произойдет, думаю, вы увидите живой пример на этом сайте.
$output .= $myTabs->startPanel( '1st', 'tab1' );
$output .= 'Это первая вкладка';
$output .= $myTabs->endPanel();
echo $this->article->event->afterDisplayContent;
Как можно убрать вышеописанные вкладки с главной страницы?
Спасибо, а как организовать проверку на "главную" и если главная, то не показывать табы?
сползает вправо :(
А еще в файле ieonly.css
заменил таким образом
div.current { overflow:hidden; }
div.current dd { float:left; }
а то полосы прокрутки отображались, что портило внешний вид.
А код вот такой.
:) из-зи комментирующих php тегов не видно комментария :)
!--[if IE]>
/css/ieonly.css" rel="stylesheet" type="text/css" />
Но вот в IE табы начинают плавать. в чем проблема? шаблон сайта сделан на artister.
есть отдельные css для IE. Подскажите где ковырять.ссылку на сайт могу кинуть.
$id = JRequest::getInt('id');
надо писать
$id = JRequest::getInt('product_id');
Notice: Undefined variable: title in /.../templates/t1/html/com_content/article/default.php on line 99
99 строка - это последняя строка кода, который нужно добавить в 1 вкладку.
Вкладка при этом совсем не отображается.
В настройках Jcomments отмечены все-все разделы и категории.
JComments 2.2.0.2
А компонент контакта не прикрепляет картинки и др. медиа...
Внимание: нет доступа к http://...
Перехожу по этой ссылке на http://developers.facebook.com/tools/debug/...
Там вижу информацию о своей странице. Теперь обновляю её на сайте - вуа-ля! Работает. Это что ж, мне все страницы сайта вот так нужно подтверждать?
Есть куча материалов (~50-150) все они на одной странице. К каждому материалу нужно добавить комментарии соц. сети Вконтакте. Но, есть нюанс, вк не дает расположить более одно своего виджета на странице.
http://extensions.joomla.org/tags/file-management
Компоненты -> jComments -> Настройки -> Права. Далее выбираете группу пользователей и ставите галочку в опции "Распознавание ссылок". Далее достаточно просто вставить полную ссылку в комментарий и jComments автоматически преобразует ее в гиперссылку.
А еще такой вопрос: можно ли прикрутить вместо стандартных смайлов колобки? У нас такой девчачий сайт, туда они прекрасно впишутся, особенно колобки от Вишенки. Интересно, они живы еще
Пока интеграция с комментами Фейсбука и прочего остановилась на том, что я рядом с полем Имя и эл.почта вставила модуль логина, в том числе через соц сети, ито это работает не идеально.
Застопорилась на вставке видео из Ютуба и фейсбука! с ютубом разобралась, надо во всплывающем окне добавить идентификатор, а с фейсбуком не могу - не вставляется и все! Уже сломала все родные настройки jcomments - пришлось восстанавливать резервную копию:)
У вас, я вижу, нет возможности в комментах делиться видео с ютуба или фото с инстаграма. Я вчера практически со всем разобралась, остался Инстаграм (не знаю, нужен ли он мне? А вдруг!) - так вот, на странице инстаграма когда хочешь расшарить, он выдаёт автоматически весь код. И отыскать в нем идентификатор фото совсем не просто. С другой стороны, можно ведь в комментах постить сразу готовый код, со всеми скриптами. Но тогда нужно окошко, куда вставляется код, поменять. Я вчера крутила его и так и этак, не работает :(
А вот кстати jcomments рекламируется с плагином логина через соцсети. Вы его не юзали? Я не решилась его устанавливать, на JED были отзывы средненькие. В итоге заказчик купил плагин за 60$. Неплохой, я даже прикрутила от него возможность комментировать блог плагином комментов Фейсбука. Но про тот Российский плагин хотелось бы мнение специалиста узнать:)
Про Инстаграм ничего сказать не могу. Никогда не использовал его.
Про интеграцию соц.логина в jComments: не вижу какого-то особого смысла. jComments позволяет оставлять комментарии зарегистрированным пользователям (ну к примеру), а соц.логин позволяет автоматически регистрировать и авторизовывать их на сайте. Это означает, что в целом jComments и соц.логин никак не связаны. Как вы правильно написали, можно вставить блок соц. логина в шаблон jComments и получить тоже самое, только бесплатно. Если не хочется морочиться, то можно купить платный плагин.