How to Add a Facebook Like Button to Your Post

The facebook Like button replaces the previous facebook Share button. When you add it to your post, your visitors can easily share your post on their facebook wall with just a click. You can add a facebook Like button below your Post Title, below the Post, or both. Just follow these instructions. (Even though these instructions are written using Blogger's New Interface, they are still appropriate for the old interface except possibly in the navigation.)


From your Dashboard click on Template from the drop-down menu as shown in the image below. (You can click on the image to enlarge it if you need to.)

From the Template screen, click on the HTML button. A window will open up with some cautionary information. Click Proceed. Don't worry you won't mess anything up. :)

In the EDIT HTML screen, check the box that says Expand Widget Templates.

If you want the Like button to appear below the Post Title, find the code that looks like this (or very similar to it):

<div class='post-header-line-1'/>

If you want the Like button to appear at the foot of the Post, find the code that looks like this (or very similar to it):
<div class='post-footer'>

The easiest way to find the code is to hold down the CTRL key on your keyboard and press the letter F. A search box will open where you can enter the code you are looking for and it will take you right there in the HTML section.

Once you have located the code, copy the following code and paste it directly below the code above. Be careful to copy all of code exactly as it appears below.

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


The pasted code will look like this. The green code is what you look for, the red code is what you paste.

    <div class='post-header-line-1'/>

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



Now click the Preview button located just below the HTML field box. Your preview should show the facebook Like button in the appropriate place. If it isn't right just click the Cancel button below the HTML field box and try again. If it is as you want it, click the Save Template button.

The Like button will automatically appear on every post.

If you are having trouble or just don't want to do it yourself, I can do this for you for $5.00. Just use the Payment Button in my sidebar and specify what it is for. Be sure to provide me with an active email address to contact you. I will need access to your Blogger Admin to install the code.

Click to LIKE my Facebook Page for more tips.

All content on this site is copyright protected. Using or obtaining the graphics on this site in any way other than specified on this site is a violation of the copyright. Please respect my work.© 2008-2011, Edie Moore