Embedding Facebook in an IFrame

Question

I have an app that has an IFrame with a page flash overly allowing you to draw on webpages. When I go to Facebook with the application, an overlay pops up covering everything at 50% opacity (Which is fine). The problem is that the overlay is all black in some installations of IE7. Can anyone advise on how to get around this?

Here is my code:

<iframe name="test" ID="test" src="http://www.facebook.com/cyberkruz" height="200" style="width: 100%; height: 100%" allowtransparency="true"></iframe>

Here is the code that they generate that does this.

<div style="z-index: 1000001; position: absolute; filter: alpha(opacity = 50); WIDTH: 9999px; background: black; height: 9999px; top: 0px; left: 0px; opacity: 0.5;" onclick="top.location.href=window.location.href"/>

Is there something I can do with meta tags or something to get the filter alpha to work correctly?

Answer 1

Matthew Kruskamp

Loading Facebook into an Iframe and using overlay on the page falls into Facebooks Prohibited Functionality. MORE: http://developers.facebook.com/docs/guides/policy/examples_and_explanations/Prohibited_Functionality/

Apps that appear to take over a person’s Profile or other pages on Facebook.com are not permitted. This functionality runs counter to our efforts to educate users on how to identify safe and authentic Facebook services to avoid situations such as being phished. For more information on use of Facebook brand assets, please visit the Brand Permissions Center.

Answer 2

Basically, you cannot do this as you cannot modify items inside an IFrame like this. The only option is to screenshot the requested page and then display it over top.

Answer 3

I suppose this can be solved with CSS...

I don't see why this shouldn't work if You put a div above it, but I belive You that it doesn't work:) As for the solution with weird ie8 namespaces - there is something similiar for ie7. I saw that on MSDN

...but

You can try using PNG background. Not an ordinary PNG, but a 8-bit one that works in ie6 and above and almost everything! It's like a transparent gif, but with opacity instead of full transparency.

read HERE

You'll need to find a tool that creates them. GIMP doesnt (AFAIK)

Answer 4

If this is a security restriction and your application page is stored locally you might try to add the mark of the web (http://msdn.microsoft.com/en-us/library/ms537628(VS.85).aspx ) to your web page (this will prevent IE to consider it a local page and run local security policy on it )