Utilizing iframes on the new Facebook Pages in a unique way

0 Posted by - May 13, 2011 - Geek Stuff

Facebook in February ’11 announced their new Facebook Pages. There were many improvements and new features added to them. One of the huge features for developers was including iframe support instead of a stripped down HTML which Facebook called FBML. I started looking into the possibility of using this in an innovative way. Up until now people are used to look at Facebook Pages and on occasions they see pictures which asked them to like the page. The level of interactivity on these pages was very low. Sometimes some used to have links to some websites but nothing more than that. Over the past week I have developed a jQuery powered framework dedicated to Facebook Pages. I don’t plan to release it to the public soon as it’s still in Alpha stage. However I have used it in a clients Facebook Page which is going live at 12PM EST on 14th May which is tomorrow at noon.

The client is Tonner Dolls. They are a well-known company among the Doll collectors around the world. They have worked on their online presence for a while now and as a part of that initiative, I was designing their Facebook Page. I have worked on this page with Kevin von Duuglas-Ittu, some of you may know him better under his Twitter handle @mediasres. Below is a preview of the page and some highlights on the navigation of the page which may help you enhance your experience when you try it out yourself later on.

The page consists of a total of 5 navigation pages (yes, inside one Facebook Page). The screenshot you see below is the main page or the Splash page as I like to call it.

What you see above are tiles. When you hover on it, it starts to move around with your cursor. Now if you notice only one tile with text can be seen in the shot above but there are many interactive tiles in it. For example if you click the Wall tile, it takes you to the Facebook Wall. You may wonder what the secondary navigation labelled Home, Previous, and Next if for. Now you can also view inline page by clicking those or use your Keyboard to use them. There’s a traditional navigation up there if you get confused by the interactive navigation. I am not going to show what the other pages are but the image on the top of the post may give you a peak at those pages.

There are lots of possibilities and there’s a lot more to come. I am working with a few other companies and their pages should be done within the coming weeks. You can visit their page from here tomorrow. Some of you may have already seen it while I was testing the User Experience. Please leave a comment with any questions you may have.