Menu Toggle

Custom Facebook Tabs

  • Design.
  • Development.

Facebook page custom tabs have undergone a few changes over the last year. No more FBML and a https requirement. Things are now loaded into an iframe which is essentially a Facebook app. I’ve just finished building a couple of Facebook tabs for Wedogoodthings and I learnt a couple of things along the way. Facebook don’t make it particularly easy, even for seasoned developers. So, I thought I’d write a checklist for anyone who gets stuck.

  • Register for Facebook Developers – anyone can do this, you just need to be able to verify the account through a text message or a bank card
  • Once you’re registered, you need to create an app. This app will be the content that appears inside the iframe on your Facebook page. This HyperArts blog article is a good place to start for some instructions. Another page you will need is this one – it took a while to find it and it still might confuse some. When putting YOUR_URL into the URL this page gives you, make sure you use the full http://www address of the root where your app is stored.
  • Hopefully, you’ll have a tab up and running now. However, you may come across a couple of issues. Two major ones are – scroll bars, and mixed http/https. Both problems are fixable, so don’t panic. With regards to the scroll bars problem, check out this post on the HyperArts blog. What I will add to this, is that its a good idea to add overflow:hidden CSS to the html tag. Mixed non-secure and secure content can be a pain. Internet Explorer won’t show content that mixes both, and you will get a warning box about it on page load. Make sure all your links are relative (all links to images, CSS, JavaScript) and you should be okay. Also, make sure any links to external APIs are https. For example, Google Fonts or Google fixes for HTML5 support.

That should at least set any developers having problems in the right direction. If you have any questions, fire me an email – I’ll be glad to help. Or, if you need a Facebook custom tab creating, get in touch.