Luke Zhao iOS / Web Developer ★ UI & 3D Design ★ Waterloo, Canada

Facebook comment plugin in Jekyll

Jekyll is a awesome static site generator. Perfect for blogging needs. But since it is JUST generator, it doesn’t have a database for storing user generated data (user comment for example).

Lucky for us, we have Disqus and Facebook to help us store and display user comments. We only have to provide them with the current page URL for them to construct a comment form.

TL;DR - Here is how to do it (Facebook comment):

  1. Go to developer.facebook.com and register a web app. (<2 min)

  2. Add the following code anywhere on the page. I would recommend put this in your layout/default.html at the end of your body tag.

    <body>
       <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_GB/all.js#xfbml=1&appId=APPID";
       fjs.parentNode.insertBefore(js, fjs);
       }(document, "script", "facebook-jssdk"));</script>
     </body>
     

    Remember to replace the APPID with your APPID from developer.facebook.com

  3. Add the following template code to your layout/post.html. Or anywhere you would like to display a comment form.


<div class="fb-comments" data-href="{{ site.url }}{{ page.url }}"></div>

Thats it!

I chose Facebook over Disqus because most of my friends are on Facebook. Of course, if you would like to setup Disqus instead, here is the link on how to set Disqus up.