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

Asked 17/6, 2011 at 12:6 Answered 18/6, 2011 at 8:8

Solved javascript facebook facebook-like facebook-javascript-sdk

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:

(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:

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

Above answered 17/6, 2011 at 12:6 Comment(6)

Last page like button seems to work normally for me. Maybe you could be hitting some kind of spam control if you try to test too many like buttons too fast? – Clausius 17/6, 2011 at 14:29

last button is working indeed, the 6th isn't. I noticed a little URL mistake in the meta date. That fixed '67', but '66' is still not working. – Above 17/6, 2011 at 14:51

Hah! I've always told people Facebook is bad. Totally using this question/answers as a reference for my future rants! :P Just kidding, but good luck with this. <3 (P.S: Twitter rules.) – Dialectologist 20/6, 2011 at 7:24

Try replacing the ? in your fb:url with &63; The HTML entity of the question mark. Wellicht is dat het ;) – Antimalarial 20/6, 2011 at 7:40

You should use the IFRAME version !! Why do you want to use the fb:like stuff as it is replaced by an iframe anyway (the iframe is loaded by some JS when it parses the fb:like tag ... ??? – Belorussia 22/6, 2011 at 13:10

Because the next step is to do more with the FB API, not just like boxes. – Above 2/7, 2011 at 6:21

Seems like Facebook needs a lot of time to process changes in your meta tags. For instance the admin tag took a couple of hours before it showed me the error link (turning layout to "standard" shows an admin message if there's an error).

Strange thing is the error I guess is a false URL, but the meta+fb:like URL are good. I guess it's a little error and will be fixed soon. Too bad no one else knows anything about this issue tho.

Above answered 18/6, 2011 at 7:54 Comment(0)

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

Finn answered 18/6, 2011 at 8:8 Comment(10)

Sharp! When I noticed there was nothing appended to fb-root I deleted this div. I added it back to the page. Thanks for the help. See my edited post (bottom) for the last changes. – Above 18/6, 2011 at 8:20

Yeah, that confused me too. In my opinion Facebook developers could have easily made it work without this div. Not to mention the fact that people sometimes have multiple like buttons on the same page, and this forces the developer to have several elements with the same ID in the same document. Even a crappy intern knows that's a bad idea, but we are talking about Facebook developers here, and I could rant for hours about how bad they are. So did it work after you fixed the misplaced slash? – Finn 18/6, 2011 at 15:16

Still haven't fixed it. The misplaced slash is caused by something but I don't know where. the og:url and fb:like-href are 100% correct, but still some pages are going wrong. I added an utf8 header to test if that caused the problemen, but it doesn't work. I even don't get an 'admin error' link on the new images like I have on 'number 66'. Getting mad here :( – Above 18/6, 2011 at 18:33

utf-8 isn't the problem solver either.. any other suggestions? – Above 19/6, 2011 at 9:11

It seems to work for me, on both 66 and 67. Did you fix it? If you hadn't, I was going to say that you could try the iframe like button directly instead of the xfbml one. The url linter gives you the code for the iframe version, although you may have to play with the sizing of it. – Kilmarnock 19/6, 2011 at 21:16

I edited my answer (see above)... hopefully that fixes your problem. If it doesn't, I would try pasting the facebook code EXACTLY as it is generated and/or try the asynchronous version found here: developers.facebook.com/docs/reference/javascript/FB.init – Finn 20/6, 2011 at 7:21

@Melinda: I think it's because I liked this post on Facebook Litner, after I like on using the Litner tool, the button automatically works on the website aswel. There are some new images posted that to exactly the same thing as 66. @Scott: the button is exactly the same, only difference is the URL that is parsed with PHP. I'll try the asynchronous version and check your answer. Thanks. – Above 20/6, 2011 at 10:7

@Scott: I replaced the fb-root tag, however the page you gave in your comment shows the fb-root tag in front of the script. Should I keep both on the page or only 1 reference in front of the fb:like button? (last scenario is how I uploaded it right now). – Above 20/6, 2011 at 10:11

If everything works after you run it through the Linter, you could just do that programmatically whenever a new image is added, with "curl developers.facebook.com/tools/lint/?url={YOUR_URL}&format=json" – Kilmarnock 20/6, 2011 at 15:48

@Melina, seems like the right thing to do, I will test this next monday (just came back from holiday). Can you please add this as an answer so I can accept it if this is the working solution. – Above 2/7, 2011 at 6:19

Strange thing is the error I guess is a false URL, but the meta+fb:like URL are good. I guess it's a little error and will be fixed soon. Too bad no one else knows anything about this issue tho.

Above answered 18/6, 2011 at 7:54 Comment(0)

Recommended topics

Hot tags