Как поставить комментарии Facebook на свой сайт

Сайт дня (как попасть): Скачивайте отличные торренты на сайте TorrentsTime.ru!

Дорогие друзья, в сегодняшней статье я расскажу о том, как добавить систему комментариев Facebook на свой сайт.

Как вы знаете, социальная сеть Facebook активно развивается как в англоязычном интернете, так и в рунете. Установка комментариев Facebook на свой сайт позволяет посетителям, залогиненным в Фейсбуке, легко комментировать материалы вашего ресурса без заполнения имени, адреса сайта и e-mail'а, а также избавляет их от ввода проверочного кода (капчи). Комментарии делаются в один клик.

Недавно я установил комментарии от Facebook на свой блог shakin.ru (в дополнение к комментариям Вконтакте). Что могу сказать - эффектом я доволен. Посетители стали активнее комментировать, с Facebook стало больше переходов, и количество друзей в этой социальной сети стало расти более динамично.

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

Одно из преимуществ комментариев Facebook - в них практически нет спама.

У комментариев Facebook есть еще один плюс (как и у комментариев Вконтакте) - по умолчанию у каждого комментария установлена галочка «В Facebook», то есть комментарий появляется в аккаунте пользователя, который его оставил. А это внешняя ссылка на ваш сайт. Хоть она и не прямая, но это так называемый «социальный сигнал», которые поисковики все активнее учитывают при ранжировании сайтов.

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

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

Сразу скажу, что система комментариев FB предоставляет возможность просматривать сразу все комментарии, оставленные на вашем сайте, а также модерировать их.

У комментариев Facebook (как и у комментариев Вконтакте) есть один минус (впрочем, для меня он несущественный) - комментарии не будут сохраняться в базу данных вашего сайта, все хранится в Facebook. На данный момент я не нашел решений по синхронизации комментариев от Вконтакте и Facebook с базой данных WordPress. Если такие решения найдете, то прошу вас написать об этом в комментариях.

При установке комментариев Facebook я столкнулся с несколькими подводными камнями, но немного попыхтел 😉 и в итоге все заработало. Далее я расскажу, как избежать возможных проблем при установке комментариев Фейсбука и поделюсь своими решениями.

Если вы перейдете на страницу плагина комментариев Facebook, зададите параметры и воспользуетесь предложенным кодом, то в большинстве случаев комментарии у вас работать не будут - будет сообщение об ошибке «Внимание: нет доступа к ...» и вы не сможете их модерировать.

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

Естественно, для того, чтобы это сделать, у вас уже должен быть аккаунт в Facebook.com и вы должны быть в нем залогинены.

План действий такой.

1. Получаем идентификатор пользователя Facebook (Facebook User ID).

2. Получаем идентификатор приложения Facebook (Facebook Application ID).

3. Добавляем комментарии Facebook на свой сайт.

4. Модерируем комментарии.

1. Получаем идентификатор пользователя Facebook (Facebook User ID)

Идем на страницу плагина комментариев Facebook и прокручиваем страницу вниз до пункта «Moderation tools» (Инструменты для модерации).

В нем нам на каком-то непонятном языке 😉 сообщают, что для того, чтобы модерировать комментарии Facebook, нам нужно в шаблоне нашего сайта (между <head> и </head>) поместить вот такой код:

<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}"/>

Под страшными словами «{YOUR_FACEBOOK_USER_ID}» кроется наш пользовательский ID в Facebook.

Как же получить этот самый Facebook User ID?

По умолчанию, аккаунты пользователей в Facebook имеют адрес вида:

https://www.facebook.com/profile.php?id=100000550459738

Так вот, цифры после знака «равно» и будут вашим пользовательским ID в Facebook.

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

https://www.facebook.com/shakin.ru

Я спрашиваю, что делать? Ладно, надо успокоиться и перестать кричать 😉 .

А делать нужно вот что. Заходите на свой аккаунт в Facebook. В его адресе после facebook/ копируете название своего аккаунта (у меня это будет «shakin.ru»)/ Чтобы никто не ошибся, еще раз покажу. Допустим, у вас аккаунт имеет такой адрес:

https://www.facebook.com/shakin.ru

В нем копируете «хвостик», то есть shakin.ru.

Далее нам нужно вставить скопированный «хвостик» в конец вот этой ссылки:

🔥 Кстати! Я провожу платный курс по продвижению англоязычных сайтов SEO Шаолинь. Если интересует, можете подать заявку на его сайте seoshaolin.com. Для своих читателей делаю хорошую скидку.

Приглашаю вас подписаться на мои каналы в Telegram:

@shakinru - продвижение в рунете.
@burzhunet - англоязычное SEO.

https://graph.facebook.com/shakin.ru

Естественно, у вас должна получиться такая ссылка:

https://graph.facebook.com/ваш_хвостик

В итоге по полученной ссылке вы найдете вот такую информацию, в которой и будет заветный Facebook User ID 🙂 , для наглядности на скриншоте я выделил свой ID:

Итак, у нас есть наш пользовательский ID в Facebook. Теперь мы смело вставляем его в предложенный на Facebook код:

<meta property="fb:admins" content="100000550459738"/>

Я привел свой, у вас будет свой. Если вам нужно назначить нескольких модераторов для комментариев Facebook, то просто напишите их ID в указанном коде через запятые.

2. Получаем идентификатор приложения Facebook (Facebook Application ID)

Еще нам будет нужен идентификатор приложения Facebook (этот код приводится вторым на той же странице плагина комментариев Facebook):

<meta property="fb:app_id" content="{YOUR_APPLICATION_ID}"/>

Как вы уже поняли, «{YOUR_APPLICATION_ID}» - это ID нашего приложения для комментариев.

Чтобы получить Facebook Application ID, переходим по этому адресу: https://developers.facebook.com/setup

Facebook спросит у нас разрешение, разрешаем:

На следующей странице нажмем на кнопку «Создать новое приложение»:

В появившемся откуда ни возьмись окне 🙂 пишем название нашего приложения, например, «Комментарии», и жмем «Продолжить»:

Далее вас может ожидать проверочный код 🙂 . Как думаете, я правильно его ввел?

Да, все получилось. Но тут мы видим, что нашу учетную запись в Facebook нужно проверить. Хм, печалька 🙂 :

Ну что делать. Надо - так надо. Мы приличные благовоспитанные люди 😉 , а не спамеры какие, нам бояться нечего. Кликаем по предложенной ссылке, вводим свой номер телефона и подтверждаем подлинность своего аккаунта с помощью присланного по sms кода.

Далее нам нужно заново проделать шаги по созданию нового приложения Facebook. Сразу переходите по ссылке https://developers.facebook.com/apps/ и снова жмите кнопку «Создать новое приложение».

Мы увидим такую страницу:

В поле «App Domain» вводим имя домена своего сайта и жмем кнопку Enter, домен получается в синей рамке:

Прокручиваем страницу далее, кликаем на пункте «Сайт», вписываем адрес нашего сайта и жмем кнопку «Сохранить изменения»:

Успели заметить то, что нам нужно? Или увлеклись заполнением информации? Заветный Facebook App ID у нас уже есть:

Возвращаемся к коду, в который нужно поместить App ID:

<meta property="fb:app_id" content="{YOUR_APPLICATION_ID}"/>

Приведу пример своего итогового кода (у вас будут свои цифры):

<meta property="fb:app_id" content="193580224023724"/>

Итак, у нас есть все, что нужно для полного счастья 🙂 - два кода вида:

<meta property="fb:admins" content="100000550459738"/>

<meta property="fb:app_id" content="193580224023724"/>

Нам их нужно поместить в шаблон сайта между <head> и </head>.

Если у вас блог на WordPress, то в папке с темой вашего блога (wp-content/themes/ваша_тема) открываем файл header.php и между и вставляем предложенный код (не забывайте, что цифры у вас будут свои!).

Если у вас сайт работает на движке Data Life Engine, то в папке с шаблоном вашего сайта (templates/ваш_шаблон) находим файл main.tpl и между и вставляем вышеупомянутый код.

3. Добавляем комментарии Facebook на свой сайт

На той же странице плагина комментариев Facebook в предложенной форме заполняем информацию:

URL to comment on (Адрес сайта для комментирования) - указываем адрес сайта;

Number of posts (Количество комментариев) - указываем, столько комментариев должно выводиться по умолчанию. Список остальных можно будет раскрыть. Я указал 5.

Width (Ширина) - задаем ширину формы с комментариями. Для своего блога я выставил ширину в 530 пикселей.

Color scheme (Цветовая схема) - я оставил светлую (Light). Можете попробовать черную, она будет выглядеть вот так:

После заполнения информации кликаем на кнопке Get code (Получить код).

Появится всплывающее окно. Копируем код из первого поля.

По умолчанию, если бы мы не проделали предыдущих шагов по получению идентификаторов, нам бы предложили такой код:

После получения App ID код уже содержит идентификатор:

Затем скопированный код нужно вставить в шаблон нашего сайта сразу после открывающегося тега <body>.

Как я писал выше, для блогов WordPress вставляйте этот код в файл header.php, для Data Life Engine - в файл main.tpl.

С кодом из второго поля не все так просто, как может показаться 🙂 . Тут таится одна загвоздка. Нам предлагается такой код, который нужно вставить в шаблон страниц, на которых будут выводиться комментарии:

Если просто скопировать и вставить предложенный код, то на вашем сайте появятся комментарии Facebook, но в них будет вот такое сообщение и комментарии не будут работать:

«Внимание: нет доступа к ...»

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

Решение для WordPress

Для WordPress вместо адреса сайта используем вот такой код:

<?php the_permalink(); ?>

Итоговый код для вставки комментариев Facebook на блог WordPress выглядит так (рабочий код с shakin.ru):

<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-num-posts="5" data-width="530"></div>

Решение для Data Life Engine

В DLE вместо адреса сайта нужно использовать такой код:

{full-link}

Финальный код для вставки системы комментариев Facebook на сайт на Data Life Engine будет таким (работоспособность кода я проверил):

<div class="fb-comments" data-href="{full-link}" data-num-posts="5" data-width="530"></div>

Для блогов на WordPress вставляйте этот код в файл single.php (если его нет - в index.php), для Data Life Engine - в файл main.tpl.

В результате на страницах вашего сайта появятся комментарии от Facebook.

4. Модерация комментариев Facebook

Нам еще нужна возможность администрирования! Вдруг какие злодеи или тролли захотят оставить какой-нибудь гадкий комментарий! Я лично такие пропалываю, как сорняки на огороде 🙂 .

Да, без администрирования комментариев никак нельзя. Благо в Facebook об этом позаботились.

После того, как вы поместите вышеприведенные коды на ваш сайт, в форме комментариев Facebook вы увидите, что появился пункт «Интерфейс модератора»:

Под каждым комментарием будет возможность его модерировать:

Но тут я чувствую, как у вас назревает логичный вопрос: «Тут показываются комментарии только к одной странице. Мне что, нужно просматривать все страницы своего сайта, чтобы модерировать комментарии?»

Никаких ненужных телодвижений при модерации комментариев Facebook делать не придется.

Переходим по этой ссылке: https://developers.facebook.com/tools/comments

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

Если Вас интересует привлечение посетителей с социальных сетей, то можете почитать мои лучшие посты на эту тему:

Статьи о Google+:

Как добавить кнопку Google +1 на свой сайт

Как сделать страницу Google+ для своего сайта

Статьи о Вконтакте:

Как добавить Вконтакте на свой сайт

Как поставить комментарии Вконтакте на свой сайт

Статьи о Facebook:

Как добавить Facebook на свой сайт

Отличный способ увеличить число друзей в Facebook

Статьи о социальных кнопках:

Как добавить кнопки социальных сервисов на свой блог