1

Recently facebook rolled out some changes which have apparently broken like button functionality on on pages I'm working on, particularly for urls that point to a photo (photoset) on facebook, e.g. a facebook button like

<fb:like href="http://www.facebook.com/photo.php?fbid=ID&set=SET" ....></fb:like>

The button renders, however when I click 'like' it immediately 'unlikes' itself afterwards. *Non-facebook URLs work fine with the like button, only URLs that point to photos/content on facebook cause the like button to immediately unlike itself after it's clicked. The buttons are generated via the JSSDK as iframes. Is there a solution to this problem? We're not using og metadata.

2
  • Have you included the SDK twice or something that would have a similar effect? Because it sounds like your 'like' event is firing twice and so immediately liking and then unliking the link.
    – Simon
    Jul 15, 2013 at 13:37
  • Nope. It only occurs with URLs that point to photos/content on facebook. Other URLs are fine. I should update that to say only.
    – Ford
    Jul 15, 2013 at 13:42

2 Answers 2

2

Facebook like buttons strips all the get parameters of urls, so although you have this

<fb:like href="http://www.facebook.com/photo.php?fbid=ID&set=SET" ....></fb:like>

The url retrieved by facebook is this

<fb:like href="http://www.facebook.com/photo.php" ....></fb:like>

EDIT

As you may have not noticed on the 10th of july one of the break changes is the url of the social plugins

Social plugins will require an absolute URL in the 'href' parameter Social plugins, such as the Like Box and Like Button, will require an absolute URL in the 'href' parameter.

https://developers.facebook.com/roadmap/#q4_2013

1
+50

I've always encountered issues with using Facebook's developer tools with resources on its own domain and, for that reason, always recommended "proxying". In other words, you would create a unique resource on your web server to represent the Facebook photo, this resource would garner likes and shares, but when a user visited the page, they would be redirected to the real photo.

For example:

<fb:like href="http://www.example.com/fakeresources/photo.php?fbid=ID&set=SET" ....></fb:like>

When you load http://www.example.com/fakeresources/photo.php?fbid=ID&set=SET:

<meta property="og:title" content="The Rock" />
<script>top.location.href="http://www.facebook.com/photo.php?fbid=ID&set=SET";</script>

Unfortunately, for the og:image tag, you will also need to create a proxy, because the Facebook scraper will often not fetch from its own servers.

I've even encountered times when Facebook will not fetch from a URL because the URL has a query parameter which looks like a URL which is on its own servers, for example:

http://www.example.com/fakeresources?url=facebook.com/photo.php?fbid=ID&set=SET
(query parameter not url-encoded for readability)

For which, encoding the URL with rot-13 is sufficient.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.