Як створити простий скрипт для коментарів Проста система коментування за допомогою AJAX. Що нам потрібно від системи коментування

07.09.2020 Цікаве

Наступним кроком ми відкриваємо файл comments.php та шукаємо в ньому функцію виведення коментарів. Виглядає вона так:

< ?php wp_list_comments(); ?>

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

< ?php wp_list_comments("callback=schema_comment"); ?>

Може бути ситуація, коли замість просто варіанта коду буде трохи змінений варіант з вже внесеними параметрами, наприклад:

< ?php wp_list_comments("type=comment&avatar_size=48"); ?>

У такому разі ми через знак & додаємо виклик нашої функції розмітки коментарів callback=schema_comment. Вийде так:

< ?php wp_list_comments("type=comment&avatar_size=48&callback=schema_comment"); ?>

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

< ?php wp_list_comments(array("style" =>"ol", "short_ping" => true, "avatar_size" => 74,)); ?>

Якщо у вас такий варіант, то всередині дужок поруч із усіма параметрами ми вводимо новий. Зрештою отримаємо наступний код.

< ?php wp_list_comments(array("style" =>"ol", "short_ping" => true, "avatar_size" => 74, "callback" => schema_comment,)); ?>

Коли ми розмістили код функції у файлі functions.php, а також трохи змінили код виведення коментарів на сайті у файлі comments.php, можна перевірити роботу мікророзмітки коментарів.

Ознакою правильної розмітки коментарів є їх вкладеність у тіло статті без жодних відступів та прогалин. Кожен коментар повинен відображатися саме всередині статті та бути показаний у валідоторі Яндекса.

Як бачите, коментарі знаходяться усередині тіла статті. Так має бути й у вас.

Також можна вказати пошуковим системам кількість коментарів до кожного запису. Для цього є свій тег - itemprop="commentCount". За аналогією з ранніми діями його потрібно розмістити всередину тега, що відкриває, який обертає функцію виведення кількості коментарів. Ця функція називається:

< ?php comments_number ?>

Можливо повний рядок виведення цієї функції відрізнятиметься, але суть її одна й та сама. Всередині має бути comments_number.

У мене дана функція має наступний повний вигляд разом з тегом, що обертає.

< ?php comments_number("Комментариев пока нет. Будьте первым!","1 Комментарий","Комментариев: %") ?>

Залежно від шаблону потрібно знайти розташування функції. Як правило, все знаходиться у тому ж файлі comments.php. У мене в шаблоні дана функція знаходилася у файлі одиночної запису single.php перед виведенням форми коментарів. Так як у мене функція оберталася текстовим тегом span, то всередині нього я вставляю властивість commentCount.

Звертаємось до валідатора.

Важливо. Обертати потрібно лише кількість коментарів без будь-яких написів і слів. Розмітка приймає лише числа!

Увага: я не автор функцій. Функції автоматичної розмітки коментарів та зображень взяті з сайту http://seo-mayak.com/. Я лише трохи змінив назви+ десь щось трохи відкоригував.

Мікророзмітка шапки сайту (header)

Відкриваємо файл header.php шаблон оформлення і шукаємо тег header. Усередині нього вставляємо:

Itemscope itemtype="http://schema.org/WPHeader"

• Заголовок - itemprop="headline"
• Опис - itemprop="description"

Ось готовий варіант на зображенні.

У валідаторе це відобразиться так.

Мікророзмітка сайдбара (бічної колонки)

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

Register_sidebar(array("name" => __("Область для вставки віджетів у сайдбар", "xmarkup"), "id" => "primary-widget-area", "description" => __("", "xmarkup "), "before_widget" => "", "after_widget" => "", "before_title" => "", "after_title" => "",));

Цікавлять останні 2 рядки (before_title та after_title), які визначають, що буде виводиться перед заголовком віджету та після, відповідно. Як бачимо, у мене вказано, що перед та після буде текстовий тег span. У вас може бути там порожньо або якісь інші теги, наприклад тег блоку div. Якщо порожньо, то рекомендую дописати тег span за аналогією з моїм варіантом і всередині тега (рядок before_title) вказати властивість імені (itemprop="name"). Вийде наступна конструкція:

Register_sidebar(array("name" => __("Область для вставки віджетів у сайдбар", "xmarkup"), "id" => "primary-widget-area", "description" => __("", "xmarkup "), "before_widget" => "", "after_widget" => "", "before_title" => " ", "after_title" => "",));

Залежно від шаблону таких частин коду може бути кілька. Тоді всі частини потрібно буде доопрацювати. Після змін перевіряємо розмітку сайдбару через валідатор Яндекса та має вийде наступна картина.

Залежно від кількості віджетів буде показано відповідну кількість рядків під час перевірки.

Мікророзмітка футера (підвалу)

Відкриваємо файл footer.php та шукаємо загальний блок, який обертає весь вміст підвалу, включаючи копірайти. Усередині тега, що відкриває, розміщуємо тег сутності itemscope itemtype="http://schema.org/WPFooter".

І всередині тега, що відкриває дату копірайту, розміщуємо тег властивості itemprop="copyrightYear".

Дуже важливо, щоб всередині тега copyrightyear була тільки дата у вигляді числа. Жодних сторонніх слів і символів, інакше видаватиме помилку.

У робочому стані у валідиторі бачитимете таке.

Мікророзмітка головного навігаційного меню

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

Код, який виводить меню, міститься у файлі шапки header.php. Заходимо його і шукаємо такий зміст:

< ?php wp_nav_menu(array("theme_location" =>"header-menu-top", "container" => "")); ?>

Рядок може трохи відрізнятися. Головне - знайти рядок, що включає wp_nav_menu. Вона буде обгорнута тегами. У мене та й у більшості інших тем принцип аналогічний. Використовується тег nav. Всередину тега nav, що відкриває, ми і вставляємо тег, який показує сутність даного елемента, а саме головного меню:

Itemscope itemtype="http://schema.org/SiteNavigationElement"

Далі варто зробити так, щоб до кожного посилання в меню додавався атрибут itemprop="url", який вказуватиме, що це посилання. Якщо у вас простий сайт, де кожен пункт меню створений руками, то впровадьте цей атрибут усередину тега кожного посилання. Якщо ж у вас сайт на WordPress і меню формується у файлі functions.php стандартним чином, варто розмістити наступний код в цей же файл, який буде підставляти даний атрибут автоматично до кожного пункту меню.

Function nav($content) ( $pattern = "

Після перевірки будь-якої сторінки (де є меню) у валідаторе Яндекса, ми повинні побачити тег сутності разом зі списком усіх пунктів меню.

Якщо функція для вашого шаблону не спрацює, посилань у валідаторе ви не побачите, а лише сутність.

В останньому випадку краще видалити розмітку з меню, оскільки смислового навантаження вона не несе і інструмент перевірки структурованих даних від Google даватиме попередження.

На цьому основну частину мікророзмітки закінчено. Звичайному блогу (інформаційному сайту) більше нічого не потрібно.

Мікророзмітка адреси (контактних даних)

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

Назва сайту індекс, країна, область, місто назва вулиціТелефон: телефон E-mail: ваша пошта виду назва@сайт.ру

Зауважу, що e-mail на звичайній пошті в даному випадку не доречний. Потрібна пошта типу ім'я@site.ru, тобто пошта на домені.

На цій ноті практику закінчено. Мікророзмітка на вашому WordPress повинна бути впроваджена і бути без жодної помилки, як у яндексі, так і в google.

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

Корисна інформація

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

/***висновок дати публікації запису ***/ /***висновок автора***/ Автор: /***виведення кількості коментарів***/ Коментарів: /***висновок заголовка сторінки***/

/***виведення категорії***/ name; $current_category_link = $cat->cat_ID; )) echo " ".$current_category_name.""; ?>

Також дуже багато запитів на пошту до мене з проблемою усунення помилок, які виникають через впроваджену розмітку hentry в шаблони. Помилки звучать так:

Немає: entry-title
Немає: updated
Відсутня: author

Через що відбувається така ситуація? Все просто - у шаблоні автоматично додається клас henrty, який має на увазі, що мають бути дописані відповідні теги (класи) до заголовка, дати та автора. Можна так і зробити – дописати ці класи. Я не бачу в цьому особливого сенсу, тому що шаблон ми вже розмітили словником schema.org і від мікроформатів henrty нам не буде ніякої користі. Тому, найшвидше і найпростіше буде використовувати невелику функцію, яка видалити цей клас henty з шаблону і google навіть не знайде мікроформати hentry.

//видалення класу hentry start function wph_remove_hentry_class($classes) ( $classes = array_diff($classes, array("hentry")); return $classes; ) add_filter("post_class", "wph_remove_hentry_class"); //видалення класу hentry end

Функцію звичайно додає у файл функцій functions.php. Якщо у вас такі помилки вже були або почали з'являтися, то поступово в міру обходу сторінки вашого сайту роботом мікророзмітки вони почнуть зникати. Якщо їх не було, вони не з'являться.

Є й інший варіант, коли можна помучитися та дописати необхідні теги до висновку заголовка, дати та автора. Тоді гугл знайде цю розмітку і її розпізнаватиме. Якщо ви зважилися на такі дії, тоді вам потрібно знайти php коди виведення заголовка (1), дати (2) та автора (3).

Готові коди з тегами мікроформатів будуть наступні:

Обернувши все в такий спосіб, теж буде нормально.

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

Зроблю все за вас

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

Вартість цієї послуги 1000 рублів.

Розмічу всі основні дані, а саме:

1. Головну сторінку + сторінки архівів та рубрик;
2. Сторінку посту (запису);
3. Звичайну статичну сторінку;
4. Шапку сайту;
5. Підвал;
6. Сайдбар;
7. Навігаційне меню (якщо шаблон не конфліктуватиме);
8. Хлібні крихти + рейтинг (за бажанням + 200 рублів).

Підійде цей варіант персональним блогам, а також інформаційним сайтам. Можу взятися як за движок WordPress, так і за звичайний html сайт. Спочатку нічого робити не буду, тому що спочатку проаналізую ваш шаблон і відповім, чи я зможу взагалі зробити. Можливо, доведеться щось переробляти в шаблоні або доробляти. До кожного індивідуальний підхід.

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

Всі друзі. Сподіваюся, що цей матеріал вам допоміг. У мене не було мети написати тут у 2-х словах, як все зробити. Метою ставив написати найкращий і вичерпний посібник із впровадження розмітки на сайт. Сподіваюся, що це сталося. Ви можете це підтвердити своїми коментарями, лайками та оцінками.

До зустрічі у наступних матеріалах.

З повагою, Костянтине Хмелеве!

У цьому уроці я розповім про те, як робляться коментарі в HTML, CSS, PHP. Коментарі є текстом, який не видно на веб-сторінці. Вони використовуються для різноманітних пояснень, нагадувань, описів для вебмайстрів, що дозволяє структурувати документ. Коментарі незамінні при налагодженні коду дозволяють швидко зорієнтуватися в розмітці веб-сторінки і знайти потрібний блок. Часто коментарі використовуються для налагодження коду HTML. Наприклад, можна тимчасово закоментувати конкретний блок коду, щоб він не виконувався, а в разі потреби легко відновити його.

Коментарі в HTML

У HTML коментарі формуються за допомогою символів:. Таким чином, будь-який текст між цими символами є коментарем. Розглянемо приклад:

Приклад коментарів у HTML

Коментарі в CSS

Коментарі в CSS створюються за допомогою символів: /* та */. Для створення коментаря потрібно просто розмістити код-веб сторінки між цими символами:

/* Початок блоку зі стилями для Body*/ body ( background: #efeded; font-family: Verdana, Helvetica, sans-serif; font-size: 12px; margin: 0px; padding: 0px; ) /* Кінець блоку зі стилями для Body*/

Коментарі в PHP

Коментарі в PHP можуть бути однорядковими та багаторядковими:

1) Однорядкові коментарі в PHP створюються за допомогою символів: //. Досить просто поставити цей символ перед рядком і вона буде закоментована. Такий варіант застосовується в тому випадку, коли коментар складається лише з одного рядка.

2) Для реалізації багаторядкових коментарів використовуються символи: /* та */. Такий варіант корисний, якщо коментар займає кілька рядків.

Таким чином, ми навчилися робити

Крок 1 - XHTML

Спершу подивимося на розмітку коментаря. Цей код генерується PHP з класом Comment .

demo.php

div avatar містить посилання (якщо користувач ввів правильну URL-адресу при розміщенні коментаря) та зображення аватара, яке ми отримуємо з gravatar.com . Ми повернемось до формування розмітки на кроці PHP. На завершення слідують div name div time та текст коментаря.

Іншим важливим елементом XHTML є форма коментаря. Вона відправляється за допомогою POST. Усі поля, крім URL, мають бути заповнені.

demo.php

Форма надсилається за допомогою AJAX. Перевірка виконується у фоновому режимі submit.php. Кожне поле має відповідний елемент label, із встановленим атрибутом for .

Крок 2 - PHP

PHP обробляє комунікацію з базою даних MySQL та генерує розмітку для коментаря. Він також отримує закінчення запиту AJAX і вставляє дані коментаря до таблиці comments.

demo.php

/* / Вибираємо всі коментарі та наповнюємо масив $comments об'єктами */ $comments = array(); $result = mysql_query("SELECT * FROM comments ORDER BY id ASC"); while($row = mysql_fetch_assoc($result)) ( $comments = new Comment($row); )

Запит MySQL вибирає всі записи з таблиці та заповнює масив $commentsоб'єктами класу comment. Цей масив виводиться далі під час виконання скрипта.

demo.php

/* / Висновок коментарів один за одним: */ foreach($comments as $c)( echo $c->markup(); )

Кожен коментар має метод markup(), який генерує правильний HTML-код, готовий для виведення на сторінку. Нижче наведено визначення класу та методу.

Клас отримує рядок з бази даних (одержуваний за допомогою mysql_fetch_assoc()) і зберігає її у змінній $data. Вона доступна лише за методом класу.

comment.class.php - Частина 1

class Comment ( private $data = array(); public function __construct($row) ( /* / Конструктор */ $this->data = $row; ) public function markup() ( /* / Даний метод виводить розмітку XHTML для коментаря */ // Встановлюємо псевдонім, щоб не писати щоразу $this->data: $d = &$this->data; $link_open = ""; $link_close = ""; )( // Якщо був введений URL при додаванні коментаря, // визначаємо теги посилання, що відкриває і закриває $link_open = ""; $link_close = ""; ) // Перетворимо час у формат UNIX: $d["dt"] = strtotime ($d["dt"]); // Потрібно для встановлення зображення за замовчуванням: $url = "http://".dirname($_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"])."/ img/default_avatar.gif"; return " "; }

Скрипт використовує gravatar для представлення аватара у коментарях. Gravatar - це дуже корисний сервіс, який встановлює відповідність аватара з адресою email. Зображення аватара може бути легко отримано за допомогою передачі функцією кодованого md5()вашої адреси електронної пошти на gravatar.com.

Скрипт визначає адресу URL, на якій виконується, та визначає точну адресу зображення default_avatar.gif. Дане зображення передається паралельно з хеш md5, і якщо ніякого аватара не було знайдено для переданої email адреси, то буде виведено альтернативне зображення.

comment.class.php - Частина 2

public static function validate(&$arr) ( /* / Даний метод використовується для перевірки даних, що відправляються через AJAX. / / Він повертає true/false залежно від правильності даних, і наповнює / масив $arr, який передається як параметр або даними або повідомленням про помилку.*/ $errors = array(); $data = array(); ",FILTER_VALIDATE_EMAIL))) ( $errors["email"] = "Будь ласка, введіть правильний Email."; ) if(!($data["url"] = filter_input(INPUT_POST,"url",FILTER_VALIDATE_URL))) ( // Якщо в полі URL був введений неправильний URL, // діємо так, ніби URL не був введений: $url = ""; ) // Використовуємо фільтр зі зворотною функцією: if(!($data["body"] = filter_input(INPUT_POST,"body",FILTER_CALLBACK,array("options"=>"Comment::validate_text")))) ( $errors["body"] = "Будь ласка, введіть текст коментаря."; ) if(!( $data["name"] = filter_input(INPUT_POST,"nam e",FILTER_CALLBACK,array("options"=>"Comment::validate_text")))) ( $errors["name"] = "Будь ласка, введіть ім'я."; ) if(!empty($errors))( // Якщо є помилки, копіюємо масив $errors в $arr: $arr = $errors; return false; ) // Якщо дані введені правильно, підчищаємо дані і копіюємо їх у $arr : foreach($data as $k=>$v)( $arr[$k] = mysql_real_escape_string($v); ) // email повинен бути в нижньому регістрі: $arr["email"] = strtolower(trim($ arr["email"])); return true; )

Метод validate()(також частина класу) визначено як static. Це означає, що його можна викликати безпосередньо за допомогою конструкції Comment::validate()без створення об'єкта класу. Цей метод перевіряє дані, що передаються через AJAX.

Метод використовує нову функцію фільтра, яка стала доступною в PHP 5.2.0. Таким чином ми можемо легко перевірити та відфільтрувати дані, які передаються скрипту. Наприклад, filter_input(INPUT_POST,'url',FILTER_VALIDATE_URL)означає, що ми перевіряємо, чи є $_POST["url"]правильною адресою URL. Якщо це так, то функція повертає значення змінної, інакше вона повертає значення false.

До використання такої функції потрібно було використовувати регулярні вирази для перевірки даних (із залученням серії конструкцій if). Додатковою перевагою є те, що ми отримуємо дані до будь-яких специфічних перетворень.

Також можна задати функцію, яка проводитиме додаткові модифікації даних.

comment.class.php - Частина 3

private static function validate_text($str) ( /* / Цей метод використовується як FILTER_CALLBACK */ if(mb_strlen($str,"utf8"))<1) return false; // Кодируем все специальные символы html (<, >, ", & .. etc) і перетворюємо // символ нового рядка на тег
: $str = nl2br(htmlspecialchars($str)); // Видаляємо всі символи нового рядка, що залишилися $str = str_replace(array(chr(10),chr(13)),"",$str); return $str; )

Останній метод validate_textпередається як зворотна функція у два виклики filter_input. Він перетворює всі спеціальні символи HTML, що ефективно блокує атаки XSS. Також він замінює символи нового рядка тегами
.

submit.php

/* / Даний масив наповнюватиметься або даними, / які передаються в скрипт, / або повідомленнями про помилку. /*/ $arr = array(); $validates = Comment::validate($arr); if($validates) ( /* Все в порядку, вставляємо дані в базу: */ mysql_query(" INSERT INTO comments(name,url,email,body) VALUES (".$arr["name"]."", "".$arr["url"]."", "".$arr["email"]."", "".$arr["body"]."")"); $arr["dt "] = date("r",time()); $arr["id"] = mysql_insert_id(); /* / Дані в $arr підготовлені для запиту mysql, / але нам потрібно робити висновок на екран, тому / готуємо всі елементи в масиві: /*/ $arr = array_map("stripslashes",$arr); $insertedComment = new Comment($arr); "=>1,"html"=>$insertedComment->markup())); ) else ( /* Виведення повідомлень про помилку */ echo "("status":0,"errors":".json_encode($arr ).")"; )

submit.phpотримує коментар із даних через запит AJAX. Перевіряє його та виводить об'єкт JSON, у якому міститься або розмітка XHTML із вставленим коментарем, або список помилок. jQuery використовує властивість statusдля визначення того, що потрібно виводити - або повідомлення про помилки або додавати розмітку коментаря до сторінки.

Нижче наведено два приклади.

Успішна відповідь

( "status": 1, "html": "Html Code Of The Comment Comes Here..." )

Властивість htmlмістить код коментаря.

Відповідь про помилку

( "status": 0, "errors": ( "email": "Виберіть правильну електронну пошту.", "body": "Виберіть повідомлення для електронної пошти.", "name": "Виберіть електронну пошту." ) )

При помилці jQuery проходить циклом по об'єкту помилок і виводить повідомлення поряд з полями, в яких є помилки.

Крок 3 - CSS

Тепер, коли розмітка правильно генерується та відображається на сторінці, ми можемо перейти до завдання стилів.

styles.css - Частина 1

.comment, #addCommentContainer( /* Стиль для коментарів */ padding:12px; width:400px; position:relative; background-color:#fcfcfc; border:1px solid white; color:#888; margin-bottom:25px; / * Закруглені кути і тіні CSS3 */ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; shadow:2px 2px 0 #c2c2c2; box-shadow:2px 2px 0 #c2c2c2; ) .comment .avatar( /* / Аватар позиціонується абсолютно. :absolute;width:50px;background:url("img/default_avatar.gif") no-repeat #fcfcfc; /* Центруємо вертикально: */ margin-top:-25px; top:50%; -moz-box-shadow :1px 1px 0 #c2c2c2;-webkit-box-shadow:1px 1px 0 #c2c2c2;box-shadow:1px 1px 0 #c2c2c2;

div .comment і #addCommentContainer мають однаковий стиль. Використовується кілька правил CSS3 для заокруглення кутів та відображення тіней.

styles.css - Частина 2

.comment .avatar img( display:block; ) .comment .name( font-size:20px; padding-bottom:10px; color:#ccc; ) .comment .date( font-size:10px; padding:6px 0; position:absolute;right:15px;top:10px;color:#bbb; ) .comment p, #addCommentContainer p( font-size:18px; addCommentContainer textarea( /* Стиль для введення */ display:block; border:1px solid #ccc; margin:5px 0 5px; padding:3px; font-size:12px; color:#555; font-family:Arial, Helvetica, sans-serif; ) #addCommentContainer textarea( width:300px; ) label( font-size:10px; ) label span.error( color:red; position:relative; right:-10px; ) #submit( /* Кнопка "Надіслати " */ background-color:#58B9EB; border:1px solid #40A2D4; color:#FFFFFF; cursor:pointer; font-family:"Myriad Pro" -weight:bold;padding:4px;margin-top:5px;-moz-border-radius:4px;-webkit-border-radius:4px; border-radius:4px; ubmit:hover( background-color:#80cdf5; border-color: #52b1e2; )

У другій частині ми задаємо стилі для коментарів та елементів форми. Відзначимо селектор input,який виділяє елементи залежно від атрибуту type.

Крок 4 - jQuery

Тепер перейдемо до jQuery.

script.js

$(document).ready(function()( /* Наступний код виконується тільки після завантаження DOM */ /* Даний прапор запобігає відправці кількох коментарів: */ var working = false; /* Ловимо подію відправки форми: */ $(" #addCommentForm").submit(function(e)( e.preventDefault(); if(working) return false; working = true; $("#submit").val("Working.."); $("span .error").remove(); /* Відправляємо поля форми в submit.php: */ $.post("submit.php",$(this).serialize(),function(msg)( working = false; $ ("#submit").val("Submit"); if(msg.status)( /* / Якщо вставка була успішною, додаємо коментар / нижче останнього на сторінці з ефектом slideDown /*/ $(msg.html).hide ().insertBefore("#addCommentContainer").slideDown(); $("#body").val(""); ) else ( /* / Якщо є помилки, проходимо циклом по об'єкту / msg.errors і виводимо їх на сторінку /*/ $.each(msg.errors,function(k,v)( $("label").append(" "+v+""); )); )), "json"); )); ));

Ми використовуємо виклик функції $(document).ready()яка прив'язує функцію до події. Змінна workingдіє як прапор, який сигналізує про те, що запит AJAX знаходиться в роботі (у такий спосіб запобігається дублювання одного і того ж коментаря).

У зворотній функції для запиту POST AJAX ми перевіряємо властивість status, щоб визначити, чи було успішно вставлено коментар. Якщо так, ми додаємо отриману розмітку на сторінку після останнього коментаря з анімацією slideDown.

Якщо були проблеми, ми виводимо повідомлення про помилки, додаючи span error до відповідного елементу label(атрибут елемента labelмістить idвведення, що має помилку).

Готово!

Висновок

Щоб запустити скрипт на вашому сервері, потрібно створити таблицю comments у базі даних MySQL. Ви можете зробити це за допомогою коду SQL із файлу table.sql, який потрібно ввести на закладці SQL у phpMyAdmin. Потім потрібно встановити параметри з'єднання з базою даних MySQL у файлі connect.php .

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

Коментарі допомагають будувати спільноту

Тепер користувачі приходять до вас не просто щоб прочитати якусь новину або статтю, але ще й для того, щоб її обговорити.

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

Ще років десять тому центрами, навколо яких вирувало все життя, були форуми. Однак у наш час це вже не так зручно та популярно, зараз більшість популярних сайтів працюють у форматі блогів, а спілкування користувачів відбувається у коментарях.

Таким чином, саме коментарі є тим фактором, який відрізняє звичайні сайти від сайтів, які по-справжньому успішні у своїй сфері. Це стосується новинних сайтів, блогів, спільнот за інтересами, часом навіть інтернет-магазинів та різних спеціалізованих сайтів.

Коментарі це зворотний зв'язок та мотивація

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

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

Що нам потрібне від системи коментування?

То якими ж мають бути «правильні» коментарі на сучасному сайті?

• Простими та зрозумілими для читачів.
• Зручними та функціональними для адміністраторів.

Які варіанти є зараз у веб-майстра?

Віджети соціальних мереж

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

Безліч мінусів

Російськомовні сервіси

Російськомовні аналоги часто повністю платні і не можуть похвалитися привабливим дизайном.

SV Kament

Єдиним винятком тут є система SV Kament (svkament.ru) яка повністю безкоштовна і збирає воєдино функціонал різних західних систем коментування, але при цьому орієнтована на російськомовний сегмент.

Давайте коротко розглянемо що ми хотіли бачити у нашій системі коментування.

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

Соціальний логін- значно спрощує реєстрацію та як результат збільшує кількість коментарів. Західні дослідження показують, що використання соціального логіну часом збільшує конверсію більш ніж на 60%.

Оцінка коментарів- по-перше допомагає виділити найцікавіші та найвартісніші коментарі, що вкрай зручно для читачів, а по-друге стимулює користувачів писати цікаві повідомлення.

Робота в реальному часі- Чим зручніше і швидше працює система, тим більше їй користуються і частіше пишуть коментарі.

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

З погляду управління

• Управління прямо на сайті.

• Інформація про користувачів.

• Єдина панель керування коментарями всього сайту.
• Можливість призначати модераторів.
• Простота встановлення.

Також є низка цікавих можливостей у системи SV Kament.

• Соціальні трансляції- дозволяють «повернути» спілкування на ваш сайт із соціальних мереж. Якщо у вас є група в Вконтакті, в якій ви розміщуєте анонси нових статей на сайті, то часто обговорення статей залишається в коментарях до самого запису, і було б чудово транслювати ці коментарі назад на ваш сайт.

• Рейтинг та статус користувачів- дозволяє виділити найактивніших та найпопулярніших відвідувачів, таким чином стимулюючи ваших користувачів частіше заходити, більше спілкуватися та писати повідомлення цікаві іншим людям.

Все й одразу?

Є досить поширена практика розміщувати відразу кілька систем коментування, наприклад, окремо віджет ВКонтакте, окремо Facebook, окремо для всіх інших.

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

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

Якщо ж наша мета – створення спільноти та стимулювання спілкування користувачів, то такий підхід вкрай шкідливий, адже розділяючи коментарі, ми поділяємо і саме спілкування, таким чином замість єдиного діалогу виходить купка не пов'язаних між собою повідомлень.

А якими коментарями ви користуєтеся? Чи вважаєте ви коментарі важливими для вашого сайту, і наскільки зручними та ефективними вважаєте коментарі на своєму сайті?

Наразі стало модним замінювати звичну систему коментарів WordPress на коментарі однієї з найпопулярніших соціальних мереж Facebook. Раніше ми вже публікували, але з того часу пройшло багато часу, і зараз ця процедура помітно спростилася завдяки готовому плагіну WordPress. Тож цього разу все буде набагато простіше.

Як впровадити коментарі Facebook на свій сайт ми розповімо трохи згодом, а для початку спробуємо визначити всі «за» та «проти» такої заміни.

Коментарі з Facebook: «за» та «проти»

До того ж, зникає фактор так званої анонімності. Малоймовірно, що з Facebook додаватимуться спам коментарі, оскільки всі вони прив'язані до реальних облікових записів користувачів.

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

На відміну від інших систем коментарів, наприклад Disqus, коментарі Facebook не синхронізуються з рідними коментарями WordPress. Вони повністю їх замінюють. Якщо у старих записах вже є коментарі WordPress, вони відображатимуться до або після нових коментарів, доданих через форму Facebook.

Ось, мабуть, і всі плюси та мінуси Facebook-коментарів.

Якщо ви ще не передумали встановити їх на своєму сайті WordPress, читайте нижче, як це зробити.

Плагін Facebook Comments для WordPress

Для початку встановимо та активуємо плагін Facebook Commentsі налаштуємо його в меню, що з'явилося в розділі Налаштування → Коментарі Facebook.

Щоб почати використовувати коментарі на сайті, потрібно спочатку створити програму Facebook.

Якщо ви раніше вже створювали програму, то можете використовувати його дані ID прямо зараз. Інакше вам доведеться створити нове на сторінці Facebook Apps:

У панелі керування щойно створеної програми з'явиться його ID, яке потрібно скопіювати та вставити в налаштування плагіна. Але перед цим налаштуйте програму на своєму сайті в "Налаштуваннях" за допомогою кнопки "Add Platform".

З'явиться нове вікно, в якому потрібно клацнути на веб сайті вибрати його як свою платформу.

Так, на сторінці параметрів програми з'явиться новий розділ «Веб-сайт», в якому можна вказати адресу свого сайту.

Збережіть зміни, скопіюйте ID програми та розмістіть його в налаштуваннях плагіна свого сайту.

Якщо ви не розібралися з налаштуванням програми Facebook, то ось ще одна коротка інструкціяанглійською з прикладом для нашого сайту:

Цей плагін Facebook-коментарів має дуже багато параметрів для налаштувань. Стандартні налаштування повинні працювати з більшістю сайтів. Однак їх можна змінити на власний розсуд і зберегти зміни.

Тепер можете протестувати, чи працює нова система коментарів на вашому сайті.

Модерація коментарів

Так як у вас є адмінські права, вам будуть надходити повідомлення про нові коментарі. Ви можете ними керувати та вирішувати, публікувати їх чи ні.

А ще в налаштуваннях можна додати нового модератора:

Сподіваємося, ця інструкція внесла ясність та допомогла вам самостійно встановити коментарі Facebook для вашого сайту не WordPres.