Insert facebook comments plugin in blogger

Insert facebook comments plugin in blogger

How to insert facebook comment plugin in blogger

first at all you have to know that insert facebook plugin comments or like box it's the same for blogger or any other website you just need to create application if you don't have and get facebook comment plugin code from facebook and insert it inside your website, so let's see step by step how it work's .

Create new facebook application

the first step to create a facebook comment plugin for blogger is to create an application to be able to moderate and control you comments so the first step https://developers.facebook.com/apps/ and click Add a New App .

Facebook application detail

Select facebook application Display Name the display name will be the title of the application , and application Contact Email to receive important notification in your email , and the click Create App ID .

Facebook application type

Select application type usually if you want create application for facebook comments system you have to choose Webhooks "Subscribe to changes and receive updates in real time without calling the API" .

Facebook application setting

In facebook basic application setting insert application Domains , application privacy policy url , term of services url , application icon , and pick a category for your application after you finish your basic setting click save change .

Turn on facebook application

Now your application almost ready but it doesn't work because you have to turn it on click over off near to status: in Development and confirm your change , congratulation your application is up now .

Get facebook application id

Before we start setup comments in blogger there is two information you must know : facebook user id and facebook application id , to know facebook application id just go to your application and you will see APP ID: 0123456789 , remember that id because we will need it to set up the comment plugin .

Get facebook user id

Most of facebook account use username instead of user id , example of facebook url will be facebook.com/myname instead of facebook.com?id=123456789 and to know how to get your facebook user id

Facebook comments tools

Next step is to assign a moderator for the application: that he will be able to control the application activity , to do that go to https://developers.facebook.com/tools/comments/ next select your application if you have more than one application and click setting .

Facebook comments moderator

To get notified about facebook comment you have be the moderator of the application , so after you click setting go to moderator and select yourself to be moderator and click save .

Get facebook comments plugin

Now you are done from set up your facebook application and you have to get the application code from facebook comment pluginhttps://developers.facebook.com/docs/plugins/comments/ select the right application and there it is your code is ready .

Insert facebook meta tag in blogger

Before insert facebook comment code inside your blogger you have to insert meta tag
<meta content='100024750452940' property='fb:admins'/>
<meta content='517305355400866' property='fb:app_id'/>
inside <head></head>

Insert facebook comments plugin in blogger

This is the basic blogger code with facebook comment plugin we optimized this code to make it easy for you ti understand how this woks : you have to change 100024750452940 with your facebook user id and you have to change 517305355400866 with your facebook application id . and change http://bloggerfacebookcomment.blogspot.com/ with your url .

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:version='2'>
<head>
<b:skin><![CDATA[]]></b:skin>
<b:template-skin>
<![CDATA[]]></b:template-skin>
</head>
<body>
<!--Start Blog1-->
<b:section id='blog1' type='blog post'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'>
<b:widget-settings>
<b:widget-setting name='showDateHeader'>true</b:widget-setting>
<b:widget-setting name='style.textcolor'>#000000</b:widget-setting>
<b:widget-setting name='showShareButtons'>true</b:widget-setting>
<b:widget-setting name='authorLabel'>By</b:widget-setting>
<b:widget-setting name='showCommentLink'>true</b:widget-setting>
<b:widget-setting name='style.urlcolor'>#008000</b:widget-setting>
<b:widget-setting name='showAuthor'>true</b:widget-setting>
<b:widget-setting name='style.linkcolor'>#0000ff</b:widget-setting>
<b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
<b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showAuthorProfile'>true</b:widget-setting>
<b:widget-setting name='style.layout'>1x1</b:widget-setting>
<b:widget-setting name='showLabels'>true</b:widget-setting>
<b:widget-setting name='showLocation'>false</b:widget-setting>
<b:widget-setting name='showTimestamp'>true</b:widget-setting>
<b:widget-setting name='postsPerAd'>1</b:widget-setting>
<b:widget-setting name='showBacklinks'>true</b:widget-setting>
<b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showInlineAds'>false</b:widget-setting>
<b:widget-setting name='showReactions'>true</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='top'>
<b:loop values='data:posts' var='post'><a expr:href='data:post.url'><data:post.title/></a><data:post.body/></b:loop>
</b:includable>
<b:includable id='comment-form' var='post'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='comment_count_picker' var='post'/>
<b:includable id='comment_picker' var='post'/>
<b:includable id='comments' var='post'/>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='iframe_comments' var='post'/>
<b:includable id='mobile-index-post' var='post'/>
<b:includable id='mobile-main' var='top'/>
<b:includable id='mobile-nextprev'/>
<b:includable id='mobile-post' var='post'/>
<b:includable id='nextprev'/>
<b:includable id='post' var='post'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='shareButtons' var='post'/>
<b:includable id='status-message'/>
<b:includable id='threaded-comment-form' var='post'/>
<b:includable id='threaded_comment_js' var='post'/>
<b:includable id='threaded_comments' var='post'/>
</b:widget>
</b:section>
<b:section id='section'/>
<!--End Sections-->

<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 = &#39;https://connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v3.1&amp;appId=517305355400866&amp;autoLogAppEvents=1&#39;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-comments' expr:data-href='data:blog.url' data-numposts='5'/>
</b:if>

</body>
</html>

Test facebook comments in blogger

Now you can test your facebook application , if any issue you have to check facebook application id and facebook user id , to test this application write any comments and check if there is any error ...

Control facebook comments for blogger

To control what you happen in your website or in your blogger go to application moderating tools again https://developers.facebook.com/tools/comments/ select application you want to control and click Public and there it is the comment system works .. notice facebook will not notify you if you insert comment in your application , it will notify you when someone else comment .

Leave comment