Best 2 Know

The Ultimate Blogging Resource

  • Advertising
  • WebHosting
  • Contact Us
  • Blogger
    • Blogger Templates
    • Blogger Tutorials
  • Browser
    • Firefox
    • Google Chrome
  • Google
  • Internet
    • Facebook
    • Twitter
  • Thesis
  • Windows
  • WordPress
    • WordPress Themes
    • WordPress Plugins
  • More
    • Linux
    • Review
    • Solutions
    • Announcements

Facebook Like or Recommend Button For Blogger

Facebook has come up with a new set of Social plugins which enable you to provide engaging social experiences to your users with just a line of HTML. The Facebook Like Button is One of them. You can see a demo of the like button on this page. The Facebook like button will allow your readers to quickly share your posts with their Facebook Friends. You can also get to know how many people liked your Blog Post .
Follow this Steps :
1. Login to your Blogger Account and go to Layout > Edit HTML and click on the check box which says “Expand Widget Templates”

2. Look for <data:post.body/> and immediately after that place the following code.

<!– Facebook Like button by Best2know–>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<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=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;’ frameborder=’0′ scrolling=’no’ style=’border:none; overflow:hidden; width:450px; height:40px;’/>
</b:if>

This code will show the Like Button on Post pages only. If you want to display it everywhere, then remove the two lines of code in red.
3. Save the template and you should see the Like Button Below each of your posts.

Optional Customisations

a)  Now try changing action=like to action=recommend  in the code and you will see something like .
b) Try changing colorscheme=light to colorscheme=dark or colorscheme=evil
c) You can change the font by editing the font=arial parameter. You can change it to any of

  1. font=lucida+grande
  2. font=segoe+ui
  3. font=tahoma
  4. font=trebuchet+ms
  5. font=verdana

If you liked this post, then consider “Like” ing it :)

Subscribe via Email

Share this:

  • Twitter
  • Facebook
  • Pocket
  • Print
  • Email

Related

May 24, 2010 Ritesh Sanap Blogger Tutorials, Facebook Blogger Hacks

Post navigation

Previous Previous post: Beautify Sidebar Link List with Jquery Effect
Next Next post: Random Post Widget for Blogger

Currently Trending

  • How to download Specific parts of YouTube videos
  • h4x0r ( Hacker ) - Blogger Template
  • You might also like this Widget for blogger or Related post widget
  • Windows Vista CD key
  • How to Hide Desktop Icons in Mac
  • How To Make Your Own Windows Media Player Theme
  • How to Increase Dropbox upload speed
  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to Create Multiple Excerpts in WordPress
  • BlueStrap - WordPress Theme

Random Posts

Free Online Angry Birds game

June 12, 2011 By Ritesh Sanap 1 Comment

Special Google Services

February 29, 2008 By Ritesh Sanap Leave a Comment

AnimeStar – Blogger Template

June 14, 2010 By Ritesh Sanap Leave a Comment

Compress Your Images To The Last Bytes With Smush It

March 21, 2009 By Ritesh Sanap Leave a Comment

How To Make Your Own Run Commands : Must See

March 1, 2009 By Ritesh Sanap 1 Comment

WordPress

HTTP2 Server Push for W3 Total Cache Minify plugin

August 17, 2016 By Ritesh Sanap 5 Comments

How to Disable Emojis in WordPress

January 6, 2016 By Ritesh Sanap Leave a Comment

JetPack Related posts and Sharing not working with NGINX

November 10, 2015 By Ritesh Sanap Leave a Comment

Simply Pure – WordPress Theme

November 2, 2014 By Ritesh Sanap 2 Comments

Advanced What should we Write about next? – WordPress Plugin

July 28, 2014 By Ritesh Sanap Leave a Comment

How to Disable Self Pingback or TrackBack

January 16, 2014 By Ritesh Sanap Leave a Comment

BlueStrap – WordPress Theme

January 1, 2014 By Ritesh Sanap 15 Comments

How to Create Multiple Excerpts in WordPress

December 24, 2013 By Ritesh Sanap Leave a Comment

How to Disable Auto Update in WordPress

November 21, 2013 By Ritesh Sanap Leave a Comment

How to Delete Feedbacks from JetPack Contact Form

November 19, 2013 By Ritesh Sanap 9 Comments

Recent Posts

  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to show hidden files and folders in Mac OS X
  • How to Disable Emojis in WordPress
  • Canva – Online Photo Editor
  • JetPack Related posts and Sharing not working with NGINX

Archives

Recommends

  • DigitalOcean – Cloud Hosting
  • Dropbox – Cloud Storage
  • Elegant Themes – WordPress Themes
  • LastPass – Password Manager
  • Like us on Facebook
  • Follow on Twitter
  • +1 on Google
  • Subscribe via Email
  • RSS Feed

© 2022 Best 2 Know · All Rights Reserved · We ♥ DigitalOcean

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.