Facebook blows up my webpage

Question

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.

This question is rather vague. You have no idea what part of your page is getting blocked in what way, so why should anybody else? ;-) Can't you walk over to/remote into your client and debug the problem from there? — Tomalak, Jan 11 '11 at 19:48
I'll see what I can do for screenshots - I'm reliant on a client for that as I'm remote. may take a while though. I realise it's a vague question, sorry - I'm having problems defining it myself too well. — TH1981, Jan 11 '11 at 20:15
+1 from me as well for the blowing title of the question, thank lord I didn't visit your webpage. — Kumar, Aug 07 '11 at 15:39

score 2 · Answer 1 · answered Aug 07 '11 at 15:33

If facebook.com is blocked for the user, the social plug-ins canot load anf therefore will not render on your site. You should check to see if the plug-ins load and if they do not replace the content with something that allows your site to continue to function without them.

score 0 · Accepted Answer · answered Jan 11 '11 at 19:53

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?

Thanks - that's all very useful info! I've not played with the cross site reciever so will have a look at that too. I will post some of the code for you to see as well. Thanks! — TH1981, Jan 11 '11 at 20:16
why dont you try just blocking facebook yourself? than you can test it most filters just work by blocking ip adresses. — The Surrican, Jan 11 '11 at 20:20
sadly, I'm not sure how to do that. I will have a look and see if I can figure it out for testing purposes. — TH1981, Jan 12 '11 at 01:37

Facebook blows up my webpage

2 Answers2