Facebook Comment Box For Blogger
In 2009 Facebook developers introduced their best social plugin called "Facebook Comments Box". This plugin can be embedded in any website or blog and visitors can use their IDs of Facebook, Yahoo, AOL or Hotmail to leave a comment at your site.Facebook comment box is one of the useful tool for bloggers to increase conversations. Now to add Facebook Comment Box to your Blogger blog follow these steps.
Step 1: Disable Default Comments
Let's start with disabling blogger default comments because you might not want to have 2 comments forms. Now to do this log into Blogger account and go to settings >> posts and comments
Next to "Show Comments" field choose Hide and hit Save Settings.
Step 2. Generate your Facebook App ID
Now to get a facebook comments box in your blogger blog you should generate your own Facebook APP ID/API KEY, it’s really easy and one step process.
Log into your Facebook and go to https://developers.facebook.com/apps/
Then click + Create New App at the top right corner of the page. A new pop-up window will show up.
Enter an application name, check "I agree to the Facebook Terms" and click "Continue".
After passing a capcha you will get a new form
Fill the following info:
App Namespace: Enter anything but if you use more than one word use "-" as a seperator not space.
App Domain: You must type blogspot.com but if your using blogger custom domain you should enter your domain name.
In the end select "Website" to integrate with facebook. and enter your Blog URL and hitSave Changes.
On the next page Facebook will give you the App ID
Just copy it and paste it in a text editor like notepad, we’ll need use in the next steps.
Step 3. Codes To Add To Your Template:
You must add the following codes to your blogger template to ensure that the comments box will work for your blog in the right way.
- xmlns attribute
- Javascript SDK
- Open Graph Protocol tags
Now go to your Blogger account once again and navigate to, Template >> Edit HTML,hit Proceed and check Expand Widget Templates
Now find (CTRL+F) this in the code:
<html |
and at the following code at the end (before closing the > ). Put a space before it.
xmlns:fb='http://www.facebook.com/2008/fbml' |
Adding the Javascript SDK Code:
Now find (CTRL+F) this in the code:
<body> |
Add the following code just below/after it.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({ appId : 'YOUR APP ID',
status : true,
cookie : true,
xfbml : true
});
};
(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>
|
Note: don’t forget to change YOUR APP ID to your app id ( You got in Step 2).
Adding the Open Graph protocol tags:
Copy the following code
<b:if cond='data:blog.pageType == "item"'> <meta expr:content='data:blog.pageTitle' property='og:title'/> <meta expr:content='data:blog.url' property='og:url'/> <b:else/> <meta expr:content='data:blog.title' property='og:title'/> <meta expr:content='data:blog.homepageUrl' property='og:url'/> </b:if> <meta content='YOUR-BLOG-NAME' property='og:site_name'/> <meta content='LOGO-URL' property='og:image'/> <meta content='YOUR-APP-ID' property='fb:app_id'/> <meta content='FACEBOOK-PROFILE-ID' property='fb:admins'/> <meta content='article' property='og:type'/> |
and change the colored text to the following,
Change
YOUR-BLOG-NAME with your Blog name.Change
LOGO-URL with your blog logo, or remove the all tag if you don’t want it.Change
YOUR-APP-ID with your application ID number ( You got in Step 2).Change
FACEBOOK-PROFILE-ID with your own Facebook user Profile ID.After making these changes paste the above code just before/above
</head> |
Step 4. Adding the Comments Box to your Blogger template:
Now find (CTRL+F) this in the code:
<data:post.body/> |
and paste the following code just below/after it.
<br/><br/><b:if cond='data:blog.pageType == "item"'> |
Step 5.
Save the template.
Note:
For comment moderation just go to http://developers.facebook.com/tools/commentsand click the settings at the rignt.
finnaly something that works.. good job, ma man.. :D
ReplyDelete~+๐oO[ ลอตเตอรี่ ]Oo๐+~
ReplyDelete--------------------------------
~+๐oO[ ลอตเตอรี่ออนไลน์ ]Oo๐+~
หาไม่เจอ ให้เซิดกูเกิลว่า
"ลอตเตอรี่ออนไลน์"
โทร 0863132381/082-0793134
ragtrixro@yahoo.com
หรือจำไว้ว่า http://www.ลอตเตอรี่ออนไลน์.com
--------------------------------
~+๐oO[ มีตรวจหวยรางวัลที่1ด้วย ]Oo๐+~
~+๐oO[ สลากกินแบ่งรัฐบาล ]Oo๐+~
~+๐oO[ เลขเด็ด ]Oo๐+~
~+๐oO[ หวย ]Oo๐+~
~+๐oO[ facebook ]Oo๐+~
~+๐oO[ เกมส์ ]Oo๐+~
~+๐oO[ lottery ]Oo๐+~
~+๐oO[ หนัง ]Oo๐+~
~+๐oO[ รถ ]Oo๐+~
~+๐oO[ บ้าน ]Oo๐+~
~+๐oO[ งาน ]Oo๐+~
~+๐oO[ ขาย ]Oo๐+~
~+๐oO[ รูปภาพ ]Oo๐+~
~+๐oO[ ข่าว ]Oo๐+~
~+๐oO[ คลิบ ]Oo๐+~
~+๐oO[ การ์ตูน ]Oo๐+~
~+๐oO[ ดวง ]Oo๐+~
~+๐oO[ หญิง ]Oo๐+~
Hey, great post and it really helped me get the facebook comments working on my blog. I wanted to get some SEO out of it but the iframe issues (search engines won't crawl iframes) made this impossible and, of course, the only way I could find to pull the text of the comments was through php scripts (which blogger doesn't support). Soooo, i wrote a php script and threw it on my server and then called it as an object on my blogger template and viola! - it worked.
ReplyDeleteIn kind, I thought I'd share it with you and maybe add a little value to your already great post. Just paste this code in your blogger template above or below the commenting code and it should be good to go. If you want to view the results just remove the div tags and give the object some width/height parameters. Hope this helps some of you!
One more note, the php script grabs the referring URL(of wherever you've put the html script) so it should work for any and all posts/pages dynamically (including canonical URLs) - I thought that was a nice touch ;-)
<!-- BEGIN Graph API comment pull and text insertion in an invisible div for SEO purposes -->
<div class='separator' style='clear: both; display: none; text-align: center;'><object data='http://sukithookahs.com/get_comment_text.php' height='' type='text/html' width=''>
</object></div>
<!-- END Graph API comment pull and text insertion in an invisible div for SEO purposes -->
One final note, I AM NOT a programmer so this isn't the prettiest thing in the world, but it works great...
I did all the steps then it work thanks :)
ReplyDelete