Facebook provides a social plugin which allows developers to customize the Like button and generate code for their sites. It’s found on the Like Button Social Plug-in page.

In order to feed your blog’s post URLs to the Like button, you need to customize the code according to the template syntax of your blog software. Below, you’ll find a generic Like button’s code modified for three different environments: Classic Blogger, Modern Blogger, and WordPress.

Blogger

Classic Blogger Templates

If you see the blue/tan/orange design with tabs across the top of the screen, you are using Classic Blogger. This code applies to you.

<iframe src="http://www.facebook.com/plugins/like.php?href=<$BlogItemPermalinkUrl$>&layout=standard&show-faces=true&width=530&height=60&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:530px; height:60px"></iframe>
  1. Log into Blogger and click the Template link on the dashboard, next to your blog’s name.
  2. If don’t see HTML code, click Edit HTML.
  3. Paste the above code between the following tags:
    <!–– Begin .post ––>
    <!–– End .post ––>

Putting the code on a line close to the “Begin” comment will show the like button at the top of your post near the headline. Placing it further down, closer to the “End” comment will display the button after the post’s content. Experiment with different placements, save your templates and check your blog to see what the results look like. Repeat this process until you are satisfied.

Modern Blogger Templates

If you see the sleek white & gray design when logged into Blogger, you are using modern templates. The following code is what you should use.

<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show-faces=true&width=530&height=60&action=like&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px' allowTransparency='true'></iframe>
  1. Log into Blogger and click on your blog’s name.
  2. Click Template.
  3. Click Edit HTML.
  4. Read the warning about editing HTML, and if your are comfortable making these changes click Proceed.
  5. Place a check in the box labeled “Expand Widget Templates”.
  6. Hit CTRL+F (CMD+F on Mac) and search for this tag:
    <b:includable id=’post’ var=’post’>
  7. Paste the Like button code somewhere within the indented block of code beneath the b:includable tag.

There’s a large amount of code in this block, and if you’ve never edited HTML before it will appear intimidating. But it’s all human readable, and you can deduce the meanings of each tag by interpreting the various id’s and class names. For instance, there is a section labeled “share buttons”, and a few div’s with the class “post-footer-line”. These elements appear after your post content.

In general, paste the code at the top of the code block near <b:includable> to display the like button near your post headline. Put it at the bottom near the closing tag </b:includable> to make it show up near the end of your post.

WordPress

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink()); ?>&layout=standard&show-faces=true&width=530&height=60&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:530px; height:60px"></iframe>

WordPress templates can be edited by clicking Appearance, then clicking Editor. You’ll see a list of .php files — each one corresponds to a different part of your site.

Traditional Templates

Place your code somewhere between the following tags:

<?php while (have_posts()): the_post(); php?>
<?php endwhile; php?>

You can make this change in a number of different files, affecting different parts of your site. Read “Template Hierarchy” in the WordPress Codex to understand which PHP files control which portions of your blog.

Modern Templates (“The Loop”)

Some WordPress templates contain a core structure called “The Loop”. This template is used throughout your blog to display one or more posts. You’ll find it in the file loop.php. This loop template also contains the looping structure from above… place the like button code somewhere between these two tags:

<?php while (have_posts()): the_post(); php?>
<?php endwhile; php?>

After making this change, save it and refresh your blog to see the results. You can go back, re-edit and refresh until things are satisfactory.

Now visitors will see a Facebook Like button alongside each post on your blog. Clicking it will trigger a “Like” for that individual post.