Here’s my current commenting platform in the blog where user can choose where to use the media and post their comment.

Comment

For my jekyll blog, i have implemented all commenting system. User can either use facebook, disqus and google+. The perk of being all three and separate is that user can have freedom. For example, user who are already logged into the facebook can directly comment without registering name and email. On the other hand, disqus lets you comment in wider perspect without showing your social media. And there is google+, which i think it will be worthless to explain why google+ comments in blogs. So, without any delay, lets start the configuration. This configuration works only for jekyll. Search on google for other platform.

1.Follow this facebooks docs on how to setup the comment or using facebook comment platform.

2.Make an account on disqus. Google+ won’t need any other things, except make sure you are logged in.

3.Make a file named any. I will use comment.html which should be in the includes folder.

4.Then next step is to add the cofiguration for different system. Below is the list of all config. Make sure to change with your right one and under single file, even though the gist are differently listed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

<div class="buttons">
<div style="width: 100%">
    <button class="buttons1" onclick="openComment(event, 'Facebook')" id="defaultOpen"><i class="fa fa-facebook fa-3x" aria-hidden="true"></i></button>
    <button class="buttons2" onclick="openComment(event, 'Disqus')"><i class="fa fa-commenting-o fa-3x" aria-hidden="true"></i></button>
</div>
</div>
<div id="Facebook" class="tabcontent">
    <div class="fb-comments" data-href="https://rajanbhattarai.com/integrate-fb-google-disqus-comment-in-jekyll/" data-width="auto" data-numposts="5"></div>
</div>
<div id="Disqus" class="tabcontent">
    <div class="comment-wrapper">
        
    </div>
</div>
<div id="Google+" class="tabcontent">
    <script src="https://apis.google.com/js/plusone.js">
    </script>
    <div id="google_comments"></div>
    <script>
    gapi.comments.render('google_comments', {
        href: window.location,
        width: '900',
        height: '200',
        first_party_property: 'BLOGGER',
        view_type: 'FILTERED_POSTMOD'
    });
    </script>
</div>
<script>
function openComment(evt, CommentName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(CommentName).style.display = "block";
    evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<style>
.buttons {
    background-color: black; /* Green */
    border: none;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
</style>

5.Now after saving the above configuration goto _layouts/post.html and add the following somewhere relevant. include comment.html Include with { and % .

Once step 5 is finished, go check locally by running jekyll serve.

Note: You need to mention clearly the variables or parameters in the config.yml file for disqus.

This completes the commenting system in jekyll blog.