Question

Hi i got a working facebook like button. However, facebook is blocked by my company thus my facebook button has been replace with a big company logo saying this is blocked.

How could i resolve this and give more confident to my user? I thought of this
1) When it detect the object is blocked by proxy, then hide the object(facebook button).
2) Reduce the size of the blocked image which has replaced the facebook like button.

Could you advice?

Answer 1

Here’s a slightly different approach that I suggested to someone recently having the same issue. If Facebook is blocked, the ‘like’ button serves no purpose on the page. You can’t see how many likes and you can’t interact with it, so why display it at all?

This little piece of Javascript detects whether Facebook is blocked by attempting to load an image from Facebook’s servers. If the image cannot be loaded, we add a class to the body tag which hides the iframe.

Demo: http://jsbin.com/iguhu5

Try editing the URL by adding in a character, thus creating a 404, and see the iframe disappear.

Also, you could easily adapt this method to perform a slightly different task – displaying a message, for example.

Oh, and to be completely thorough, I should mention that there is one small caveat. If your company blocks ‘facebook.com’, but not its asset/CDN servers then you could potentially see the iframe even though Facebook would be blocked.