new Facebook Like button for Blogger

Question

I want to add the new facebook like button to my blogger website. http://developers.facebook.com/docs/reference/plugins/like

I have to pass the url to the blog posts in the iframe src tag. I can get the blogger posts url from <data:post.url/> but I can't put that in a src string because Bloggers 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=&lt;data:post.url/&gt;&amp;amp;layout=standard&amp;amp;show-faces=true&amp;amp;width=450&amp;amp;action=like&amp;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." Anybody have this working yet?

Answer 1

Ah you have to have &quote; and use expr: like this: http://bloggerstop.net/2008/12/how-to-add-social-networking-buttons-to.html

Answer 2

this guy is using it too > on a blogger template!!! http://www.chethstudios.net/2010/04/chethstudios-redesigned.html scroll down and see it.

Answer 3

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 ;)

Answer 4

this also doesn't work bro

Answer 5

Agreed. Doesn't work

Answer 6

I got it to work on my Blogger blog--I just pasted the code in an html gadget.

Answer 7

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=&lt;data:post.url/&gt;&amp;amp;layout=standard&amp;amp;show_faces=true&amp;amp;width=450&amp;amp;action=like&amp;amp;font=verdana&amp;amp;colorscheme=light&amp;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/

Answer 8

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

Answer 9

I used Jorge's solution and it worked perfectly! Thanks!

Answer 10

I have a step-by-step guide for using the iframe method on my blog: http://c-sharpener.blogspot.com/2010/04/blogger-how-to-add-facebook-like-button.html

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.

Answer 11

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'/>

Answer 12

jorge, your method is cool.. btw thnx! its work in my testing blogger account.. futhermore i doesnt know that it can be write in js.. (as u know i'm a newbie in this arena, n have no education through this, i learn all this by myself from internet..).. thanx a lot!

Answer 13

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

Answer 14

how can remove that error that you given below of facebook like button

Answer 15

Hi,

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...