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.
Related
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) +"&");
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.
Since 2 weeks ago it worked, and still works for old urls. but now for every new post the like button remain at zero, and if i press the button it blinks 1 but go back to zero immediately.
My site: http://arielmartini.com/
An old url that (still) works: http://arielmartini.com/2011-06-30-bixiga70
A new url that no longer works: http://arielmartini.com/2011-07-02-romulo
Even if I put the url here it doesn't work (try with the 2 url above - "URL to Like" field).
It appears that you're using both the old Facebook "Share" and the newer Facebook "Like" buttons. However Facebook Share (via static.ak.fbcdn.net/connect.php/js/ is the old SDK and is being deprecated).
You'll just want to use the new SDK (which you are correctly including) at http://connect.facebook.net/en_US/all.js.
I believe removing the conflicting "share" button will solve your problem.
Looking at the url you posted, there is a javascript console error (see image) which is causing the javascript code from continuing execution.
To fix it, remove this line of code from your wordpress site, or disable the plugin that is adding this line:
<script type='text/javascript' src='http://arielmartini.com/wp-content/plugins/fbconnect/fbconnect.js?pluginver=99&ver=3.1.4'></script>
You can't load both the deprecated fbconnect.js file as well as the new Facebook javascript sdk .js file that you load on line 435. If anything is relying on the old deprecated library, I would suggest upgrade as soon as possible because Facebook is killing deprecated functionality all the time.
The problem was that i didn't had open graph tags on my page. Using this plugin fixed it. You can also analyse the page using this link.
Recently I've been having troubles with displaying the like button on my homepage, no code was changed so I believe Facebook may be the culprit but I'm not 100% sure. Originally it was throwing "bootloader is undefined" errors in two places:
<script type="text/javascript">Bootloader.setResourceMap({"KhOUG":{"type":"js","src":"http:\/\/static.ak.fbcdn.net\/rsrc.php\/v1\/yo\/r\/wFcdvtg8yWA.js"},"uBXoU":{"type":"js","src":"http:\/\/static.ak.fbcdn.net\/rsrc.php\/v1\/yg\/r\/vnWtCAcBiXn.js"}});
And:
Bootloader.configurePage([]);
Both occur after the page querys the http:///www.facebook.com/plugins/like.php page.
But now it's throwing "bagofholding is undefined" error on:
function muffinize(d){var c='a';var b='d';var a=[c,b].join('');return d.replace(/muffin/g,a);}window.Util=window.Util||{warn:bagofholding,error:bagofholding,info:bagofholding,log:bagofholding,stack:bagofholding};if(typeof console=='undefined')console={log:bagofholding};
The Facebook Like button is implemented using the AddThis service but I checked all the lines of code and they seem fine. It doesn't seem like other sites are having this issue as well. All the errors are on Facebook's side.
It doesn't work here: http://importbible.com/2011/05/02/papercraft-skills-2012-audi-a7/
But works here: http://importbible.com/shop/shirts/group-buy/seventh-heaven-shirt/
The only thing I could think of that may cause issues is the HTML5 Boilerplate .htaccess file.
in my case my error was coming from having "share" buttons. The script for share buttons also defines "FB"... so the new "like" script and the old "share" script conflict. Once I removed the old script everything was fine. (However, "share", is better for my particular site...)
I seem to see the 'Bootloader is undefined' error when I set the href attribute of the fb like button to a non-existent page (a page that can't be accessed by the fb script file - such as the url on my dev machine / localhost).
After hunting around I found the answer, some of the meta data on my website was preventing the Like page to scrape my page. Using the Lint tool I was able to fix the errors on my page:
https://developers.facebook.com/tools/lint/
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.