How To Link To Other Tabs or Sections in Facebook using iFrames Custom Facebook Page

Facebook has switched over to iFrames for Custom Facebook Pages, and with this switch, developers have been experimenting with new functionality across pages. Naturally, with such a big change, there are some bugs/nuances that need to be discovered. While working on a custom Facebook Page for a client, I ran into this situation.

We wanted to have multiple customizations on the page, each on it’s own Tab (I know they’re not tabs anymore, but for lack of a better word, we’ll stick with calling them Tabs). In Static FBML, if we wanted to link two custom tabs together, we’d just grab the URL and create an HTML link. This won’t work with iFrames, due to the way Facebook displays the links. By default, links will open up inside the iFrame and when using this trick to remove scrollbars from Custom Facebook Page iFrame, the links will not display correctly. Instead, the content in the iFrame will reload to show you a blue Facebook image that then links to the original link you had. This of course adds an unncessary middle-step that breaks the flow of your page.

To correct this, simply define the target of the link, as follows:

(a href=”http://www.facebook.com/pages/YOUR_LINK_HERE” target=”_top”)Link Text(/a)
(replace parenthesis with <>)

That’s it!  The link will now work as it should.