Joshua Cox

Techromancer

Facebook Comments and Jekyll

Nov 28, 2015

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>

facebook-init.html

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

Share this post

Comments