Friday, April 22, 2011

How To Add Facebook "LIKE" Button to Blogger/Blogspot/Website/Wordpress/Tumblr


Follow this simple code :

STEP 1: go to layout (design) > edit HTML and check  "Expand Widget Templates"

STEP 2: find <data:post.body/> and copy-paste this following code "before" if you want the like button appear on the TOP of your post or "after" if you want the like button appear at the "BOTTOM" of your post

(note: to find some particular html parts just simply long press "Ctrl" found at your keyboard and "f" letter then type what particular html you are looking for.



To find the HTML part where the code should be at either on TOP or on the BOTTOM of each post. If you want the "Like button" Appear at home pages, donnot include to copy the part marks in RED. then click preview to see your like button. then click "save template" your done!

EXAMPLE DEMO: how to use searching  HTML parts.

1.STANDARD LIKE BUTTON

.<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/>

2. LIKE BUTTON WITH COUNT ON TOP

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=65&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:65px;'/>

3. LIKE BUTTON WITH COUNT ON THE SIDE

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px;'/>


4. LIKE AND TEXT CHANGE TO WHITE FOR A DARK BACKGROUND BLOG

<div style="padding:4px; float: right;">
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px;'/>
</div>


I HOPE YOU FIND THIS HELPFUL, IN EXCHANGE PLEASE HIT THE LIKE, TWEET or RSSfeed. THANK YOU!!

1 comment:

iamsam said...

thank u all for liking and retweeting... keep sharing knowledge.. xoxo

Related Posts Plugin for WordPress, Blogger...