Here's the setup. My company, PNG Support, has a Facebook page and we wanted to be able to set up custom content there rather than just rely on using the wall to post links back to the main site. If you are unfamiliar with how to do this, there is an excellent write up here on setting up an iFrame Application on your Facebook Page. While that page provides some nifty details, for the purposes of our discussion here I will point out that it involves the following:
- Have a website hosted somewhere
- Make sure it has SSL enabled
- Tell Facebook the URL to create the Facebook application
- Link the application to your Facebook Page
What happens is that when someone visits your Facebook Page, specifically the tab you created for the custom content, Facebook sees it is an app and embeds an iframe linked to your secure (https) URL. At that point, the behavior is entirely determined by the client's browser. And that is where things can fall down if you are using the default SSL certificate that likely came with your hosted website.
If you are unfamiliar with SSL or https or secure webpages, think of it as a means of determining trust. When you visit a secure webpage, an SSL certificate is given to your browser. Like an actual certificate, it states who you are (e.g. PNG Support or Lynn Pye or Barack Obama or...) but it also states what domain the certificate was issued for. In other words, it not only says who you are supposed to be, but where the content is supposed to be coming from. In addition, these certificates have an expiration date. So the browser checks to see if the certificate is expired or is coming from a website which it is not issued for and alerts you to this. What does that mean? Suppose I get a certificate issued for www.pyehouse.com but I install it on www.pngsupport.com. When you visit www.pngsupport.com, your browser can, and should, complain bitterly that the certificate is not valid because of the domain mismatch. In most cases you are given the option of continuing anyway.
This can also come into play on the bulk hosted services. These services have multiple servers with each server configured to host many websites, sometimes several hundred or more. If the hosting provider offers SSL as a default freebie, it means they have a certificate for their server to provide basic SSL encryption when someone uses the https handler for your website. You see, that's the other part to SSL. Once the certificate is accepted, the browser can have an encrypted conversation with the server, making it far more difficult for someone to snoop on what you are browsing for.
In the case of my company, we use ICDSoft for our hosting provider, whom I highly recommend. In our particular case, we happen to be hosted on server261. This means that if you visit https://www.pngsupport.com (note the https) you will get a certificate for server261.com, your browser will gripe, you will likely be given the option of proceeding anyway and, if you do, you will see the site as it normally looks. That's because the certificate is issued for server261.com but you visited pngsupport.com.
Now what does this have to do with Facebook Pages and custom iframe apps? Well, for security reasons Facebook requires you to use https links. Like I said, it embeds your link in an iframe on the page. So if the security doesn't match up, your audience is going to get some nasty security warning embedded in your Facebook page instead of the luscious layout you perfected last night. At this point, you'd be tempted to start investigating purchasing options for your SSL certificate. I know I did. And when I started looking at the price tag (over $100/yr for the cheaper options), I realized I didn't like that option. Then I had a thought. The certificate covers anything hosted on server261.com. Was there a way to use the server261.com domain to reach our content and therefore get a certificate match and have everything play nice.
As it turns out, there is, at least with ICDSoft. Keep in mind this may not always work if the server is not configured for this. But for ICDSoft, if you have, for example, the pngsupport.com domain hosted on their server261.com server, you can reach your content at http://pngsupport.server261.com. Even better, you can get an encrypted link with https://pngsupport.server261.com with zero complaints from your browser. So then I went into the Facebook application's settings and replaced www.pngsupport.com with pngsupport.server261.com and everything worked flawlessly. The certificate was matching, the content was coming up as desired and all was right with the world.
Of course, then I decided I wanted to link to a WordPress page instead of a hand written bit of PHP. More on that another time.