If you are a blog writer and using blogger.com for writing your blogs, then you might be interested in placing a facebook like button on your blog posts. This may increase your blog traffic in a wide range via facebook. As soon as someone likes your post, his/her friends get about this notified by facebook news feed. So, there is a lot more chance to get some of those come and visit your post, may be they also like it, resulting a huge scope.
So, now you are extremely interested to place the button. Lets place it. Go to the link: http://developers.facebook.com/docs/reference/plugins/like . There you will have a widget to create a button. url link, width etc options. Fill them up and click get code, you will receive an html iframe code.
You might be thinking, there you used only homepage url, so everybody will get the homepage url only, not individual post url, yes its true. We have to do a little hack to make our needs happen, that's the main target of this post.
Now login to your blogger account, goto 'design' section, then 'edit html' sub section, tick the checkbox 'Expand Widget Templates'. now find the div with id 'post-body' section in the template html. Place your facebook button code there. Now comes the small tricky part. place your code as lke the following code:
<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
<b:else/>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:blog.homepageUrl + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
</b:if>
Notice that we have used data:blog.homepageUrl and data:post.url instead of static url to achieve our needs and make it compatible for blogger blog. These are code from blogger's markup language which returns the actual url when rendering. Although i am not blogger markup expert, but managed this code snippet easily as its not that tough :)
Now as result you will get facebook like button on your post page and also home page(on each post of home page), just like my blog. So, do you like my article? Then prove it :D
0 comments:
Post a Comment