Как установить комментарии 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 Responses to Как установить комментарии Facebook на свой сайт

  1. Иван пишет:

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

  2. Олег пишет:

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

  3. Vksaver пишет:

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

  4. Almaz пишет:

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

  5. Игорь пишет:

    Спасибо!

    Попробую установить.

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

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>