Shanto Roy

I Explore Research, Tech, Travel, and Business. SRE @Charles Schwab.

2 minute read

I enabled the Facebook-Comments-Plugin in my blog as a comment provider. Here is how, I enabled it and now managing it.

Create a Facebook Developer App ID

Go to Facebook Developer page and register a web app to receive an App ID. It will take only a minute or two.

Configure Jekyll in Webpage

Include the following code at the end of the <body>...</body> tag. In a simple Jekyll site, put this in the _layout/default.html. In case if you are using you will find a different script file in _includes/comment-providers/facebook.html; remove previous code and add the following code. Remember to replace your app ID with mine at the end of line number 6. Here, 466840033890778 is my App ID.

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

Set Up Comment Moderation

Include Meta Property in Page

In most of the tutorials, authors included only the following code within the <head>...</head> section of the _layout/default.html file.

<meta  property="fb:admins"  content="{https://www.facebook.com/shanto.roy.9}"/>

However, it did not work. Therefore, I found a new thread in Stack Overflow thread [Comments Plugin Moderation Tool not working] that solves the issue finally. Add all these within the <head>...</head> section of the _layout/default.html file-

<meta  property="fb:app_id"  content="466840033890778"  />
<meta  property="fb:admins"  content="466840033890778"/>
<meta  property="og:url"  content="URL"  />
<meta  property="og:title"  content="TITLE"  />
<meta  property="og:description"  content="DESC"  />
<meta  property="og:image"  content="IMG"  />

Admin Setup

Go to https://developers.facebook.com/tools/comments/466840033890778 and this is your dashboard. From settings add as many admins as you want who will be able to moderate the comments if logged in their facebook account. Do not forget to replace my App ID with yours.

Configure the YAML front matter

Enable the facebook comments plugin in _config.yml file by following instructions provided in the file. In Minimal Mistakes theme, it looks like the following:

comments:
	provider : "facebook"
	facebook:
		appid : 466840033890778
		num_posts : # 5 (default)
		colorscheme : # "light" (default), "dark"

Now, you are good to go. Cheers!!!

References

Leave a comment

You may also enjoy