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


В предыдущей статье  мы рассматривали вопрос установки комментариев социальной сети Вконтакте на своем сайте. Теперь на очереди Facebook.

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

  1. Регистрация и получение ID
  2. Получение кода комментариев
  3. Размещение кода на сайте

Шаг 1-й. Регистрация и получение ID

Здесь может возникнуть вопрос: я же уже зарегистрирован, зачем еще раз регистрироваться? Да, но вы зарегистрированы как обычный пользователь, которых миллионы. А нам сейчас надо зарегистрироваться как вебмастеру, по терминологии самого Facebook’а – как разработчику.

Для этого сначала заходите в свой аккаунт. Опускаете страницу до самого упора вниз (если она слишком длинная, то перейдите на другую, например, «Редактировать Профиль»), в футере кликаете по ссылке «Разработчикам»:

Футер FacebookРис.1 (Для увеличения любой картинки — кликните по ней)

Здесь чуть приостановлюсь: дальнейшие действия на протяжении 2-х абзацев описываю без скриншотов — по памяти, если что не так назову или пропущу – не обессудьте, лучше напишите об ошибке в комментариях.

Кликаем по этой ссылке, открывается страница, где надо нажать в правом верхнем углу кнопку Register now. Откроется окно, где вам надо ввести пароль и войти. В появившемся окне надо поставить галочку в чекбоксе, что соглашаетесь с условиями Facebook – тогда активируется кнопка «Продолжить».

Нажимаете на нее, появляется окно, где много всяких настроек. Ничего не трогаете, а нажимаете кнопку «Пропустить» и видите поздравление – теперь вы разработчик Facebook!

Потом в верхнем меню ищите вкладку Apps:

получение ID FacebookРис.2

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

 FacebookРис.3

Вписываем название нашей разработки (я указал сайт и комментарии). Больше я не указывал ничего. Нажимаем кнопку «Продолжить». Появляется окно с капчей, заполняете, нажимаете «Продолжить». Открывается страница:

заполнение таблицыРис.4 (Верхняя часть страницы)

Вот он, нужный нам ID. Здесь еще надо переключатель Sandbox Mode поставить в другое положение – в положение Disabled, чтобы не было ограничений по видимости виджета с комментариями на сайте.

Опускаем страницу вниз до раздела «Как ваше приложение встроено в Facebook?»:

Рис.5

Кликаем по строчке «Website with Facebook Login», она развернется и будет видно окно (как на рис.5), куда надо вписать адрес вашего сайта. Нажимаем «Сохранить изменения»

Все, первый шаг мы сделали, а он – самый трудный. Поздравляю. Переходим ко второму шагу.

Шаг 2-й. Получение кода комментариев

Для этого нам понадобится перейти на вкладку Docs:

получение кодаРис.6

Нажимаем на Docs, у нас откроется страничка с приложениями. В левом меню кликаем по вкладке Social Plugins (самая верхняя), откроется страница с перечнем плагинов. Теперь вам надо найти плагин Comments – в левом меню или в общем списке (он — четвертый). Кликаем по нему, откроется страница, где вам найти вот такую табличку:

таблицаРис.7

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

заполненная таблицаРис.8

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

В конце нажимаем кнопку «Get Code» (Получить код). Откроется окно:

 образец кодаРис.9

В полученном коде уже вписан наш ID, значит, все в порядке – наш сайт будет идентифицирован. Но прежде чем нажать ОК, нам надо скопировать этот код и разместить его на сайте – это уже наш третий шаг.

Шаг 3-й. Размещение кода на сайте

Прежде всего, копируем верхнюю часть кода. Нам предлагается разместить его – и это идеальный вариант – сразу после открывающего тега <body>. Для этого заходим в алминку сайта, в левом меню нажимаем «Внешний вид» — «Редактор» и на открывшейся странице ищем в перечне файлов (справа) файл header.php. Открываем его для редактирования и ищем тег <body>. Вставляем скопированный код сразу после него:

размещение верхней части кода на сайтеРис.10

Обновляем (сохраняем) файл.

Теперь, что касается нижней части кода. Он выглядит вот так:

<div class="fb-comments" data-href="http://www.novichkoff.ru" data-width="620" data-num-posts="10"></div>

Но нам такой код не подойдет, потому что в комментариях на каждой странице будут отображаться комментарии со всего сайта. Думаете, ничего страшного? Тогда представьте, что на вашем кулинарном сайте после статьи о котлетах в комментариях будет написано – «Интересный рецепт, а вот я солю капусту не так…».

Поэтому этот код надо немного доработать, чтобы открывались комментарии, относящиеся к открытой статье.

<div data-href="<?php the_permalink (); ?>" data-width="620" data-num-posts="10" ></div>

Все, что вам надо сделать, это скопировать этот код, перенести его в блокнот и отредактировать: изменить ширину с моих 620 пикселей на свою и установить количество комментариев (у меня стоит 10).

Отредактированный код копируете, открываете файл single.php (или другой, если нет этого) и вставляете его перед строчкой

<?php comments_template (); ?>

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

 размещение второй части кодаРис.11

Видно, что я расположил код между скриптом Вконтакте и указанной строчкой. Посмотрим на сайте, как у нас все это выглядит:

вид комментариев Facebook на сайтеРис. 12

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

P.S. Напомню, что в предыдущей статье (о комментариях Вконтакте) я писал о том, что такие формы способствуют продвижению вашего сайта в поисковых системах. Вы, конечно, можете заниматься продвижением сайта самостоятельно, а можете обратиться к профессионалам, таким как агентство Dreamtag: сделают все быстрее и лучше. Но, естественно, не бесплатно. Выбирать вам.

Похожие записи по этой теме:

5 thoughts on “Как установить комментарии Facebook на свой сайт

  1. Иван

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

    Reply
  2. Олег

    Хорошая статья, спасибо, но что-то пока не получается. Какие-то ошибки выскакивают.

    Reply
  3. Vksaver

    Мне тоже остается только попробовать установить его, и я не сомневаюсь что получится. Спасибо.

    Reply
  4. Almaz

    Благодарю за информацию. Тоже попробую поставить.

    Reply

Оставить комментарий

Your email address will not be published. Required fields are marked *