Hosting Facebook iframes on pages on Cloudfront

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. 开发者_如何学JAVA 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.

---

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

---

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).

---

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.

---

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.

---

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/