Search code examples
facebook-likeblogger

Adding an fb like button to Blogger

Case 1: I use this code: (from http://www.mybloggertricks.com/2011/06/add-facebook-like-button-below-post.html)

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

When I click "like", a confirm button comes and when I click like in the new popup window that comes up, I am redirected to https://www.facebook.com/plugins/error/like/confirm

Case 2. I use an iframe from facebook developers,

<iframe src="//www.facebook.com/plugins/like.php?href=data:post.url&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80&amp;appId=324750880918583" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

the "data:post.url" used under href does not give me the url of the blog, but the string itself.

Case 3. So I tried the XFBML version from the link in Case 2, part of the code of which is:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=324750880918583";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

This is the error that blogger shows when I try to save the template.

Error parsing XML, line 1201, column 68: The reference to entity "appId" must end with the ';' delimiter.

Fixing any one of the above would help me greatly.

Solution

  • You have to cut this script from the HTML:

    <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=324750880918583";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

    then go to Blogger Layout, Add a Gadget, HTML/JavaScript, then past the script there.

    This should work! :)