cyberflow_gravatar

Cyberflow

I am linux system administrator.


Navigation
» Home
» Categories
» Code
» XML Feed

Добавление Facebook комментариев к Octopress

20 Mar 2013 » jekyll

В этой небольшой статья я опишу как добавить комментарии facebook к блогу на octopress. В octopress есть поддержка комментариев с использованием disqus, но мне ближе facebook.

Для начала необходимо зарегистрировать приложение на facebook для своего блога. Когда регистрация пройдена facebook должен выдать app id. Теперь можно приступить к настройке. Добавим facebook app id и параметры отображения комментариев в файл конфигурации _config.yml

_config.yml

# Facebook comments
facebook:
appid: 222612811167194
num_post: 5
width: 789
colorscheme: light

Следующим шагом добавим facebook javascript API на нашу страницу. Для этого можно воспользоваться уже имеющимся в octopress функционалом facebook like. И так, открываем siurce/_includes/facebook_like.html и меняем строчку содержащую js.src= заменив в ней цифры на app id полученный от facebook.

js.src = "//connect.facebook.net/en_US/all.js#appId=222612811167194&xfbml=1";

Теперь переходим к добавлению комментариев на страницы блога. Создаём файл source/_includes/post/facebook_comments.html и добавляем в него следующее:

facebook_comments.html

<noscript>Please enable JavaScript to view the comments powered by facebook</a></noscript>
<div
class="fb-comments"
data-href="{{ site.url }}{{ page.url }}"
data-num-posts="{{ site.facebook.num_post }}"
data-width="{{ site.facebook.width }}"
data-colorscheme="{{ site.facebook.colorscheme }}" ></div>

Этот шаблон теперь можно вставлять в любое место блога, где вам хочется добавить комментарии. Осталось добавить их в посты и страницы блога. Страницы и посты строятся на основе post.html и page.html файлов из директории source/.layouts. ДОбавляем в них следующий код до или после блока кода, отвечающего за комментарии disqus:

{% if site.facebook.appid and page.comments == true %} 
<section>
<h1>Comments</h1>
<div id="facebook_comments" aria-live="polite">
{% include post/facebook_comments.html %}
</div>
</section>
{% endif %}

В целом это всё, что необходимо для добавления комментариев. Однако есть ещ> одна полезная вещь - добавление модерации. Для этого можно добавить следующую строку в файл source/includes/custom/head.html:

{% if site.facebook.appid %}
<meta property="fb:app_id" content="{{ site.facebook.appid }}" />
{% endif %}

Это должно разрешить модерацию всем админ пользователям вашего преложения в facebook.