Blogger: Add Facebook "Like" button to each post

Amit, over at Digital Inspiration, laid out some simple steps to getting the new FaceBook "Like" button onto your Blogger site. If only it had worked for me...

But, being a developer, I dug a bit into the Blogger templating engine and figured out how to make it work for real in a modern template. The snippet you want is:

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

The "expr:src" tells the engine to interpret the XML attribute as an expression. The single quotes allow you to nest double quotes inside. The quoted sections are the parts that won't change, and the "data:post.url" is replaced with the fixed url for the given post.

As to where to put it, that really depends on your intention and current blogger template. In general, though, you need to edit your HTML template:

Layout Tab -> Edit HTML

Warning! Manually editing your template can hose your entire blog if done wrong. Be sure to back it up (instructions are on the Edit HTML page), and don't blame anyone but yourself if you mess it up!

In the edit box, search for "<b:includable id='post' var='post'>". That is the beginning of the post template. You should be able to make out the various parts of the post (comments, edit button, title, etc.) Try pasting the above snippet in various areas and then pressing the "Preview" button. (This lets you try it before you "buy" it ;) If you get a working "Like" button on each post, you are done!

Good Luck!

UPDATE 1 - No Line Breaks

In case you have issues, here is the version with all the clarifying formatting removed and no line breaks:

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

Note: When you paste this into the HTML editor, ensure that the snippet begins with "<iframe" and not "&lt;iframe". The snippet had to be escaped in order to display correctly in the HTML of this blog, but you need the real deal.

In addition, if you are using the blogger in draft template designer, be aware that there are some HTML editor errors that occur under certain conditions. If you are getting a mysterious error code, try switching to the draft HTML editor. (while on the Edit HTML page, replace "www" in the address bar with "draft") I had to change some attributes from having the value "" to having " " (a space) in order to work.

UPDATE 2 - String escapes

As reported by some readers, the previous drafts of this post were not correctly formatted. Inside the expr:src quoted strings, you need "&amp;" instead of "&". The above examples have been updated to allow for direct copy and paste.