3

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!

Community
  • 1
  • 1
jblary
  • 33
  • 1
  • 5

2 Answers2

0

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

Nitzan Tomer
  • 155,636
  • 47
  • 315
  • 299
0

You most certainly can do this:

var iframe = $("iframe", "#fbtest");
iframe[0].src = iframe[0].src.replace(/&href=(.*?)&/, "&href=" + encodeURIComponent(url) +"&");
Art
  • 5,864
  • 3
  • 30
  • 32
  • Do you think it's a "clean" method (in case of the FB parsing method) ? – jblary Jun 04 '12 at 18:45
  • It's as clean as any method. FB.XFBML.parse() is just one way to inject social components into your site, however you can add a like button with the raw IFRAME code yourself, which Facebook also supports. That way you don't have to load their Javascript library. This would be the correct solution and the only way to actually do what you want. – Art Jun 04 '12 at 20:09