Thursday, December 06, 2012
Labels: 
Facebook comment box can be embedded to any blog or website. Blog visitors can comment with their facebook ID. Here is the simple way to Add Facebook Comment Box to your blog or website...
You need to follow some simple steps.
How to Add Facebook Comment Box to Blog/ Website
Step:1 Get Facebook Application ID
Go to Facebook Developers Page
Click on Continue
Enter App Domain and Site url-> Save
Step:2 Facebook Comment box code Add to Template
Note: You have to take Backup your template before doing this..
Blogger->Settings->Comments->Select Embedded
Blogger-> Design -> Edit HTML with Expand Widget
A) Find <html in search box
Copy below code and paste after <html
B) Find <body> or
<body expr:class='"loading" + data:blog.mobileClass'>
Copy below code and paste after <body>
Replace YOUR_APP_ID with your Facebook application ID which you created in facebook application
C) Find </head>
Copy below code and paste above </head>
Replace Shafee Live with your blog Name.
Replace Blog Image URL with your image logo.
Replace YOUR_APP_ID with the your Facebook Application ID
Replace http://www.facebook.com/shafeelive with your Facebook profile
link
D) Find <b:includable id='comment-form' var='post'>
Copy below code and paste after <b:includable id='comment-form' var='post'>
If you need to use dark comment box, just replace light with dark
For comment box size changing, just change the value of width='520'
For change the comment box footer, Just change tha value of width=510px
E) You are almost done. Save your template and see your blog Facebook Comment Box should be there...Enjoy..............
Facebook Comment Box
How to Add Facebook Comment Box to Blog/ Website
Step:1 Get Facebook Application ID
Go to Facebook Developers Page
Click on Continue
Enter App Domain and Site url-> Save
Step:2 Facebook Comment box code Add to Template
Note: You have to take Backup your template before doing this..
Blogger->Settings->Comments->Select Embedded
Blogger-> Design -> Edit HTML with Expand Widget
A) Find <html in search box
Copy below code and paste after <html
| xmlns:fb='http://www.facebook.com/2008/fbml' |
B) Find <body> or
<body expr:class='"loading" + data:blog.mobileClass'>
Copy below code and paste after <body>
| <div id='fb-root'/> <script> window.fbAsyncInit = function() { FB.init({ appId : 'YOUR_APP_ID', status : true, // check login status cookie : true, // enable cookies to allow the server to access the session 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> |
Replace YOUR_APP_ID with your Facebook application ID which you created in facebook application
C) Find </head>
Copy below code and paste above </head>
<meta expr:content='data:blog.pageTitle' property='og:title'/> <meta expr:content='data:blog.url' property='og:url'/> <meta content='Shafee Live' property='og:site_name'/> <meta content='Blog Image URL' property='og:image'/> <meta content='YOUR_APP_ID' property='fb:app_id'/> <meta content='http://www.facebook.com/shafeernalil' property='fb:admins'/> <meta content='article' property='og:type'/> |
Replace Shafee Live with your blog Name.
Replace Blog Image URL with your image logo.
Replace YOUR_APP_ID with the your Facebook Application ID
Replace http://www.facebook.com/shafeelive with your Facebook profile
link
D) Find <b:includable id='comment-form' var='post'>
Copy below code and paste after <b:includable id='comment-form' var='post'>
| <b:if cond='data:blog.pageType == "item"'> <div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <div> <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div> <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='blogger templates' href='http://www.shafeelive.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>Shafee Live</a></b></div></div> </b:if> |
If you need to use dark comment box, just replace light with dark
For comment box size changing, just change the value of width='520'
For change the comment box footer, Just change tha value of width=510px
E) You are almost done. Save your template and see your blog Facebook Comment Box should be there...Enjoy..............
Watch Video Tutorial
.gif)
thank uuuuuuuu
ReplyDeleteitz amazing post.. thank u......
ReplyDeletethnk u
Deletecan't find with ctrl + f though so I'm pretty much stuck :( care to enlighten me?
ReplyDeletei was googling for this one. finally i got it.. thank u
ReplyDeleteu r welcome
Delete