blogger templates
blogger templates, how to start blog on blogger and wordpress

Wednesday, July 28, 2010

How to install the Facebook Like button in Blogger

This post is a realization of “Ask to Us” facility, which was launched by Kang Rohman. Below is the question sent to Kang Rohman.

Kang, I just want to ask, “How to create and install the “Script Like” as Facebook has, thus appearing in every post of my blogger blog?”

The answer:

facebook-like-button What is meant by “Script Like” of the above question is likely the Facebook Like button, as appeared in Facebook. Correct it if it’s wrong. clip_image001.

The “Facebook Like Button” functions to make easy visitors to share and recommend your articles to their friends in Facebook. They will do that if only your articles are useful to them, so they need to inform their friends.

Installing the “Facebook Like Button” is one good trick to drive more visitors from Facebook community, which is the most popular social network today. So, how to install the Facebook Like Button in Blogger?

 

How to take the code of Facebook Like button

Basically, to get Facebook Like Button, you only need to take it from Facebook develover page. You only need to do some settings and the code of Facebook Like button will be generated.

But for efficiency, the code of Facebook Like button for blogger is as below:

 

<iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;action=like&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;font=arial&amp;colorscheme=light&quot;' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/>

 

How to install the Facebook Like button in blogger posts

To install Facebook Like button, the first thing to think about is where you want the button to be, under posts or above posts. Also, do you want the button to always appear in homepage or inside the post? Or do you want the button to appear only in the homepage or only inside the posts?

Basically, the code of blogger posts is as below:

 

<data:post.body/>

 

The simple logics, if you want to place the button above the posts, just place it above the code. In the contrary, if you want the button to appear under posts, just place the button code under the above code. See the simple illustration below:

The button appears above posts:

< facebook like  button code here >

<data:post.body/>

 

The button appears under posts:

<data:post.body/>

< facebook like  button code here >

 

The button appears only in the homepage:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<data:post.body/>

< facebook like  button code here >

</b:if>

 

The Facebook like button appears only the single posts:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

< facebook like  button code here >

</b:if>

 

The above is only the illustration. Below is the real way to install the Facebook Like Button, but as an example, I only will show you how to install the Facebook Like Button under posts and will also appear both in homepage as well as in the single posts.

Please login to Blogger with your ID

 

  1. Click Design.

    design

  2. Click Edit HTML.

    edit-html

  3. Backup your blog first by clicking Download Full Template .

    download full template

  4. Check the small button next to Expand Template Widget.

    expand-widget-template

  5. Please find the code below in your template (tips: press Ctrl +F and then paste the code into the field that appears)

     

    <data:post.body/>

     

  6. Copy the code below and then paste it under the code above:

     

    <iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;action=like&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;font=arial&amp;colorscheme=light&quot;' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/>
    

     

  7. Click SAVE TEMPLATE.
  8. Done

For other variations, please refer to the illustration that Kang Rohman has written above.

 

For wordpress.org users, you also can do this trick, how? Let’s wait for the next post.

Save and Share!
Stumble Digg Tweet Save Reddit More

0 Comments:


Post a Comment