2

I've switched my Facebook page to pull an iframe as a result of Facebook's recent announcement that they were supporting iframes in pages. Since you need to host the iframe page outside of Facebook, I figured it would be nice to do using Cloudfront to host the files (an HTML page, a CSS stylesheet and a jpg image). Unfortunately, despite setting the permissions on the Cloudfront files to 744, the iframe page loads correctly in a browser, but when called from Facebook, I get this error message.

When I host the same files on my Media Temple server, the iframe on the actual Facebook page also loads correctly.

Is there a reason why Facebook and Cloudfront don't play together? I haven't been able to find one so far.

1
  • OK, it can be done: but you need to host the images on Cloudfront and the rest of the content on S3. Amazon provides a set of clear instructions on how to this. Issue solved. Feb 25, 2011 at 12:02

5 Answers 5

4

Unfortunately Facebook loads the iframe page using an HTTP POST, not an HTTP GET and is not compatible since Amazon has a REST interface and properly uses POST to upload/modify content.

Best,

David Bullock

2

I ran into this problem today and it caused some headscratching. As David Bullock points out the problem is that Facebook loads the HTML page via a POST request but S3 (and thus by extension CloudFront) won't serve resources in response to this (it returns 405 Method Not Allowed).

You can host your CSS, scripts and images on S3 / CloudFront, but the initial HTML page has to be on some other server. If you're concerned about load or latency from across the globe then you could try implementing a tiny redirector that forwards the Facebook POST request to the CloudFront-cached location (you'll have to return 303 See Other to do this redirection so the browser makes a GET request instead: see RFC 2616).

0

There is a shockingly easy workaround to the fact that AWS rejects POST requests and the fact that Facebook requires page tabs to be hosted via HTTPS: just redirect the request through https://bit.ly/….

Yes, it's really that easy.

  1. Host the HTML page wherever you like. HTTP is fine.

  2. Create a bit.ly-shortened URL to the page.

  3. Use it—substituting https:// for http://—as the "Secure Page Tab URL" as you create your Facebook Page Tab.

  4. Activate the tab using this highly-undocumented dialog URL: https://www.facebook.com/dialog/pagetab?app_id=app_id&redirect_uri=bitly_url

Boom: done.

-1

OK, it can be done: but you need to host the images on Cloudfront and the rest of the content on S3. Amazon provides a set of clear instructions on how to this. Issue solved.

3
  • No it should work to host everything through cloudfront too. What is the url of the page you want to put in the iframe?
    – Martin
    Feb 25, 2011 at 12:48
  • And actually, there still seems to be an issue using even S3 to serve content to a Facebook iframe: if the index html page is hosted on S3, I get this error message: http://cl.ly/4q5h.The javascript files and images can be hosted on Cloudfront (they are now on that page) but the html can't be hosted from either, and for some reason the css can't either. I suspect the html issue is due to Facebook, but the css one is weird. Feb 25, 2011 at 14:46
  • The content hosted on S3 (identical to the one on Media Temple) that's generating that error message when viewed via the Facebook iframe loads without issues if you view it directly: http://donaldjenkins-facebook.s3-website-us-east-1.amazonaws.com/ Feb 25, 2011 at 15:27
-2

Use Cloudfront to trap the 405 error and serve your html as the "Custom Error Response" page to the desired index page

Updated: This was down voted, however I'm going to help lots of Facebook developers with the following. The final Issue that we had with hosting a facebook application on S3 was with CORS. We fixed the 405's by doing a "Custom Error Response" See this link for details: http://blog.celingest.com/en/2014/10/02/tutorial-using-cors-with-cloudfront-and-s3/

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.