multiple facebook like buttons (fb:like) are not working: unliking themself

Question

EDIT: LAST UPDATE:

So, we've tested some more. I used the facebook developers 'lintner' http://developers.facebook.com/tools/lint/. There are no errors found on either one of my pages PLUS the like button on the lint-page is working perfectly. If I switch back to my own website, I can clearly see my like has been counted.

The weird thing is.. if I remove the like on my own page and am magically able to add the like from my own website.

The last thing I've changed just now is changing my doctype to STRICT//EN, since this was the only part I found different from some pages using the like buttons and mine...

---

I've been searching this bug for a while now, but I can't seem to find the problem. There are many pages I've used to get the information I needed:

1. http://developers.facebook.com/docs/opengraph/
2. http://www.proworks.com/blog/2010/04/28/add-advanced-javascript-sdk-and-fbml-facebook-likerecommend-button-features-to-your-website/
3. http://www.hyperarts.com/blog/how-to-add-facebook-like-button-social-plugins-to-wordpress-posts/
4. http://www.1stwebdesigner.com/tutorials/facebook-integrate/
5. http://developer.practicalecommerce.com/articles/1857-Two-Easy-Ways-to-Add-the-Facebook-Like-Button-to-Product-Detail-Pages
6. http://developers.facebook.com/docs/reference/plugins/like/

(and besides these numerous posts here on stackoverflow concerning similar issues)

But after all reading I'm still not sure whats going wrong. On most pages the like button works fine (for me it is at least, not sure what's happening if someone adds a like since I haven't spotted a '2' yet).

These are the current pages with a like button:

1. http://ontwikkel.fotoactie.nl/pic.php?id=61
2. http://ontwikkel.fotoactie.nl/pic.php?id=62
3. http://ontwikkel.fotoactie.nl/pic.php?id=63
4. http://ontwikkel.fotoactie.nl/pic.php?id=64
5. http://ontwikkel.fotoactie.nl/pic.php?id=65
6. http://ontwikkel.fotoactie.nl/pic.php?id=66
7. http://ontwikkel.fotoactie.nl/pic.php?id=67 (just added)

In my case, the last button (nr 6 + 7) adds a like when I press the button, but also it automatically removes the like after I did so. For a second the comment box pops up, but in a split second it fades out aswell and the counter jumps back to 0. When I remove one of the likes from link 1-5, it removes it as it should and I can add it without it being removed.

For what I've read I had to use the Facebook Javascript SDK in order to use the <fb:like> markup, which I've done. At first I used an application ID, but after some reading it was clear that the app-id is not needed for the like button.

Then I went on an spotted the required meta data tags. These are the once I placed on the page:

<?php if($curPicTitle != false) { ?>
<meta property="og:site_name" content="<?=URL;?>"/>
<meta property="og:type" content="article" />
<meta property="og:title" content="Fotoactie.nl: <?=$curPicTitle;?>"/>
<meta property="og:url" content="<?=URL;?>pic.php?id=<?=$pic;?>" />
<meta property="og:image" content="<?=URL;?>/photos/1/med_<?=$curPicUrl;?>"/>
<?php } ?>

Notice the PHP, it's only included if there's a valid image and the title, url and image are 100% sure unique for every page-title-image combination.

Then the like button is generated using PHP aswell:

echo '<fb:like send="false" href="'. URL . '/pic.php?id=' . $pic . '" layout="button_count" width="100%" show_faces="false"></fb:like>';

I tried removing the href from this part, but I believe that screw things up and making every image using the same URL (?!)

At the bottom of the page, right before the </body> tag, this code is placed:

<script src="http://connect.facebook.net/nl_NL/all.js"></script>
<script>
  FB.init({
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true  // parse XFBML
  });
</script>

I would be gratefull if anyone is able to test the like button on the last page (and the other pages if neccesary). This is no 'like my stuff' post, these photo's are demo images and will be removed after everything works fine.

Thanks in advance.

/ EDIT

So I added the admin & app ID to the meta tags and waited a couple of hours, then I got the error message:

De pagina op http://ontwikkel.fotoactie.nlpic.php/?id=66 is niet bereikbaar.

Which is translated: The page on http://ontwikkel.fotoactie.nlpic.php/?id=66 cannot be reached.

Obviously it's because the missplaced '/', but the strange thing is, every page is working except some rare cases. It's all build up automatically using PHP so in my eyes the FB Button should behave the same in all cases.

The source on the page of the button (link #6 above: ?id=66) is correct..

Answer 1

You appear to be missing <div id="fb-root"></div> from your code. I'm suprised it works at all actually. See this for more info: http://developers.facebook.com/docs/reference/javascript/FB.init/

If that doesn't fix it, try including an admin id or app id as described in this stackoverflow thread. Facebook like button is automatically undoing itself

Edit: One more thing I would try is moving the <div id="fb-root"></div> directly above the facebook markup. I noticed that you have it right above your script tags, near the body tag. Although it is fine (and preferable) to load the facebook script after your page's content, it is my understanding that the facebook markup has to remain intact.

Your markup should look like this:

<div id="fb-root"></div><fb:like href="http://ontwikkel.fotoactie.nl/pic.php?id=66" send="false" width="450" show_faces="false" font=""></fb:like>

Put your script tags wherever...