Question

I’d like to refresh dynamically a fb:like plugin into my page.

For exemple, into index.html, I have :

<fb:like id="fbtest" href="http://www.urltest.com" send="true" width="450" show_faces="true"></fb:like>

(Facebook is initialized, and all works perfectly.)

Then, I’l like to change dynamically the URL of this like button.
So, with jQuery, I do :

$('#fbtest').attr('href', 'http://www.urltest2.com').empty().off().removeData();
FB.XFBML.parse();

And it’s doesn’t work… It only work when I remove the fb:like tag, and recreate it (exactly the same DOM !).

As you can see here: Update FB:Like URL Dynamically using JavaScript ,
All methods described recreates the fb:like tag… I need to refresh an existing fb:like… not recreate it. Is it possible ?

EDIT : Here’s a fiddle for testing 🙂 : http://jsfiddle.net/nRTkS/

Thanks!

Answer 1

No, I don’t think that it’s possible.
The FB.XFBML.parse method, as it’s name implies, just parses:

This function parses and renders XFBML markup in a document on the fly

Once a plugin has already been rendered it won’t be re-rendered, otherwise the behavior could be a bit strange if for example you have more than one plugin on the same page, you change the url attribute in one like plugin and then call FB.XFBML.parse which will re-render the entire document and plugins in it.

So yeah, you can make sure that you call the method while passing it the element to start with, or the sdk can just maintain a state for each plugin and re-render only if that changed, but all of that is more complicated then to just remove the plugin from the dom, enter the new fb:like tag and then call FB.XFBML.parse.

Now, for what I believe is the real reason, but it’s just a guess.
The sdk creates an iftame inside the plugin container which contains the actual plugin.
In order to change the url for the like action there’s a need for cross domain communication which I think is possible (for the fb sdk) only in one direction which is from the plugin to the containing page (hence edge.create event).