Facebook Like button has propagated at a furious rate, making itself present on every other website. People can Like or Recommend the webpage or website or blog to their friends by clicking this button, thereby increasing the reach of the blog or website. Adding the Facebook Like button on websites and blogs is dead simple. If you want to add Facebook Like button to your Blogger blog, hang on.
acebook provides two easy ways of adding the Like button on websites:
Basic Like button via a simple iframe
Full-feature Like button via XFBML
The basic Like button is added to a webpage via a simple iframe, which is an HTML tag used for embedding a webpage in the other. It’s the easiest way of adding the Like button on a website. The content inside the iframe is hosted by Facebook, which can detect whether the user is logged in or not using a cookie. If the person is logged in to Facebook, the Like button is personalized for them, and shows a list of their friends who have also “Liked” the page. If they’re not logged in, it prompts them to log in or to join.
A feature-rich Javascript version of the Like button is available via the <fb:like> XFBML tag (which requires use of the new JavaScript SDK). The XFBML version allows users to add comments as well. The Like button created via XFBML tag is a lot more wiser and flexible, but it requires webmasters to register their own Facebook application.
How to add Facebook Like button below every Blogger post?
Using iframes to add Facebook Like button is easier and faster. So in this article we will see how to add the Like button via iframes.
Log in to Blogger.
Go to Layout -> Edit HTML option of your blog.
Now, tick the check box that says “Expand Widget Templates”.
Search for ‹data:post.body/› and paste the following code below it.
<b:if cond='data:blog.pageType == "item"'>
<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;'/>
</b:if>
If you want the Facebook Like button to appear below all posts even on homepage, use the following code instead.
<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;'/>
Save the template.
How to customize the Facebook Like button?
Button text: You can change the button text from “Like” to “Recommend”. Search for action=like in the code and replace it with action=recommend.
Show faces: If you want to show images of people who Liked the post, look for show_faces=false in the code and replace it with show_faces=true.
Color scheme: To change the colour scheme of the button, change colorscheme=light to colorscheme=dark or colorscheme=evil.
Text font: The font of the Facebook Like button can also be changed easily. Replace the font=arial parameter with the font of your choice:
font=arial
font=lucida+grande
font=segoe+ui
font=tahoma
font=trebuchet+ms
font=verdana
No comments:
Post a Comment