Tuesday, July 26, 2011

Add facebook like button to your blogger blog with facebook open graph open graph protocol.

Today i am going to tell you How to add a Facebook like button to your blogger blog with Facebook open graph protocol. its a very simple and easy


step 1: adding meta tags to head of your blog.
Go To design>Edit HTML

Add the following meta tags just after the <head> of your blog.




<meta content='Your Facebook Profile id' property='fb:admins'/>
<meta content='any name you want to give your site' property='og:site_name'/>
<meta content='activity' property='og:type'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='url of image you want to show' property='og:image'/>


*Change the content in red with your data.
*if your profile link is  "http://www.facebook.com/profile.php?id=100002266143867" your facebook profile id is  100002266143867
if your profile link is  "http://www.facebook.com/username" than your profile id is username


Step 2: Adding Like button Code.
1. go to Design > Edit HTML and click on the check box which says “Expand Widget Templates” 
 Look for <data:post.body/> and immediately below that Past the following code.  

 This will show like button everywhere.
if you want show like button to post pages only Paste the following code instead of above


4.Now look for 
</head>
and immediately above that paste the following code 
 
(Note: you don't have to add this if you have already added this code for some other Facebook widget)
5. Save the template and you should see the Like Button near each of your posts. You are done. :)

 
To Check that you have added like button correctly Go To http://developers.facebook.com/tools/lint And Copy the URL of any of your blog post and Lint it there you will see if there are any errors.
If you have any problems in adding it post it in comment. i will solve it.

1 comment:

  1. Wow.. This is Just awesome.. Who ever wrote this is a freaking Genius .. :) It really Works..

    ReplyDelete