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!
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).
You most certainly can do this:
var iframe = $("iframe", "#fbtest");
iframe[0].src = iframe[0].src.replace(/&href=(.*?)&/, "&href=" + encodeURIComponent(url) +"&");
Related
I'm trying to add a link to allow a user to refresh the Comments plugin on my page so they can see other posts by other people.
I want to do it without refreshing the full page.
There's a html5 player on the page playing audio, hence me not wanting to interrupt that player.
Currently I'm using the standard -
I've tried the jQuery method of giving the div an id and having a header script which counts to 10 and reloads the div widget, it seems to reload the widget, but it doesn't update the contents of the comments plugin to show other's posts, just ones you've added yourself. To see all the updates you have to refresh the page fully, which I don't want to do.
I'm trying to avoid iFrames because of the height issues and extra scroll bars, etc.
Any ideas would be appreciated
I'm not exactly sure what you're trying to do, but you can use the FB.XFBML.parse method to refresh plugins.
The only thing is that you'll need to first remove the old plugin from the dom, then add the new html5/xfbml placeholders (what you get from the comments plugin page when clicking "get code") and then use the FB.XFBML.parse method.
I implemented facebook comments across a legacy, custom CMS. I used the XFBML implementation. Everything works as expected except when clicking the links back to the article page from a commenter's facebook feed the comment box does not show any comments. The link is of this form:
{Article URL}?fb_comment_id={comment_id_string}
And if I remove the comment parameter and only go to the article url the comment box renders correctly with the comment and all other comments on the article. So, it's some issue with the fb_comment_id parameter. One weird thing about how I had to implement the comments is, because of how the routing on the site works, I could not use server side code to set the the URL parameter in the <fb:comments> object. So I had to use this jquery code in the <head>:
<script>
// assign current page to comments url
$(document).ready(function() {
$('fb\\:comments').each(function(){
$(this).attr('href', window.location);
});
});
</script>
And used this for the actual <fb:comments> code:
<fb:comments href="{site's root URL}" num_posts="8" width="570"></fb:comments>
So, I figure doing this client side may be causing the issue. Not doing this server side is a hard constraint though, and everything else works so I'm hopeful there may be some way to make this work. If making the comment link work correctly is impossible, a reasonable hack would be to rewrite the link in the facebook feed so that it just points to the article url without adding the comment parameter. Any suggestions? Thanks!
NOTE: I've also tried using the html5 comments implementation and there is the same issue.;
Once facebook has rendered the iframe based upon your fb:comments tag, does it have the correct url? I am thinking it does not. You may have to call FB.XFBML.parse() after you inject the complete
I have a GWT app and Im trying to put fb social plugin comment in side of my page. However I have the folowing problem.
If I put the tag in my .html it works perfect, but If I put id dynamically (like with an HTML widjet), It does not work. It just does not display anything.
Can anyone help me? Im having this problem in general, not only with the fb:comment tag.
Note: If I use the iframe implementation of, for example, "fb:like", it works perfect.
My understanding of facebook's api is that it loads your content, and parses out the tags in the fb namespace, replacing them before the actual content is drawn for the user. In contrast, none of the GWT compiled code (or indeed any Javascript code) gets a chance to make changes to the dom until the page has loaded in the browser fully, after facebook has made the changes it needs to.
My advice: Put the fb namespaced tags on the initial page, but perhaps wrap them in a div and mark them as display:none. Then you can grab them from your GWT code and wrap them up in a widget, only to be displayed when you are ready.
I'm developing a WordPress plugin to show above or bottom the posts Facebook like and send buttons.
Unfortunately when is also activated a plugin for Facebook share button there is a Javascript error (FB.provide is not a function) and like and send buttons don't appear.
For example this happens in this page: http://www.pasqualepuzio.it/2011/04/plugin-facebook-like-and-send-button/
How can I solve this issue?
Thank you very much
I ´ve faced the same problem and it happens if you add the script twice on the site (http://connect.facebook.net/sv_SE/all.js)
I understood that part that we cant have all.js twice but I want to have Facebook Share Button and Facebook Like Button.
According to Docs, I need to include these two JS Files.
https://connect.facebook.net/en_US/all.js
http://static.ak.fbcdn.net/connect.php/js/FB.Share
Now, If I include both Firebug will give me same error "FB.provide is not a function". If I remove either of them then Like or Share button wont work.
I can do iFrame version but I have HTML Encoding issues with iFrame Version. I am programmatic generating HTML Response.
Any idea, how to approach?
There is a workaround for this: instead of placing the javascript Fb.Share within the same page where you are loading the Javascript SDK, use an Iframe with the first and set it in the second.
Situation: I am running my website on wordpress. I have installed the "Simple Facebook Connect - Base" plugin and configured it by getting the API key for my website. Then I inserted the like button on my own at my own preferred place in the page using i-frame. It worked fine.
Problem: But I thought to try the XFBML version. I loaded their JS SDK as said here. But now, when I try to use the fb:like tag, nothing appears. Chrome's javascript console tells me that the div in which I wrote the XFBML tag is of zero height.
Question: How do I get through this? Is there anywhere that I went wrong.
Check that you are calling FB.XFBML.parse either on the whole document, or the elements that you want to be parsed for XFBML. The old JS library used to do this automatically, but in the new one you have to do it manually.