Сейчас стало модным заменять привычную систему комментариев 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.

В данном уроке я расскажу о том, как делаются комментарии в 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) Для реализации многострочных комментариев используются символы: /* и */. Такой вариант полезен, если комментарий занимает несколько строк.

Таким образом, мы научились делать

Здравствуйте, друзья и гости блога! Сегодня расскажу при помощи PHP и MySQL. А также мы с вами поговорим о системах комментирования для сайта и выберем из предложенных мной лучшую для вашего сайта.

Вопрос первый : с помощью PHP и MySQL ?

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

id — это уникальный идентификатор.
page_id — в этом поле будет хранится идентификатор страницы сайта, на которой располагается данный комментарий.
name — это имя того комментатора, который оставил данный комментарий.
text_comment — соответственно это текст текущего комментария.

Следующим этапом, после создания таблицы для комментариев в базе данных, нам нужно внедрить специальный код для наших будущих комментариев на сайт. Этот код на сайте позволит нашим комментаторам добавить свои комментарии к нашим статьям. Вот этот код:

Ваше имя:

Ваш комментарий:

Это простая HTML форма комментариев для сайта. Вы ее располагаете на своем сайте в том месте, где это удобно для оставления комментария к посту — естественно под самим постом.

Последний шаг в создании формы комментариев для сайта на PHP и MySQL — Делаем вывод наших комментариев на странице сайта. Вот код для этого:

Вот и все! Наша простая форма комментариев ля сайта создана и может работать на сайте.

Но это конечно не для новичка, который не станет копаться со всеми этими кодами HTML, PHP и MySQL. Также не станет изучать, как создать базу данных. Ему нужно все сразу, быстро и без головной боли. Я прав? Конечно прав!

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

Системы комментариев для сайта. Какую выбрать?

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

С помощью комментариев на сайте повышаются позиции сайта в поисковой выдаче, улучшаются поведенческие факторы, растет трафик на сайт, а следственно и увеличивается ваш заработок. Вот видите, как важны комментарии для сайта!

Поэтому давайте рассмотрим как сделать комментарии на сайте и какую систему комментирования выбрать, как наиболее оптимальный вариант?

Вообще комментарии на сайтах выводятся многими способами. Это и специальные плагины для wordpress движков и комментарии от социальных сетей всевозможные, такие как например Вконтакте , Facebook , Disqus . Также есть независимые сервисы, которые предлагают свои системы комментариев для сайта, например .

Я сейчас вам приведу одну табличку, которая сразу расставит все на свои места и вопросов уже не возникнет по поводу выбора системы комментариев для сайта:

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

На этот раз мы делаем простую AJAX систему добавления комментариев. Этот позволит продемонстрировать, как добиться эффективного взаимодействия между JQuery и PHP / MySQL с помощью JSON. Система работает таким образом, что добавляемые комментарии помещаются на страницу без её полной перезагрузки, давая ощущение работы сайта только на компьютере пользователя, тем самым избегая необходимости ждать некоторое время, необходимое для повторной загрузки страницы с добавленным комментарием.

Вот примерная демонстрация того, что мы планируем реализовать:

Шаг 1 - XHTML

Во-первых, давайте взглянем на разметку комментариев. Этот код генерируется PHP в комментарии, который мы собираемся посмотреть в одно мгновение.

Demo.php Имя 30 июля 2010

Комментарий

В Div-е класса avatar содержиться гиперссылка соответсвенно с аватаром (если пользователь указал действительную ссылку на аватар при отправке комментария), допустим из gravatar.com. Ну мы еще вернемся к этому когда будем работать с PHP. Наконец, у нас есть имя и время также в DIV-ах, а также комментарий то есть сам текст в параграфе.

Другим важным элементом в части XHTML является сама форма отправки комментария (все поля, кроме поля URL обязательны для заполнения).

Demo.php

Добавить комментарий

Ваше имя? Вашь Email? Ваш аватар? (не обязательно) Что вы хотели сказать?

Шаг 2 - PHP

PHP обрабатывает связи с базой данных MySQL и создает разметку комментарий. Кроме того, на приёме в конце стоит AJAX и вставляет комментарий в таблицу комментариев. Вы можете увидеть код, который выводит комментарии к странице, ниже.

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 с объектом класса комментарий, который вы видите ниже. Этот массив выводится после выполнения скрипта.

Demo.php /* / Выводим комментарии один за другим */ foreach($comments as $c){ echo $c->markup(); }

Каждый комментарий имеет markup() метод, который генерирует HTML код для печати страницы. Вы можете увидеть этотот метод и класс ниже.

Класс принимает строку из базы данных (fetched with 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 = ""; if($d["url"]){ // Если человек заполнил URL при //добавлении комментария // Определяем гиперссылку $link_open = ""; $link_close = ""; } // Преобразование времени $d["dt"] = strtotime($d["dt"]); // Необходим для изображений Gravatar по умолчанию: $url = "http://".dirname($_SERVER["SERVER_NAME"]. $_SERVER["REQUEST_URI"])."/img/default_avatar.gif"; return " ".$link_open." ".$link_close." ".$link_open.$d["name"]. $link_close." 1, "html"=>$insertedComment->markup())); } else { /* Вывод сообщений об ошибках */ echo "{"status":0,"errors":". json_encode($arr)."}"; }

submit.php получает данные комментария в виде запроса AJAX. Она проверяет его и выдает JSON объект либо разметки XHTML который успешно выведен, или список сообщений об ошибках. JQuery использует статус собственности определить, следует отображать сообщения об ошибках или добавить комментарий разметки страницы.

Вы можете увидеть два примера ниже.

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

В этой заметке вы узнаете один из самый простых (но, субъективно, один из наиболее предпочтительных) способов добавить комментарии на сайт - простой пример для новичков + варианты для более продвинутых веб-мастеров.

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

Но прежде чем перейдем к непосредственно внедрению, давайте рассмотрим преимущества/недостатки использования готовых решений. (Если о чем забыл - пишите в комментах - расширим список)

Преимущества сторонних решений:

• Простота в реализации.
• Защищенность от спама "с коробки" (в своем решении пришлось бы это дополнительно реализовать, так что, теоретически, связано с предыдущим пунктом).
• В меньшей степени подвержено ошибкам, багам и т.д., так как сторонние решения проверили миллионы пользователей (опять связано с первым: вы тоже можете написать все без багов, но уйдет дополнительное время на отладку).
• Как правило, сервисы предоставляют готовую админку, статистику, уведомления для админов, иногда модерацию, несколько админов, премодерацию и т.д., на реализацию чего у веб-мастера, особенно начинающего, могут уйти месяцы, если не годы.
• Пользователю не нужно регистрироваться, вводить свое имя и т. д. - предполагается, что у него уже есть аккаунт в популярной соцсети.
• Скорее всего, выдержит большую нагрузку из-за того, что соц. платформы изначально рассчитаны на большие нагрузки.

Недостатки:

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

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

Но довольно теории, перейдем к практике.

1. Простейший вариант - добавить комментарии с использованием какой-то выбранной соцсети.

Например, vk. Смотрим документацию . Копируем предоставленный код, и добавляем на странице (куски кода взяты с доки по ссылке, в будущем может поменяться, так что всегда копируйте с сайта с документацией. Здесь только возможный пример):

1) Добавляем в :

VK.init({apiId: 2951023, onlyWidgets: true});

2) Добавляем в том месте, где хотим видеть виджет комментариев (например, после заметки, если речь идет о блоге):

VK.Widgets.Comments("vk_comments", {redesign: 1, limit: 10, width: "665", attach: "*"});

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

Добавляем в разметку (для корректной работы должен быть подключен twitter bootstrap!) в месте, где нужно вывести виджет комментариев :

• Discuss
• Vkontakte

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

Этого можно избежать, реализовав ленивую инициализацию виджетов комментариев . Сначала код целиком, потом разъяснение:

(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) { 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 = true; }; $tabToggler = $(".comments-wrapper a"); $tabToggler.on("shown.bs.tab", function(e) { initComments($(e.target).attr("href")); }); initComments($tabToggler.closest(".active").find("a").attr("href")); }); })(window, jQuery);

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

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

И последний штрих - инициализируем дефолтный виджет комментариев, чтобы он отобразился сразу после загрузки страницы.

Готовый скрипт на и coffeescript на gist. Пример работы - внизу (примеры кода взяты с этого сайта)

Обслуживание