Question

I’ve created a music discovery webapp that I’m trying to integrate with Facebook. The frontend is essentially an interactive experience using HTML5’s Canvas, meaning that it all exists within one page.

I have some html code that exists over the canvas to display a facebook like button. This like button corresponds to the song that’s currently viewed in the canvas app. Using jquery, I’m dynamically changing the href of the fb:like, which works just fine. Similarly, I’m changing the URL of the site using window.history.pushState().

This works fine, except that the message that’s printed on a user’s feed when clicking the like button always pertains to the original page that was loaded (AKA the webapp without any songs loaded). As such, I started looking at using OpenGraph to alter said message.

According to facebook’s page on like buttons:

When does Facebook scrape my page?

Facebook needs to scrape your page to know how to display it around
the site.

Facebook scrapes your page every 24 hours to ensure the properties are
up to date. The page is also scraped when an admin for the Open Graph
page clicks the Like button and when the URL is entered into the
Facebook URL Linter. Facebook observes cache headers on your URLs – it
will look at “Expires” and “Cache-Control” in order of preference.
However, even if you specify a longer time, Facebook will scrape your
page every 24 hours.

As per above, I am now creating my own url’s that change dynamically (without reloading the site) each time the song is changed. I can relatively easily recode my server so that if anybody requests one of those URLs, the returned HTML file will include the meta tags that correspond to the song in question. Let’s pretend that I do this and I write a script to curl all those urls to facebook. If a user now clicks a like button on my webapp that corresponds to a given song, will the message correspond to the meta tags that were previously scraped by facebook, or would it just be the regular message that I’m receiving currently that is misleading?

Best,
Sami

PS If nobody knows the answer to this, I’ll code everything up tomorrow and let you all know.

PPS On a related note, does anybody know if using OpenGraph to alter the text of a like button click needs the scope="public_actions" attribute to be set to the fb:like element in the HTML code?

Answer 1

There’s no problem with what you’re doing, you just need to do two things:

1. Have the server return the correct og meta data per url that users can share.

2. After dynamically changing the like button container data, you need to call the FB.XFBML.parse method. I’m not sure how well it will work if you only change the href property, I would suggest that you completely remove the like button from the dom, insert a new fb:like and then call FB.XFBML.parse.