123

Материалы

Подключаем социальные комментарии Facebook

Печать
3.6 1 1 1 1 1 1 1 1 1 1 Rating 3.60 (5 Votes)
Создано 16.08.2012

 

Данная статья предполагает, что у Вас уже есть аккаунт в социальной сети Facebook.

Шаг 1. Получаем Facebook App ID

Сперва Вам необходимо зарегистрировать Ваш сайт как Facebook приложение и получить для него application id, который Вам пригодится в дальнейшем.

Для этого переходим на страницу Разработчики Facebook и нажимаем на кнопку Создать новое приложение в правом верхнем углу:

Появится новое окно:

  • App Name - имя приложения, содержащее от 3х до 32х символов включительно. Имя не должно нарушать ничьих авторских прав, иначе Facebook может удалить Ваше приложение в угоду правообладателю;
  • App Namespace - короткое имя (без пробелов и специальных знаков), может использоваться в различных целях: для действий Open Graph , а также при размещении прямой ссылки на Ваше приложение: http://apps.facebook.com/namespace;
  • Web Hosting - бесплатный вебхостинг, рекомендуемый социальной сетью Facebook. Лично я много лет успешно использую платный хостинг от RU-CENTER (рекомендую), на котором в настоящее время размещен этот сайт.

 

Введя всю необходимую информацию, нажимаете на кнопку продолжить, и видите новое окно, в котором Вам необходимо пройти проверку безопасности:

Итак, когда проверка безопасности будет пройдена, Вы увидите новое окно:


В данном окне Вам необходимо дозаполнить два поля:

  • App Domains - разрешить авторизацию на указанных доменах и из поддоменах, ("example.com" будет разрешать авторизацию для всех поддоменов *.example.com). Здесь пишете основное доменое имя Вашего сайта, по которому приходят посетители.
  • Site URL - основной адрес Вашего сайта, используется Facebook в целях безопасности.

 

Остальные настройки можете не трогать, или предлагаю разобраться с ними самостоятельно.

Нажимаете Сохранить изменения.

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

В верхней части упомянутого выше окна Вы увидите необходимый нам App ID (Application ID), который мы будем использовать на следующем шаге:

Шаг 2. Добавляем социальные комментарии Facebook на сайт

Для получения соответствующего кода, который нужно размещестить на Вашем сайте, перейдите по следующей ссылке.

Там Вы увидите форму:

где:

  • URL to comment on - основной адрес сайта, где Вы будете размещать комментарии;
  • Number of posts - количество последних комментариев, показанных по-умолчанию (сразу на странице);
  • Width - ширина окна комментариев на странице;
  • Color scheme - цветовая схема оформления окна комментариев: ligth - светлая или dark - темная.

После выбора соответствующих Вашему сайту настроек нажимаете на кнопку Get code. Появится окно:

В данном окне представлены два блока кода: 1 и 2.

Первый код Вы должны вставить в код каждой страницы Вашего сайта (или в главный файл шаблона сайта, если Вы используете CMS) сразу после тега <body>.

После этого кода рекомендую вставить еще две строки:

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

 

где вместо {YOUR_APPLICATION_ID}вставляете Ваш App Id, полученный ранее, а вместо {YOUR_FACEBOOK_USER_ID} вставляете Ваш уникальный идентификатор пользователя Facebook.

Второй код вставляется в любую страницу Вашего сайта, в том месте, где необходимо выводить комментарии.

Шаг 3. Альтернативный код для вставки комментариев на сайт.

Пропускаете Шаг 2. В нужное место для вывода комментариев на странице вставляете:

<script src="http://connect.facebook.net/ru-RU/all.js#xfbml=1"></script><fb:comments href="{LINK}" num_posts="{NUM_POSTS}" width="{COMENTS_WIDTH}" colorscheme="{COLOR_SCHEME}" notify="true"></fb:comments>

где:

{LINK} - адрес страницы Вашего сайта, на которую добавляете код;

{NUM_POSTS} - количество последних комментариев, показанных по-умолчанию (сразу на странице);

{COMMENTS_WIDTH} - ширина окна комментариев на странице;

{COLOR_SCHEME} -цветовая схема оформления окна комментариев: ligth - светлая или dark - темная.
 

Comments:

Комментарии   

Fostik
0 # Как вы это сделали?Fostik 06.07.2013 11:48
Здравствуйте, подскажите пожалуйста как вы совместили все комментарии в разные вкладки? Есть какой-то плагин?
Ответить | Ответить с цитатой | Цитировать
Super User
+1 # Плагин называется SocCommentsSuper User 06.07.2013 14:34
Плагин называется SocComments
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий


Защитный код
Обновить

Обсудить на форуме (комментариев 14).

 

feed-image

для детей старше шести лет