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

  • 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...
  • Metered Campaigns VS CPC Campaigns
    Many are unsure about the differences between a Metered Campaign and a CPC Campaign. Here are the explanation. Metered Campaigns Metered cam...
  • 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...

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