Subscribe to Updates

RSS RSS feed    What is this?

Email By email:

Privacy Assured more »

Topics

Search This Site

Follow on Facebook

 

Main | Checking Facebook's HMAC-SHA256 Encode Signature Using ColdFusion »
Tuesday
Jul162013

Hosting Facebook iFrame Canvas Pages on Cloudfront SOLVED

OK, I was working on my Driving Local Traffic project, which includes the hosting of Facebook mini-websites, and I wanted to make the whole thing work solely using Amazon Cloudfront with S3-sourced files, without having to host a proxy or having to buy an SSL certificate. Well, I've found the solution!

No doubt you've encountered the problem that Facebook uses a POST instead of a GET command to retrieve the iFrame source, which results in Cloudfront throwing errors. It took me a while to figure out the fix, but I'll save you the time and cut to the chase!

Note that I did NOT want to have to host my own proxy like is suggested as the solution by many. How I fixed the problem was to use bit.ly to shorten the secure Cloudfront URL! I did some testing and found that bit.ly WILL do a 301 Redirect when you POST to the shortened URL.

However, whenever I tried to use my bit.ly URL in the Facebook Canvas URL field my app, I first got the following error:

"Canvas URL must point to a directory (i.e., end with a '/' or a dynamic page (i.e., have a '?' somewhere)."

Simple fix! bit.ly doesn't mind at all if you append a ? to the end of the URL!

However, I then started getting the dreaded Facebook error:

"Error There was a problem saving your changes. Please try again later."

That one took a while to solve, but finally a hint got it working: adding the port number to the URL solved the issue!

The Fix: Hosting Facebook iFrame Pages on Cloudfront

  1. Set up your Amazon Cloudfront hosting as you normally would and retrieve your secure URL:

    e.g. https://d12zhvxj95fm4e.cloudfront.net/index.html

  2. Shorten the link using bit.ly:

    e.g. http://bit.ly/13BWpfB

  3. This plain bit.ly link, along with it's https counterpart will work just fine for the Facebook App Page Tab URL and Secure Page Tab URL, however, the URL needs to be modified slightly as follows for use as the App on Facebook Canvas URL and Secure Canvas URL:

    e.g. http://bit.ly/13BWpfB? (non-secure)
    e.g. https://bit.ly:443/13BWpfB? (secure)

  4. The Final Result: https://www.facebook.com/yourcompanynamehere/app_259790040713347

Notes

I didn't test many other URL shorteners, but I know that goo.gl does NOT work. It throws a "Method Not Allowed" response to the POST. If anyone tests other url shorteners, please leave your findings in the comments below!

If you found this solution to be useful... 

Please take a look at my video about Local Search at http://drivinglocaltraffic.com. In it, I describe how a local business can appear on the first page of Google, Bing and Yahoo! without a website and without paying for ads! Let me know what you think about it by leaving a comment below the video and sharing it with your local business-owning friends and family.

 

References (8)

References allow you to track sources for this article, as well as articles that were written in response to this article.
  • Response
    Response: d&g腕時計
    我々はスワスあり、他の人はただ見て
  • Response
    Hosting Facebook iFrame Canvas Pages on Cloudfront SOLVED - Webmastery Made Simple -
  • Response
    Hosting Facebook iFrame Canvas Pages on Cloudfront SOLVED - Webmastery Made Simple -
  • Response
    Response: sell
    Hosting Facebook iFrame Canvas Pages on Cloudfront SOLVED - Webmastery Made Simple -
  • Response
    Hosting Facebook iFrame Canvas Pages on Cloudfront SOLVED - Webmastery Made Simple -
  • Response
    Hosting Facebook iFrame Canvas Pages on Cloudfront SOLVED - Webmastery Made Simple -
  • Response
    Hosting Facebook iFrame Canvas Pages on Cloudfront SOLVED - Webmastery Made Simple -
  • Response
    Hosting Facebook iFrame Canvas Pages on Cloudfront SOLVED - Webmastery Made Simple -

Reader Comments

There are no comments for this journal entry. To create a new comment, use the form below.

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>