If you are always logged on Facebook and you are managing a blog, it is good to put a Facebook comment box plugin there. It can also publish the comment with a link to your blog if someone posted a comment to your blog. With that, you can have more visitors to your blog site.
You can also check if someone leaves a comment on your blog without checking all the pages or posts on your blog. You can also manage the comments and make a reply just using your Facebook account
 |
| Comment Box Screenshot |
Let’s start the process.
PART 1 : Creating your apps
1. Go to https://developers.facebook.com/apps and create a new app. See image below.
2. Type any valid application name and click “Continue”.
3. Enter the captcha code and click “Continue”.
4. Get your Comment Box App ID. This is important. Copy and save it somewhere in your computer. You will need this later.
Disable Sandbox Mode, enter you blogsite url and hit “Save” button.
PART 2 : Applying the codes
1. Login to your blogger account.
2. Go to Template and click Edit HTML.
3. Put this code inside the <html> tag.
Result should look like this:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| xmlns:fb='http://www.facebook.com/2008/fbml' |
<html xmlns:fb='http://www.facebook.com/2008/fbml'>
4. Insert this after the <body> tag.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id='fb-root'/> | |
| <script> | |
| window.fbAsyncInit = function() { | |
| FB.init({ | |
| appId : '1394302334123179', // App ID | |
| status : true, // check login status | |
| cookie : true, // enable cookies to allow the server to access the session | |
| xfbml : true // parse XFBML | |
| }); | |
| // Additional initialization code here | |
| }; | |
| // Load the SDK Asynchronously | |
| (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> |
5. Insert this code before the </head> tag.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <meta expr:content='data:blog.pageTitle' property='og:title'/> | |
| <meta expr:content='data:blog.url' property='og:url'/> | |
| <meta content='Exobits Blog' property='og:site_name'/> // Blog name | |
| <meta content='blog-image-here' property='og:image'/> // Blog image logo | |
| <meta content='FB_ID_HERE' property='fb:admins'/> // Your fbid | |
| <meta content='APP_ID_HERE' property='fb:app_id'/> // Your App ID | |
| <meta content='article' property='og:type'/> |
6. Find this line <b:includable id='comment-form' var='post'>
After that code, insert the following codes below
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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='500'/> | |
| </div> | |
| </div> | |
| </b:if> |
7. After putting the codes in your template, hit “Save Template” button.
Go to your blog and check your blog post. You will see a comment box below your post.
No comments:
Post a Comment