Loading...

Blog

How to Choose the Right Custom Facebook Tab Method

Just like every website poses its own unique set of challenges every custom Facebook tab can present itself with equally or more complex challenges to take into consideration. Hopefully we can help ease that burden by giving you a general scope of reasons why and how to choose one method of designing custom Facebook tabs over the other.

Please note that this tutorial is not intended to be used as instruction on how to set up these methods but merely as a guide to alleviate the confusion and frustration for when and why to use each method.

Method #1: Static FBML

Static FBML is hailed by us as the ‘easy way out’. It’s definitely the quickest and easiest way to get a custom Facebook tab up and running on your Facebook page. However, as is always the case with the easiest solution it also comes with the most drawbacks.

When and Why Not to Use This Method:

1. Static FBML is subject to the change of size that Facebook is very soon (sources say end of July 2010) going to implement to all of its tabs. So if you’re in need of designing a tab wider than 520 pixels, Static FBML is not for you. If you are still using Static FBML and coding your tabs at the current size of 760 pixels wide you’re better off changing to the new size of 520 pixels or get ready for a massive panic and overload of fixes from your clients once the change takes place.

2. Using Static FBML means that you are limited to the code Facebook will allow on tabs, this is normally fine for most tabs but once you get into more complex coding you will most likely have to switch your method. This also means that you can’t use any of the XFBML code on your tab either.

3. If you want to use complex javascript then you’re out of luck with this method, only FBML approved javascript is allowed in tabs.

4. Want to include a blog or twitter feed directly into your custom Facebook tab? If you’re trying to use Static FBML, think again, the only way to add a feed to your Facebook page using this method is by using separate Facebook apps that create new tabs.

Method #2: Custom Facebook FBML Application

This method is very similar to using the Static FBML app except for the fact that all of the code will reside on your server giving you greater flexibility with custom coding. However, this method is still subject to a lot of the same limitations as Static FBML.

When and Why Not to Use This Method:

1. Also subject to the change of size being implemented by Facebook to all tabs from 760 pixels wide to 520 pixels wide.

2. Even though the code resides on your server, Facebook will still pull your code into the tab and modify it, which means it still must be written to comply with the FBML code requirements of tabs. This also means that with this method you are still unable to use any XFBML code.

3. Since the tab is still restricted to using FBML code it also means you are still limited to using the FBML approved javascript.

4. This method is definitely not as quick or as easy to set up because you will need to set up your own custom Facebook application. However, after you get over the initial headaches of setting up your own custom apps it becomes rather easy.

5. Right about now you must be wondering who would ever want to use a more complex method that gives the same set of problems as the much easier to use Static FBML app. Well by using this more complex method you are able to code your page around any up-datable content that you might have on your website, such as your blog feed. Of course it will only work as long as you code it to comply within the FBML requirements. So now combining this method and a website built on a CMS platform such as WordPress, you are now able to add those much desired blog and twitter feeds built into the custom tab.

Method #3: Custom Facebook Iframe Application

This method would definitely be the clear hands down winner every time if it wasn’t for one very and we mean very big drawback. In order for a user to view your custom Facebook tab they will first have to initialize the Iframe by clicking on either text or an image.

When and Why Not to Use This Method:

1. The initial tab that houses the text or image that the user must first click must fall within the 520 pixel resize by Facebook since it is still actually a tab. However, after initialized the Iframe actually resides on a Facebook canvas page which will still maintain the current width of 760 pixels. So if the custom Facebook tab must be wider than 520 pixels after Facebook makes the change this is the only method available.

2. The code inside of your Iframe will always reside on your server and does not actually get pulled in or modified by Facebook, which means you can basically do anything you can think of code wise. So if you want to do complex javascript or include updatable content from your website that falls outside of the FBML scope of limitations this is the only method available.

3. If you want to use XFBML code on your tab then this is the only way possible. An example of something you could add with XFBML would be the ‘Like’ button, which isn’t possible in the other methods.

4. This method just like the Custom Facebook FBML Application requires you to set up your own custom Facebook application.

5. Because this method uses an Iframe the height must be declared in the code otherwise you will end up with scroll bars or cut off content. This can pose problems when using updatable content because the height of the content might not always be exactly the same.

Let’s Recap What We Just Learned

Static FBML

If the width limitation of 520 pixels is not a concern and your custom Facebook tab is basic and does not require anything complex then we recommend that you stick with the easy to use Static FBML. Just know that if later on down the road you are going to want to add more features to your tab, you will most likely need to switch to a different method.

Custom Facebook FBML Application

If the width limitation is still not a concern but not being able to include updatable content such as a blog feed is, then we recommend you make the switch to using your own Custom Facebook FBML Application.

Custom Facebook Iframe Application

This is the one and only method for including complex code and basically doing anything you want. It’s also the only method to maintain the current 760 pixel width, making this a great alternative to set up quickly when Facebook makes the width change to all tabs. The only two drawbacks you have to accept and get over when using this method are the lack of dynamic height and the very big drawback of the user initialized action to view the Iframe.

If you have any suggestions or input into other methods or situations you’ve encountered we would love to hear about them by starting the discussion below.

Leave a Comment

5 comments
RiskEraser
RiskEraser

I thought you might mind this interesting, how to add a Live Chat tab to a Facebook page:

Elgart
Elgart

Amazing method! Thanks for this..

daddydesign
daddydesign

@Mario, ahh the joys of Facebook, it seems the deeper you dig the more confusing it gets which is why we decided to write this tutorial. It's true that tabs can not technically house iframes and that iframes are only able to be displayed on canvas applications. However, when you use the user initiated action for the iframe on the tab it will open the canvas application seamlessly to where it still feels like you are inside a tab. So yes even though it's confusing everything you have read it correct. We are in the process of writing up a series of tutorials that explain how to set up each of the methods discussed above, keep an eye out for it.

Mario
Mario

I just came across your post struggling to get my tabs to display an iFrame. After some more research I am confused about your article because it appears all the information applies to a canvas application, but tabs and boxes actually can no longer include iFrames. What am I missing?

Jorge Luis Jaral
Jorge Luis Jaral

Greetings from Mexico, this is an excellent article, thanks for the tips, also and out of the issue, the 'Post a Comment' graphic above should have it's 'vessel' on the upper side, according to perspective - JLJL