How to Add Facebook Like Button on Blogger

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.


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!

Tweet

How To Update Blog Posts to Facebook via Notes

How to link blog to Facebook?
How to update blog on Facebook?
How to automatically import blog post to Facebook?

First log-in to your Facebook account.

Then click on the "Profile" link on the top right of the main navigation bar above to view your own profile.


After that, click on "Options" below the Share box.


Then, the word "Settings" will appear. Click on it.


A list of ways to import stuffs (also known as Stories) to your Facebook will be available. Find for "Blog/RSS" and select it.



After selection "Blog/RSS" a text field will appear right below. Enter your blog address or the blog feed, and click Import.

Facebook will then import all your available blog posts as Notes and it'll appear on your Wall and also your friends' Wall.

Also, whenever you update your blog, Facebook will automatically import the latest posts as well. Enjoy!

---

UPDATE (6 September 2010): Facebook imported stories is no longer available.


However, it seems that Facebook still auto-update the blog note after a few days. Just that you can't manually ping it anymore.

Tweet

How To Add Facebook Profile on Blog

How to get profile badge from Facebook?
How to create Facebook profile badge?
How to include Facebook profile on website?

First, go to your Facebook account and log in. Then head on to your profile page, by clicking on your name or "Profile" on the top navigation bar.

Then on the left sidebar, scroll down until you see "Create a Profile Badge", something like this.


After a new page has loaded, click on "Create a new badge" on the top right corner. The button looks like this.


Select the layout and the information (items) you would like to display.


And then click save.


After that, select the code, copy and paste it to your blog as one of the page gadget on the layout settings page.

That's all!

Tweet