Как установить на блоге комментарии Facebook без плагина

  Автор:
  6055
Как установить комментарии в Facebook без плагина

Я заметила, что аудитория моего блога делиться на 2 категрии — те у кого блог создан на шаблоне AB-Inspiration и те, у кого блог на обычном шаблоне.

Чтобы никого не обижать я решила открыть рубрику «Фишки без плагинов«. Здесь я рассказываю о встроенном функционале шаблона AB-inspiration и о том как это можно реализовать на обычном шаблоне.

Для любознательных пользователей шаблона AB-Inspiration будет интересно, как этот функционал реализован в шаблоне, а для тех у кого блог на обычном шаблоне, смогут реализовать фишки самостоятельно. :)

Сегодня, продолжим тему как установить комментарии социальных сетей на блог (Коментарии facebook и Виджет комментариев Вконтакте), а также отслеживать комментарии Facebook и отслеживать комментарии Вконтакте.

Сегодня я покажу как настроить и установить комментарии в Фейсбук.

Так же как и комментарии Вконтакте, комментарии в Фейсбук помогут распространять Ваши статьи в социальной сети Фейсбук и привлекать больше посетителей на Ваш блог.

В шаблоне AB-Inspiration уже встроены комментарии Facebook и отображаются в конце каждой статьи. Чтобы комментарии в Фейсбук появились на блоге пользователям шаблона AB-Inspiration нужно:

1. вставить ID приложения Facebook в «Настройках шаблона» в разделе «Вставки»

Снимок экрана 2014-10-31 в 8.37.01

2. в разделе «Настройка статей» выбрать как будут отображаться комментарии — в виде вкладок или подряд.

Снимок экрана 2014-10-30 в 21.31.38

Для всех других шаблонов, необходимо установить код комментариев фейсбук.

Регистрация приложения Facebook

1. Зайдите в фейсбук под своим логином и паролем

2. Перейдите по ссылке http://developers.facebook.com/

3. Выберите в меню «Apps» — «Add New App»

commentsfb

4. Во всплывшем окне выберите значок «WWW» — вебсайт

facebookcomments

5. В поле впишите название приложения (можно просто название блога) и нажмите на кнопку «Create New Facebook App ID»

fbcomments1

6. Во всплывшем окне выберите категорию и нажмите на кнопку «Create App ID»

fbcomments3

7. Спуститесь ниже на странице, в поле Site URL пропишите адрес Вашего блога и нажмите «Далее»

fbcomments2

 

8. Далее на странице скопируйте номер ID Вашего приложения. Сохраните этот ID. Он нам пригодиться в следующем шаге.

fbcomments4

Все, регистрация приложения завершена.

Код комментариев Facebook

Код делиться на 2 части.

1-ю часть нужно вставить в файл header.php сразу после открывающего тега body.

2-ю часть нужно вставить там, где Вы хотите, чтобы отображались комментарии. Обычно в конце каждой статьи. За вывод отдельной статьи отвечает файл single.php.

В примерах я даю адаптированный код под WordPress. В первой части включена асинхронная загрузка. Во второй части ссылка в виде функции  WordPress get_the_permalink();. Эта функция динамически подставляет адрес статьи.

 

Вставка кода в header.php 


<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.async=true;
js.src = "//connect.facebook.net/ru_RU/sdk.js#xfbml=1&appId=XXXXXXXXXXXXXXX&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

1. Скопируйте код
2. Зайдите в админку блога — Внешний вид — Редактор
3. Откройте файл header.php для редактирования
4. Вставьте код сразу после тега <body>
5. Вместо XXXXXXXXXXXXXXX, вставьте Ваш ID Приложения в Фейсбук, который Вы скопировали в предыдущем шаге

Вставка кода в single.php 


<div class="fb-comments" data-href="<?php get_the_permalink(); ?>" data-num-posts="20" data-width="585"></div>

1. Здесь Вы можете заменить:
data-num-posts=»20″ — количество комментариев на странице
data-width=»585″ — ширина блока комментариев

2. Скопируйте этот код
3. Зайдите в админку — Внешний вид — Редактор
4. Откройте файл single.php для редактирования
5. Вставьте код до или после функции comments_template();

Подробно о вставке кода в single.php я написала в предыдущей статье Как установить на блоге Комментарии Вконтакте без плагина

Все готово! Теперь можно посмотреть, что у нас получилось. Откройте блог, перейдите на страницу со статьей. В конце статьи должна появиться форма для отправки комментариев Фейсбук.

Снимок экрана 2014-10-31 в 9.28.54

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

Предыдущие статьи на тему «Фишки без плагинов»:

Как установить на блоге комментарии Facebook без плагина

   2 голоса
Средняя оценка: 5 из 5
Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже:
Самые Важные Оповещения Блога + Четкий Комплект Ценных Подарков ДЛЯ БЛОГЕРОВ И ФРИЛАНСЕРОВ
Оставьте свой комментарий:
27 комментариев
  1. Здравствуйте! Читая статью думал, что вот она та самая супер статья со скриншотами. Но когда дело дошло до вставки плагина начались проблемы. Пункт 2, Зайдите в админку блога — Внешний вид — Редактор: У меня нет такого слова Редактор. Только Настроить есть.

    Пункт третий, Откройте файл header.php для редактирования. И как его открывать ? Без понятия вообще

  2. Не получилось ничего по вашей ссылке. Видимо платное уже стало…. Дизайн страницы Фейсбука совсем другой. Очень жаль…

  3. Иван

    Спасибо за полезную статью !!! Успехов Вам )

на Блоге
в Фейсбук
в Вконтакте