I have a website that integrates a fan box and a few other things from facebook. to get everything to look right, i've implemented FBML as follows:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en" lang="en">
it does actually work just fine, except I've found that my client's company has a block in place on employees so they can't access Facebook. This however is causing the site to blow up and not load completely as the firewall won't allow the FB code on this site to fire correctly.
As I don't have this block in place, i'm having trouble replicating it remotely and haven't been able to pin point exactly what it's doing that's causing it to display incorrectly.
In short, is there something I can implement in the code to check and see if FB is accessible and only fire the fbml if it is? I'm using PHP and Jquery primarily for the site.
Thanks in advance.
edit: Code snippets as requested
From the beginning:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en" lang="en">
Then within the page calling a fanbox:
<div id="fbbox">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<div id="fb-root">
<fb:fan profile_id="xxxxxxxx" width="235" height="200" connections="12" stream="false" header="false" css="http://www.xxxx.com/xxxx.css?33" ></fb:fan>
</div>
<script>
<!--
window.fbAsyncInit = function() {
FB.init({appId: 'xxxxxxx', status: true, cookie: false, xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
-->
</script>
</div>
I have xxx'ed out some of the specific settings, but I can assure you these are correct in the actual code.
depends on how the site is blocked. you could just load a small image from facebook, and then check the dimensions in javascript. so you see if they turn out to be correct. for that i would suggest using the permanent url of your profile picture you get from the api docs, as it wont change and always delivers an image of the same size (according to the docs).
ex: http://graph.facebook.com/joseph.hopfgartner/picture
you could also play with the facebook cross-site-script reciever.
another possibility is to load something from facebook in an iframe. the location property will (as the only property) be readable by your site. you could use an url that will be redirect (as for example the profile picture url).
however this was to answer your question, but i think its not a solution. your site should really not "not load" if some resources are blocked!
your html attributes can't cause that so you messed something else up
could you provide more code or a link on your implementation?