Tuesday, August 17, 2010

Add facebook like button + print this post button to blogger

Facebook like button these days are too much used,each and every good running website you see contains facebook like button so that user can like the article and hence it gets shared on their facebook profile which promotes articles by sharing,one other thing which is quite useful for blogger is print this post button which allows user to print particular article in a particular format,
so to add both of these buttons to your blogger below your post just follow some steps:-
[only to add them at the bottom of the posts on post pages]
1.[Add print this post button]Log in to your dashboard, go to edit html and click on expand widget template,
and search for </head> and before that header end tag place this following css code,

<style type="text/css" media="print">
#header-wrapper,#header,.header, #sidebar-wrapper,.sidebar, #footer-wrapper,#footer,.date-header,.comment-link,.comment-footer,#comments,#blog-pager,.feed-links, #backlinks-container, #navbar-iframe,.dontprint {display: none;}

,this css will define how your blogger post is to be printed when print this post button is clicked,next step is to add this button,go to edit html and click on expand widget template,

and search for <data:post.body/> ,below that paste the following piece of code

<b:if cond='data:blog.pageType == "item"'>
<span style='background: url(http://2.bp.blogspot.com/_u4gySN2ZgqE/S50y8gqg78I/A
AAAAAAABbw/PHubFP5CPwA/s1600/print-this.png) left no-
repeat; padding-left: 25px;'><a href='javascript:windo
w.print()' rel="nofollow" >Print this post</a></

"add float:right; to make it go to right side of the post or 

float:left; to make it float left,add this code just after this padding-left: 25px; "


click on save template and button is added.
[we suggest to make this float to right side as when you add facebook like button,facebook like button will automatically float to left side]
2.[Add facebook like box]Log in to your dashboard click on edit html check expand widget template,

 search for 

<data:post.body/> and after this code you will see the recently added print this post button code just below that code add this piece of code for facebook like button,

<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&
eme=light"' frameborder='0' scrolling='no' style='borde
r:none; overflow:hidden; width:450px; height:40px;'/>

after you paste this code click on save template and  you will see these two new things below each and every of your blogger post.

Don't forget to check out our Homepage and follow us on Twitter
Join our Facebook group and Fan page

Labels: ,