iFrames and the Release from Facebook Monotony
Let’s face it. The Facebook monochrome has left us all bored. The recent incursion of ad margin and the photo strip top has made the Facebook page feel a bit cramped and even cluttered. The great redesign, while holding out the promise of much more company friendly spaces, has just not yet taken hold.
But there is another dimension to the new template in Facebook for companies which few have seemed to embrace yet – iFrame – and the potential here seems enormous. Unaccountable is the lag in taking hold of the big change in what Facebook is allowing businesses to do now. We have read almost nothing of its value in all the usual blog circles. We have seen no large brands take up this sudden freedom in Facebook design. In the fast-paced world of social media one would expect a door like this to be not only celebrated, but rushed through.
Dropping Websites into Facebook
There have been a few posts on how to do it. This from Hyperarts, and Social Mouths had perhaps the best introductory version of these. And Mashable had this excellent lay of the land post about the change when the change came about. But largely it seems that the opportunity has not been explored. This post is about one such exploration, a welcome page designed for the Facebook page Tonner Doll Company by Deep Soni at Essence Labs. Tonner Doll is going through a complete redesign of their web presence and social media and this new Facebook Welcome page is part of it. They have a substantial and very active Facebook fan following, but the challenge is how to inspire these fans and collectors to connect more with other Tonner new media offerings (and a new website due this Summer), as well as to more deeply inspire the casual user who might happen upon their page. The business challenge in social media platforms, especially those as restrictive as Facebook, is how to funnel users to other platforms and engage ultimately in more a committed and meaningful investment. Each business has strengths that need to come across in social media. One of the advantages that Tonner Doll has is that its product is visually striking, how does one communicate that in the bland and banal desert of Facebook blue and white.
The answer really is: iFrame.
The Tonner Facebook Page: gamify the entrance
Deep Soni used Ajax and JQuery to create a dynamic interface that would really catch the eye, especially designed to pique the interest of users that it must attract if it is going to begin building a next generation of Tonner Doll collectors. The page comes alive at the touch of the mouse. What is central to this approach is the keyhole effect, creating the experience of a company’s world going far beyond the expected restrictions of what company Fan Facebook page can offer. For those of you who do not watch the little video discussion, or visit the page and explore for yourself, I’ll outline some of the innovative features the Tonner Doll Facebook page employs.
Most striking is that the splash page is mouse-sensitive and scrolls in all directions beyond the natural Facebook frame. This unusual movement and the grid space was pushed to a limit in this design in an attempt to gamify the site. We want users – even those who might experience a momentary orientation challenge – to feel the need to explore. This is a play and imagination company and so we brought unique dynamics to what can otherwise be a stultifying commercial environment. If Facebook has one challenge as it attempts to create a business-friendly space, it is that it must provide a freedom of expression for businesses parallel to what personal users experience. IFrame is the beginning of that. The reason why the drab blue and white template of Facebook works so well for personal use is that it does not interfere. All the joyful status updates, friend tagging and party photo uploads stand out from it. Yet for companies this same feature of non-interference becomes dulling. Companies do not produce the same kinds of interactions that individuals do. Tonner Doll Company actually has a robust and committed Facebook fan base that uploads photos and comments daily, but the Facebook template has still remained constrictive. With iFrame a window is opened up, a large window into which one can pour endless ideas of design. Tonner Facebook page represents just one version of what can be done.
Perhaps the biggest result of iFrame is that products can now be shown directly in the Facebook environment. Rich photographs and quantities that could never have fit in the narrow margins now become scrollable and clickable to external website pages. Website funnels now reach well within Facebook and users have at their fingertips the full variety of not only product, but also a company’s social media platforms. Products can now be browsed and compared, and YouTube pages or blogs can have a strong and up to date presence.
Welcome non-Fans, Resource your Fans
At this time Facebook limits an iFrame welcome page to be set as the default only for non-fans that visit the page. This means that when a non-fan types in your Facebook page url or clicks over to it, they do not come to your wall where they encounter conversations or announcements they have little connection to yet. Instead they are greeted with a Facebook keyhole welcome page. Importantly this is a company’s first chance to capture the user’s imagination and create an affective bond. Immediately a user can browse aspects of a company, interact with the company message well beyond the static FBML pages of the past. As you can see from the screen shot above one is free to design navigation to pages within the iFrame (at top), but also to designate internal Facebook navigation to these same pages. An iFrame as dynamic and content rich as the Tonner example is something you don’t just want to offer non-fans. Fans can reach all of its features through the sidebar as well. It could be that Facebook would expand the default option to all users, fans included – one suspects that Facebook had some rather profound uses in mind when they opened their pages to iFrame for business – but as of now iFrame acts in a dual fashion: it dynamically greets new visitors to your brand, and it establishes a content rich bed for tabs in the side bar.
Visit Deep Soni’s description of the Tonner Doll iframe design here. Or the page itself here.