Add New Facebook Comment Box with Plugin Version 2.3

Add New Facebook Comment Box with Plugin Version 2.3

16
data:blog.title
Facebook comment plugins 2015

Facebook has recently brought revolutionary change in their several Plugins Such as Like Box, Comment box etc. I have previously share Latest Like box widget. And now I am going to share installing  latest comment box  plugins in Blogger template. Though older comment box Facebook itself has announced that support for the old version will expire on June 23, 2015 to come. So It will be wise decision to install newer version of Facebook Comment box in your Blogger template.

First of all we have to create a Facebook application ID for our new Facebook comment box.  And after that we will integrate the comment box on Blogger template.


Creating a Facebook Application ID

This is the first step for using Facebook Comment plugins Version 2.3. we must create a Facebook App. But for creating an app you must have a Facebook account. And after that you will able to create a Facebook comment section.  Just Follow the below steps-

Step 1 Go the https://developers.facebook.com/apps/ link and Log in to your Facebook Account

Step 2 Under My Apps click on green color Create a New App button and a popup window will appear. 

application ID

Step 3 From Create a New App ID popup windows write Display Name (You can't use Facebook or their name so choose other name for application), Namespace (Must be less than 20 letters) and select Category by using DropDown option.

Step 4  Finally click on blue color Create App ID button. And instantly you will get App ID with App secret

basic setting

Step 5 From left side vertical menu click on Settings  and under Basic tab, now under App Domains field write your domain name without www. and under Contact Email write your email address. After that  Click on +Add platform button. A popup window will appear from there click on Website icon. 

Step 6 Under Website section fill up the Site URL by using your Blog URL. And if you have Mobile site URL then add URL on that field. And click on blue color Save Changes button.

Step 7 Now navigate to Status & Review section and select the Yes for making your App public. A confirmation message will appear, from there click on blue color Confirm Button. 

review

Now our Facebook App ID has created and your Blog Platform has added. Now we will add the comment box in Blogger template.

Installing Facebook Comment Plugins V2.3 in Blogger Template

For Installing latest Facebook comment box please follow the below steps-

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML->

Step 3
 Now Find the code <body> or  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Step 4 And Paste the below code after any code from above.


<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR-FB-APP-ID',
status : true, // check login status
cookie : true, // enable cookies 
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
//]]>
</script>
 

CUSTOMIZATION

  • Replace Your App ID HERE with your Facebook App ID.
Step 5 Now again find <data:post.body/> or <p><data:post.body/></p> or <div class='post-footer-line post-footer-line-1'>or <p class='post-footer-line post-footer-line-1'>
or <b:includable id='comment-form' var='post'>

Step 6 And Paste the any script from below after any code from above. 



 light version
Light Color Version


<b:if cond='data:post.isFirstPost'>   
<script>(function(d){
 var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;}
 js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;
 js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
 d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
}(document));</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script>(function(d){
 var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;}
 js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;
 js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
 d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
}(document));</script>
<div style='margin: 20px 0 0 0;background:white;border:1px solid silver;'><fb:comments colorscheme='light' data-version='v2.3' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='100%'/></div>
</b:if>
  <div class='clear'/>



dark version
Dark Color Version


<b:if cond='data:post.isFirstPost'>   
<script>(function(d){
 var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;}
 js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;
 js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
 d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
}(document));</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script>(function(d){
 var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;}
 js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;
 js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
 d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
}(document));</script>
<div style='margin: 20px 0 0 0;background:black;border:1px solid silver;'><fb:comments colorscheme='dark' data-version='v2.3' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='100%'/></div>
</b:if>
  <div class='clear'/>

Step 8 Now hit the Save template button.

That's it. You have successfully added Facebook comment plugins in your Blog. Now check your any Blog post's and see Latest Facebook comment box is displaying. 
Add New Facebook Comment Box with Plugin Version 2.3
4 Stars stars - "Add New Facebook Comment Box with Plugin Version 2.3 " Facebook has recently brought revolutionary change in their several Plugins Such as Like Box, ...

very nice
thanx

Welcome Aymen ^_^

I've tried the previous (old) method and this new one works again on http://9komik.blogspot.com/, thank

Welcome Ricky :>

Thanks Rizal for your feedback :-bd

This is not working in my blog. please help me.

Still Having this error when i comment. Object Invalid Value

I just checked your Blog. And tested this Plugins is working fine.

Sometimes it works well, and sometimes it throws errors.

Hi Anthony,
Have you created separate "Facebook App ID"? and is it active? because in most of the cases App ID create problem. :t

ok. i just checked my older app creation and see that i dont have a namespace and an app domain. so i have created a new one with your step. and i have done as you said. i will be checking on it to see the output. once again. thanks a lot.

Please am still having thesame error. How can i solve this. and the facebook comment box is not showing in some post on the blog. like https://blogmallnigeria.blogspot.com.ng/2016/07/music-phyno-e-sure-for-me.html plus others. please check and tell me what to do. and as well please cross check the code if i have it at the proper please as you described. thank you so much.

Hi Ezubelu,
I am sorry for unexpected experience. :( I just visited your Blog and saw that you are using free version template. Generally in free version template remain many hidden script in "Encoded" form. As a result many widget code may conflict with existing hidden script. Similarly Facebook Comment Plugins maybe conflict with any script. I am not sure, but you can try this plugins in other Blogger Default/Custom template this problem may not visible there. :t

its Not Working for
https://hadithquote.blogspot.com/

If you are using my template then it won't work because for copyright protection I have encoded the template code. But my recommendation is to use "Blogger default comment" system. Because Google search engine count only Blogger comment not Facebook and Disqus comment. If your site has 1000 comment through Facebook but eventually Google count your Blog 0 comment. Goggle don't take into account Facebook comments. :as

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *