Buying Domains

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg

Saturday, 18 September 2010

How to Add Facebook Like Button on Blogger

Posted on 06:05 by Unknown
How to add Facebook Recommend Button on Blogger blog?
How to add Facebook Like Button on Blogspot blog?
How to customize Facebook Like Button on Blogger?
How to customize Facebook Recommend Button on Blogger?

You want to add the official Facebook Like or Recommend Button at the end (or at the top) of each of your blog post, here's how.

facebook like button

Firstly, go to Dashboard > Design > Edit HTML. Then click Expand Widget Templates.

Search for this code:

<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->

Then, here's the code to add the Facebook 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=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

---

Where to add Facebook Like Button?

To add it above each blog post, add the code before <data:post.body/>.

To add it after each blog post, add the code after <div style='clear: both;'/> <!-- clear for photos floats -->.

To distance the button away from the blog post, add <br/> before or after the Facebook Like Button code depending on where to put it.

Click "Save Template" and you're done.

---

How to customize Facebook Like Button?

1) To show Facebook Profile pictures/faces of people who "Liked/Recommended" the blog post, change "false" to "true".

2) To use different action on the Facebook Button, change "like" to "recommend". Decide which is suitable for you.

3) To change the font, change "arial" to either "lucida+grande", "segoe+ui", "tahoma", "trebuchet+ms" or "verdana". Decide which is suitable for you.

4) To change the colour scheme, change between "light", "dark" or "dark". It represents the background colour your blog uses. If it's light colours use "light", if it's dark use "dark" and "evil" is somehow the same.

5) To change the width or height of the button, change them accordingly.

That's all for now!
Email ThisBlogThis!Share to XShare to Facebook
Posted in Facebook, Widgets | No comments
Newer Post Older Post Home

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Popular Posts

  • Earning Nuffnang Glitterati Status
    In order to achieve Glitterati status in Nuffnang, one has to be loyal - in the sense that other Blog Advertising Companies' Ad Units (...
  • How to Remove Attribution Widget on Blogger
    How to remove attribution on Blogger? How to remove copyright widget on Blogspot? How to remove line at the bottom of blog? If you're us...
  • Facts About Google
    The Beast File: Google. Google and its dominance. Google is certainly popular and has ever increasing users from day to day. Here are some f...
  • Blogger in Draft - New Blogger Template Designer!
    A new template designer has been released on Blogger Draft offering new templates and features enhancement to allow easier modification of ...
  • Getting a Domain or a Web Hosting, or Both
    Difference between getting a domain or a web hosting, or both. Why purchase a custom domain name? Why purchase a web hosting? Can I just pur...
  • Guide to Using INNIT @ Nuffnang
    In order to fully utilize INNIT , the blog aggregator, by Nuffnang, you have to obtain Glitterati status first. Here's more or less the...
  • Neobux Payment Proof
    UPDATE 9 April 2011 : If you don't upgrade your NeoBux account and remains at an ordinary account, you'll only earn $0.001 per click...
  • OnBux Down Forever?
    Yes, OnBux is down for quite some time already and one could only wonder - was it intentionally done? Was the hard-clicked money earned by t...
  • Blogger Open Image with Lightbox
    How to open image with Lightbox on Blogger? How to open image with Lightbox on Blogspot? Show image with Lightbox on Blogger. Show image wit...
  • Blogger New Interface Layout
    Blogger has released a new layout on its Original Blogger site (note: not Blogger in Draft) and you can try the updated Blogger interface wi...

Categories

  • About.me
  • Advertisement
  • Alexa
  • Blog Signature
  • Blogger
  • Blogger in Draft
  • Blogger Template Designer
  • Bloggerunited
  • Comments
  • Customize - Background
  • Customize - Blog Width
  • Customize - Comments
  • Customize - Label
  • Customize - Others
  • Disqus
  • Domain
  • Earn Money Online
  • Facebook
  • Favicon
  • Feed
  • Feed Count
  • FeedBurner
  • Flavors.me
  • Flickr
  • Gaining Traffic
  • Google
  • Google Analytics
  • Google Page Rank
  • Google Webmaster
  • Gravatar
  • Guides
  • Imageshack
  • Intense Debate
  • JS-Kit
  • Lightbox
  • Links
  • NeoBux
  • Nuffnang
  • Onbux
  • One Stat
  • Photobucket
  • Photos
  • Picasa
  • Post Password
  • Posterous
  • Profile Page
  • Recent Posts
  • Refresh
  • Site Meter
  • Sitemap
  • Skydrive
  • Stat Counter
  • Statistics
  • Table
  • Templates
  • Tinypic
  • Top Commenters
  • Traffic
  • Tumblr
  • Twitter
  • Web Hosting
  • Widgets
  • Wordpress

Blog Archive

  • ►  2011 (12)
    • ►  October (1)
    • ►  September (1)
    • ►  August (1)
    • ►  July (2)
    • ►  June (2)
    • ►  May (1)
    • ►  April (1)
    • ►  March (1)
    • ►  February (1)
    • ►  January (1)
  • ▼  2010 (29)
    • ►  December (4)
    • ►  October (1)
    • ▼  September (5)
      • Getting a Domain or a Web Hosting, or Both
      • How to Add Facebook Like Button on Blogger
      • How to Add Signature to Blog Posts
      • Blogger in Draft New Widgets - Popular Posts and B...
      • How to Add Floating Twitter Button on Blogger Blog
    • ►  August (3)
    • ►  July (2)
    • ►  June (1)
    • ►  May (5)
    • ►  April (3)
    • ►  March (5)
  • ►  2009 (33)
    • ►  November (1)
    • ►  September (3)
    • ►  August (4)
    • ►  July (5)
    • ►  June (10)
    • ►  May (10)
Powered by Blogger.

About Me

Unknown
View my complete profile