Button "Like" Facebook on each blog post

In this tutorial, we will place a button "Like" Facebook on each blog entry. This button will allow your readers, post a link on your wall to the entrance where the button is located. In addition, we will reveal the number of votes per inning, allowing to assess the popularity of it.

If you are using one of the templates that come by default in Blogger is possible that your tickets at the bottom of the toolbar buttons appear to share

Disable the button bar to share Blogger

Remember that the goal of this tutorial is to substitute these buttons (just visual) for both official Facebook buttons (this tutorial) and Twitter button and the + Google button , as you can see in this blog. My recommendation is therefore hidden.

Hide Standard toolbar buttons to share Blogger

• Enter the Design Tab
• If you are using the old interface , also click on the tab "Page Elements"
• Click "Edit" under "Blog Entries"
• Uncheck "Show buttons to share"

Place the button "Like" on each blog entry

• Step 1. Access the HTML editor and make a backup before making changes
• If you are using the new Blogger interface
• Go to "Template Tab" and go to the bottom of this page.  
• Make a backup copy of the template by clicking "Backup"
• Click on the "Edit HTML template"
• Click on "Expand Widget Templates"
• If you are using the old interface Blogger
• Go to the "Layout tab" and then go to "HTML Editor"
• Make a backup copy of the template by clicking "Download full template"
• Click on "Expand Widget Templates"
• Step 2. Find the following code in your template:
• Use the search browser by pressing Ctrl F or Ctrl B and find this text:
• To place the button at the bottom of the Find:
  post-footer-line post-footer-line-1 I recommend you copy this text and in the search peges.
• To place the button in the header of the entry for:
  post-header-line
  I recommend you copy this text and in the search peges.
• The button code will just below the line you just found
• Step 3. Copy the button code "Like", you have two options:
• Option 1. Button "Like"




<Iframe expr: src = '"http://www.facebook.com/plugins/like.php?href =" + data: post.url + scrolling = "no" frameborder = "0" allowTransparency = "true" style = "border: none; overflow: hidden; width: 450px; height: 21px"> </ iframe>

• Option 2 (updated 26/04/2011. Button "Like + Send" New!

<script src='http://connect.facebook.net/es_ES/all.js#xfbml=1'/> <fb: like expr: href = 'data: post.url' font = 'Arial' layout = ' button_count 'send =' true 'show_faces =' false '/>

• Step 4 Copy the snippet and paste it just below the line found in Step 2.
• Step 5. Save the template and displays the Blog

You can vary the look of the button with the parameter layout. The possible values ​​are: standard, or box_count button_count. More information on the Facebook developer page

Note: As mentioned at the beginning, our goal is to replace the standard toolbar buttons to share a few buttons on Blogger more visual, which is why I recommend you also place the button "Twitter" and button "Google +" .


Below you can see and run the button "+ Send I Like." If you liked this post click on the button to recommend it to friends. Thank you.