Создай свой сайт - Как установить комментарии Facebook на свой сайт |

Время чтения: 5 мин.

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

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

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

Содержание статьи

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

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

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

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

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

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

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

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

Рис.2

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

Рис.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 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

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

Рис. 12

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

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

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

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

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

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