You need to follow some simple steps.
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='ThekhmerDL' 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 TheKhmerDL 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/EckoGioLove 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='Bv Ecko' href='http://www.thekhmerdl.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='thekhmer'>TheKhmerDl</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..............
0 comments:
Post a Comment