Social integration in Jekyll

Souhail HANFISouhail HANFI, in 22 August 2014

The problem with jekyll, everybody will tell you, it’s the comments.

The biggest advantage of the blogging framework is that it has no need for a Data base, but in the case it becomes it’s weakness.

No Data Base = No Dynamic Data = No Comments

But discuss, facebook and some others provide a commenting sytem that you can integrate to your blog.

Beeing a facebook user, for my blog i choosed the facebook comments integration, and this is how i made it work.

The integration is realy simple :

start by

<!-- Begin include facebook JS SDK -->
<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); = id;
    js.src = "//";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
<!-- End include facebook JS SDK -->

<!-- Begin Comments DIV -->
{% if site.comments and if page.comments != false %}
  <div class="fb-comments" data-href=" {{ site.url } {{page.url }}" data-numposts="5" data-colorscheme="light"></div>
{% endif %}
<!-- End Comments DIV -->

Add a line in your _config.yml:

comments: yes

And Now your are ready to get comments on your articles

We can also use Google plus comments but this is not a feature released from Google as a service to use it’s just some code lines stolen from blogger service that embed a comments widget that you can use in your page.

Google can at any time change it’s code since it’s not an official release.

Here’s the code that you need:

{% if site.comments and if page.comments != false %}
<script src="">
<div class="g-comments"
{% endif %}

the width being hard coded i hate those widgets that are not responsive.

Now we are going to add some sharing buttons (facebook, google+, Twitter)

Here are the URLs to get the code to include:

{% if site.share or page.share != false %}
<div class="social_share">
    <div class="fb-like" data-href=" {{ site.url } {{page.url }}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true" style="padding-bottom:30px"></div>
    <script src="" async defer>
      {lang: 'fr'}
    <div class="g-plusone" data-size="medium"></div>
      <a href="" class="twitter-share-button">Tweet</a>
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);;js.src=p+'://';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
{% endif %}

And dont forget to add this to your _config.yml :

share: yes

And that’s it … Now share and Comment