August 18, 2018

Integrate Facebook Comments Plugin in Ghost

Don't really know how to integrate Facebook Comments Plugin in your Ghost platform (I know you do!). Read my simple integration step!

Integrate Facebook Comments Plugin in Ghost

So Ghost is really a good publishing platform that I could ever find as free source right now. But if you want it to be little bit of blog kind of site I'm pretty much sure we want something like comment along with the article so that people who visit and read the article could leave some comments. Ok, now I just wanna share on how I do it, so read on!

Of course there are many ways on integrating 3rd party plugin into your self-cloud-hosted Ghost platform and not limited by that, you can custom your code too or create an API of your own to display the comment for each post. But for now I just want to focus on integrating my Ghost platform using Facebook Comment Plugin. Before that, in the search of doing this I've came across this link and begin from there, you may find other site too and follow the steps that pretty much the same. They also include step to integrate other 3rd party plugin tho, and quite a number of list.

First go to FB comment plugin setting page and navigate to 'Comment Plugin Code Generator' section, then set your parameters.

FB-Comment-Plugin

Notice that 'URL to comment on', just fill with your domain for starting as we will change this dynamically later. You can set width and number of posts to display for whatever suit your site layout, in my case, i just set width to 100% and no of posts 15, actually this also something that you can play around dynamically later. Don't forget to Get the code!

GetCode

Next, go to your Ghost source folder, inside versions folder go to version folder (ex: 1.25.4 as of now) -> content -> themes -> casper and open/edit file post.hbs. Go find below code in the file


    <section class="post-full-comments">
    

When you generate code as previous picture shown, copy **Step 1** code and paste to before above section tag and copy **Step 3** code inside the above section tag. Maybe similar like mine below


    <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 = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.1';
        fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
    <section class="post-full-comments">
            <div class="fb-comments" data-href="" data-width="100%" data-numposts="15"></div>
    </section>


Notice that I blank out the data-href attribute because I want to dynamically generate full URL, reason being we don't want to get new generated code in FB comment plugin page for different or new post. If you use same hardcode URL you may find your comments are mixed across every posts, FB plugin will bind URL with comments which for me URL here act as ID for those comments. Bla bla bla, jump to the end of post.hbs file and you can find javascript script section, quickly add below code after onLoad or jquery .ready function ($(document).ready(function () {)


    $(".post-full-comments").children().attr("data-href", window.location.href);


After that if you run on production mode, just issue ghost restart in your environment. Whalla... There you go, start commenting!

P/S: I know this is not the perfect way, do share your way. Thanks!