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='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' 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!
7 comments:
When I enter the Facebook Like Button it says:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "layout" must end with the ';' delimiter.
Is there sth wrong with the code?
Hope you can give some advice.
@Anonymous:
Thank you for informing. I've fixed the code!
Thanks for fixing it!
I LIKE IT.Very useful things for blog. But it is necessary a beautiful template for your blog which you can only download from "bloggerpress.blogspot.com"
I follow the instruction but not getting the like icon.
@jencooks:
Can you please share what are you getting instead?
Thanks, it worked.
Post a Comment