Додавання коментарів на сайт

Наша взаимовыгодная связь https://banwar.org/

Чесно кажучи, коли побачив, що з цього приводу пишуть і радять новачкам на інших сайтах, трохи злякався і вирішив запив свою замітку на цю тему без фатального недоліку . В основному я бачив довгі полотнища коду, які реалізують додавання коментарів на сайт. Зазвичай для цього створюють форму, реалізують її обробку, збереження, а так само вибірки для відображення. Але переваг такого підходу чим далі, тим все менше.

У цій замітці ви дізнаєтеся один з найбільш простих (але, суб'єктивно, один з найбільш бажаних) способів додати коментарі на сайт - простий приклад для новачків + варіанти для більш просунутих веб-майстрів.

Дійсно, для чого винаходити велосипед і писати купу коду, який в майбутньому ще доведеться підтримувати, фіксують і т.д., якщо є купа готових рішень від сторонніх сервісів (мова йде про соціальні мережі + disqus)?

Але перш ніж перейдемо до безпосередньо впровадження, давайте розглянемо переваги / недоліки використання готових рішень. (Якщо про що забув - пишіть в коментах - розширимо список)

Переваги сторонніх рішень:

Простота в реалізації.
Захищеність від спаму "з коробки" (в своєму рішенні довелося б це додатково реалізувати, так що, теоретично, пов'язане з попереднім пунктом).
У меншій мірі схильний до помилок, Багам і т.д., так як сторонні рішення перевірили мільйони користувачів (знову пов'язано з першим: ви теж можете написати все без багів, але піде додатковий час на налагодження).
Як правило, сервіси надають готову адмінку, статистику, повідомлення для адмінів, іноді модерацію, кілька адмінів, премодерацію і т.д., на реалізацію чого у веб-майстри, особливо початківця, можуть піти місяці, а то й роки.
Користувачеві не потрібно реєструватися, вводити своє ім'я та т. Д. - передбачається, що у нього вже є аккаунт у популярній соцмережі.
Швидше за все, витримає велике навантаження через те, що соц. платформи спочатку розраховані на великі навантаження.

недоліки:

Погане або повна відсутність можливості змінити зовнішній вигляд блоку з коментарями.
Індексація в пошукових системах.

Як бачите, переваг набагато більше. Неможливість змінити зовнішній вигляд, швидше за все, зроблена для того, щоб дізнаватися стиль сервісу коментарів, таким чином створювати ненав'язливу рекламу. (Як один з варіантів). А що стосується індексації - так чи так уже вона важлива, адже далеко не всі коменти несуть смислове навантаження.

Але досить теорії, перейдемо до практики.

1. Найпростіший варіант - додати коментарі з використанням якоїсь обраної соцмережі.

Наприклад, vk. дивимося документацію . Копіюємо наданий код, і додаємо на сторінці (шматки коду взяті з доки за посиланням, в майбутньому може змінитися, так що завжди копіюйте з сайту з документацією. Тут тільки можливий приклад):

1) Додаємо в <head>:

<Script type = "text / javascript" src = "// vk.com/js/api/openapi.js?126"> </ script> <script type = "text / javascript"> VK.init ({apiId: 2951023, onlyWidgets: true}); </ Script>

2) Додаємо в тому місці, де хочемо бачити віджет коментарів (наприклад, після замітки, якщо мова йде про блозі):

<! - Put this div tag to the place, where the Comments block will be -> <div id = "vk_comments"> </ div> <script type = "text / javascript"> VK.Widgets.Comments ( " vk_comments ", {redesign: 1, limit: 10, width:" 665 ", attach:" * "}); </ Script>

І все! Менш, ніж за хвилину ви додали собі коментарі, користуючись усіма вищезгаданими перевагами.

2. Додати віджети з декількох сервісів. Наприклад, як на цьому ресурсі. Переключаються табами:

Додаємо в розмітку (для коректної роботи повинен бути підключений twitter bootstrap!) В місці, де потрібно вивести віджет коментарів:

<Div class = "comments-wrapper"> <ul class = "nav nav-tabs" role = "tablist"> <li role = "presentation" class = "active"> <a href = "# disqus_thread" data-toggle = "tab"> Discuss </a> </ li> <li role = "presentation"> <a href="#vk-comments" data-toggle="tab"> Vkontakte </a> </ li> < / ul> <div class = "tab-content"> <div role = "tabpanel" class = "tab-pane active" id = "disqus_thread"> </ div> <div role = "tabpanel" class = "tab- pane vk-comments "id =" vk-comments "> </ div> </ div> </ div>

Далі найпростіший варіант просто проинициализировать кожен віджет коментарів, використавши відповідні елементи (#disqus_thread, # vk-comments), як в першому прикладі.

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

Цього можна уникнути, реалізувавши ледачу ініціалізацію віджетів коментарів. Спочатку код цілком, потім роз'яснення:

(Function (global, $) { 'use strict'; $ (function () {var $ tabToggler, initComments, initialized; initialized = { '# vk-comments': false, '#disqus_thread': false}; initComments = function (type) {var discussUserName, disqus_config, pageUrl; if (initialized [type]) {return;} pageUrl = 'page_url'; switch (type) {case '#disqus_thread': // You need to set this params using your platform's appropriate way discussUserName = 'discussUserName'; disqus_config = function () {this.page.url = pageUrl; return this.page.identifier = 'page_identifier';}; (function () {var d, s; d = document; s = d.createElement ( 'script'); s.src = "//" + discussUserName + ".disqus.com / embed.js"; s.setAttribute ( 'data-timestamp', + new Date ()); return (d.head || d.body) .appendChild (s);}) (); break; case '# vk-comments': VK.Widgets.Comments ( "vk-comments", {limit: 5, attach: "*", pageUrl: pageUrl}); break; default: return;} initialized [type] = true;}; $ tabToggler = $ ( '. comments-wrapper a [data-toggle = "tab"]'); $ tabToggl er.on ( 'shown.bs.tab', function (e) {initComments ($ (e.target) .attr ( "href")); }); initComments ($ tabToggler.closest ( '. active'). find ( 'a [data-toggle = "tab"]'). attr ( 'href')); }); }) (Window, jQuery);

Зверніть увагу на змінні, значення яких ви повинні підготувати за допомогою методів, що надаються вашою платформою.

Для початку створюємо маппинг типів віджетів коментарів, змінна initialized. Далі, функція initComments (type) дозволяє форматувати віджет коментаря, причому вона нічого не робить, якщо він вже був инициализирован.

Далі підписуємося на перемикання табів і викликаємо функцію ініціалізації обраного типу коментарів.

І останній штрих - инициализируем дефолтний віджет коментарів, щоб він відобразився відразу після завантаження сторінки.

Готовий скрипт на js і coffeescript на gist. Приклад роботи - внизу (приклади коду взяті з цього сайту)

Js?

Разработка сайта для Вашего бизнеса. Веб дизайн. Дизайн логотипа, фирменного стиля, рекламная фотография . Комплексный рекламный креатив.