Як додати Facebook коментарі на WordPress-сайт

Facebook запустив соціальні плагіни для сайтів в 2010 році. Вам усім знайомий щонайменше один із них: кнопка "як", яку можна побачити на безлічі блогів та сайтів в Інтернеті. Сьогодні пропоную поговорити про системі коментарів Facebook та про те, як додати підтримку таких коментарів на ваш сайт. Така система коментування дозволить зареєстрованим користувачам Facebook залишати коментарі на вашому сайті, використовуючи лише свій аккаунт у соціальній мережі.

Переваги коментування за допомогою Facebook

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

Ось деякі з них:

• сповіщення від Facebook про нові "лайки" і коментарі у відповідь на вашому сайті.
• Коментарі, розміщені на сайті, можна публікувати на стіну користувача або сторінки проекту в соціальній мережі в один клік.
• Відповіді на коментар на стіні також відображатимуться і на вашому сайті.
• Авторизація користувачів за допомогою Facebook, а також облікових записів у Yahoo!, AOL та Hotmail.
• Граматичні фільтри (допомога в розстановці пунктуації, прихованні зайвих прогалин, виправленні найчастіших помилок і друкарських помилок тощо).
• персоніфікація, зменшення числа "анонімів" та "тролів" на сайті.

Як ця система працює?

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

Тепер давайте перейдемо до додавання коментарів із цієї соціальної мережі на ваш сайт.

Створюємо додаток для Facebook

Щоб увімкнути форму коментарів Facebook, спочатку треба створити додаток вашого сайту для Facebook. Для цього перейдіть на https://developers.facebook.com/apps/ і створіть там нову програму. Введіть ім'я програми та вкажіть її розташування. Ім'я критично за написанням, т.к. все одно не відображатиметься на самому сайті. Просто переконайтеся, що надалі зможете впізнати "свою" програму, якщо ви плануєте підключити кілька різних сайтів до системи коментування за допомогою Facebook-акаунтів.

Тепер ви побачите Загальні параметри програми. Ви можете змінити ім'я, розташування та деякі інші дані. Оскільки ця програма не буде публікуватися в каталозі додатків (Каталог додатків), інші поля заповнювати цьому етапі зайве. Важливим є поле App ID, його можна знайти у верхній частині сторінки. Вам ID знадобиться, коли додаватимете код віджету до теми оформлення вашого сайту.

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

Також важливо налаштувати URL сайту та вказати доменне ім'я. Для цього клацніть на Сайт у навігаційному блоці ліворуч та введіть повну адресу вашого сайту в поле "адреса веб-сайту". Наприклад: якщо ваш блог знаходиться на , все це і треба вставити в поле"адреса веб-сайту", а somecooldomainname.tld - У полі доменного імені.

Додаємо коментування до вашої теми

Щоб додати коментування, потрібно внести лише 4 рядки коду. Додаємо значення "Ідентифікатор додатка" з вашої програми для Facebook у ваш файл header.php після тега . Просто скопіюйте наведений далі код та замініть "YOUR APP IDзначенням ID для вашої власної програми:

<meta property='fb:app_id' content='YOUR APP ID' />

Ось приклад того, як виглядатиме код для

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<meta property='fb:app_id' content='YOUR APP ID' />
	<title><?php wp_title( '|', true, 'right' ); bloginfo( 'name' ); ?></title>
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
</head>

Створюємо форму для коментарів

Ось код, який вам знадобиться:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="<?php the_permalink(); ?>" width="880"></fb:comments>

Запит JavaScript у другому рядку містить вказівку на локалізацію (en_US). Якщо ви хочете, щоб ваша форма коментування була не англійською, а іншою якоюсь мовою, можете внести зміни до цієї URL-адреси. Наприклад, для російського інтерфейсу форми коментарів використовуйте "http://connect.facebook.net/ru_RU/all.jsЯкщо вас цікавить весь список підтримуваних мов, відкрийте http://connect.facebook.net/ru_RU/all.js у новому вікні та змініть локалізацію на адресу. Якщо локалізація не підтримується, ви побачите повідомлення про помилку.

тег fb: коментарі у третьому рядку вказує, що форма коментарів має відображати коментарі лише для заданої адреси сайту. Використовуючи WordPress-функцію the_permalink(), Ви зможете динамічно призначати правильну URL для кожного нового посту. При використанні постійного URL ви будете бачити одні й самі коментарі для кожного посту та сторінки на сайті.

Вам також потрібно змінити опцію ширина (у пікселях) так, щоб форма коментування підходила до вашого сайту. Ця опція визначає ширину всієї форми коментарів. Є ще одна опція під назвою num_posts. З її допомогою ви можете задати кількість відображених за промовчанням коментарів під кожним записом. Якщо коментарів буде більше, ніж дозволено параметром num_posts, відображатиметься посилання, що дозволяє показати інші, приховані коментарі під постом.

Вказуємо розташування форми для коментарів

Найпростіше налаштовувати файл comments.php. Він для кожної теми сайту свій, тому просто дотримуйтесь загальних основних правил.

Коментарі треба відображати, якщо:

• Пост або сторінка не захищені паролем або захищені, але введено коректний пароль доступу.
• Коментарі дозволені для сайту чи сторінки.

Наприклад, покажу, як було змінено файл comments.php з теми оформлення WordPressTwenty Ten", яка поставляється за замовчуванням:

<div id="comments">
	<?php if ( post_password_required() ) : ?>
	<p class="nopassword"><?php _e( 'This post is password protected. Enter the password to view any comments.', 'twentyten' ); ?></p>
</div>
	<?php return; ?>
	<?php endif; ?>
	<?php if ( comments_open() ) : ?>
<div id="fbcomments">
	<div id="fb-root"></div>
	<script src="http://connect.facebook.net/de_DE/all.js#xfbml=1"></script>
	<fb:comments href="<?php the_permalink(); ?>" width="880"></fb:comments>
</div>
	<?php endif; ?>
	<?php if ( ! comments_open() ) : ?>
	<p><?php _e( 'Comments are closed.', 'twentyten' ); ?></p>
	<?php endif; ?>
</div>

Як бачите, форма коментування відображається тільки якщо немає захисту запису паролем і запис доступний публічно (описано в рядку 9). Якщо коментарі до посту закриті, відображається відповідне попередження.

Що вийшло в результаті

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

Над першим коментарем ви можете побачити повідомлення про помилку, це відбувається тому, що у прикладі форма коментування запущена на локальному веб-сервері: "http://localhost/wordpress/?p=1". Онлайн коментування за допомогою Facebook працює так (вид для адміністратора):

В онлайн-режимі Facebook отримує доступ до сторінки, а адміністратор може модерувати коментарі та змінювати налаштування форми коментування. Усі коментарі можна модерувати на окремій сторінці:  http://developers.facebook.com/tools/comments.

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

В режимі звичайного користувача форма коментарів буде ось такою:

Якщо ви включите режим публікації коментарів на стіну, це буде виглядати так:

Також у рамках коментарів у формі від Facebook можна дозволити авторизацію за допомогою сторонніх сервісів, таких як Yahoo!, AOL або Hotmail, за допомогою яких користувач також зможе авторизуватися та залишити свій коментар:

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

Як увімкнути відображення числа коментарів

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

<iframe src="http://www.facebook.com/plugins/comments.php?href=<?php the_permalink(); ?>&permalink=1" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:130px; height:16px;" allowTransparency="true"></iframe>

Цей код дасть вам звичайний значок коментування як на Facebook, і текстове значення "$n comments" поряд з ним.

От і все. Можливо, ще вам знадобляться ці посилання:

• Більше інформації щодо соціальних плагінів для сайтів від Facebook: http://developers.facebook.com/docs/plugins/
• Налаштування окремої сторінки для модерації коментарів на сайті: http://developers.facebook.com/tools/comments

Джерело: WP.TutsPlus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/