How can I add Facebook's "like" button to a Blogger blog?

I want to add the new facebook "like" button to my Blogger website.

I have to pass the URL to the blog posts in the iframe src.

I开发者_Python百科 can get the Blogger posts URL from <data:post.url/> but I can't put that in a src string because Blogger's template system is weird.

I want to do this:

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

but Blogger complains:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.

XML error message: The value of attribute "src" associated with an element type "null" must not contain the '<' character."

Does anybody have this working yet?

try this,

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

Use this tutorial to add the like button - FB has rolled out a new design for the like button - http://www.bloggerplugins.org/2010/04/facebook-like-button-for-blogger.html

I wrote a step-by-step guide for using the iframe method on WikiHow: http://www.wikihow.com/Add-Facebook-Like-to-Blogger

Let me know if it doesn't work for you. Essentially, your src needs to use the expr:src syntax, with string/data concatenation.

The JavaScript version is claimed to be more flexible, but there are still many people who disable JavaScript in their browsers or use some NoScript add-on.

STEP 1: kindly apply JavaScript SDK to your template.

STEP 2: find this line <b:includable id='post' var='post'>

STEP 3: put this after it

<b:if cond='data:post.url'>
  <fb:like action='like' colorscheme='light' expr:href='data:post.url' layout='standard' show_faces='false' width='450'/>
</b:if>

Save it and your done ;)

I was also having the same error when changing the template. So I found a solution by using the JavaScript function document.write:

    <script>
    document.write('&lt;iframe src=&quot;http://www.facebook.com/plugins/like.php?href=<data:post.url/>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowTransparency=&quot;true&quot; style=&quot;border:none; overflow:hidden; width:450px; height:80px&quot;&gt;&lt;/iframe&gt;');
</script>

Just place the above code at the end of your blog post section.

Two notes:

• Irwan's solution should work (I haven't try it) but it means that the FB SDK must be loaded. That might be an issue for who is concerned with the blog performance.

• Maggie's solution works fine but it doesn't allow one to like the posts independently.

One can see it working here: http://fliscorno.blogspot.com/

Juan Jorge's solution should work.

IMHO using the javascript SDK on blogger is much more elegant than using the iframe approach (I tried both on my blog).

Here is a link to several posts I've made on the subject (including using blogger expressions inside attributes and such and how to incorporate a like button using javascript sdk into your blog template):

http://blog.yanivkessler.com/search/label/blogger

Hope this helps...