Facebook Comments and Jekyll
Using jekyll with Facebook Comments was not quite as easy as disqus, but in the end you merely need to add some lines to your _layouts/post.html
along with a few other things, here’s what I did:
Facebook Comments account and creation of your sites commenting
First you’ll need to get a Facebook Developer account: developer.facebook.com
then add your site as a new app in Facebook Comments:
developers.facebook.com/docs/plugins/comments
once you have created your app you should be able to locate it in developers.facebook.com/apps once you have located it click on it to go to it’s admin panel, then click “settings”, in here you’ll want to make sure your domain is added to the App Domains, and then click on the “Status and Review” page, in there you can make your app publicly accessible
Jekyll Configuration
Now then when you click the “Get Code” button on the above doc page it will give you two blocks of code, the first of which I make into an include which you can see the one for this blog here:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=978128892233940";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Then add this somewhere after your content block (where YOUR_SITE_NAME is the full domain name of your site):
{% include facebook-like.html %}
{% if page.fbcomments %}
<hr/>
<h4>Comments</h4>
<div class="fb-comments" data-href="http://YOUR_SITE_NAME{{ page.url }}" data-colorscheme="dark" data-num-posts="4" data-width="706"></div>
{% endif %}
Add a meta property with your app_id:
<meta property="fb:app_id" content="978128892233940" />
Now make a post with this line in the YAML front matter:
fbcomments: yes
and you should be good to go. Testing at the bottom of this post in fact
you can see my current post.html here