1. Створення вкладок на сторінках матеріалів.
2. Додавання Jcomments.
3. Додавання Вконтакте.
4. Додавання Facebook.

Про створення розширеної системи коментарів, що включає в себе кілька соціальних мереж і вбудовані коментарі сайту

Сьогодні спостерігається цікава тенденція. Соціальні мережі все більше і більше виходять за рамки просто сайтів. Вони повільно починають обплітають весь Інтернет. Судіть самі: в кожен сайт, орієнтований на широку аудиторію, неодмінно інтегруються соціальні кнопки. «Мені подобається», «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.