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
That is basically what iFrame is: a website nested inside Facebook. Now separately hosted material with all the bells and whistles of HTML and JavaScript can be dropped right into your business Fan Facebook page as an initial welcome to non-fans, as well as a resource to your current users. I’ll discuss a bit of what this means in the broader scale farther below, but essentially most of the design achievements that allow dynamic and engaged experiences on the web now can be funneled down into the Facebook environment, an commercial environment we must all admit sorely in need of it.
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.
Christopher
May 23, 2011
Kevin, I think there is huge opportunity for iframes, as you have demonstrated. They really are a window into a whole new realm within facebook, tapping into other resources on the internet like you tube videos and other rich content that are hard to make accessible accessible on a fan page wall (many videos in one place, easier for a content generator to organize the page the way they want).
I also think it is interesting that facebook itself has not taken advantage of the iframe for any of their initiatives. It seems they had a purpose for changing to iframe rather than the former fbml (face book mark up language), but I have not seen that strategy come into play as of yet. I guess we will have to wait and see what happens. But in the mean time, it is awesome to see new possibilities like what you and Deep have done here.
@mediasres
May 23, 2011
Chris,
I’m super curious about the same. Not only has Facebook been pretty quite about the change to iframe, so has almost the entire social media and design community (at least by my cursory reading). It is an enormous potential of content connection. There is almost no drawback that I can think of in this direction – though some have pointed out to me that Facebook may have lost some trust of businesses with their changes and policies; the entire industry seems to be slow to move. It is as if the culture of Facebook fan pages has frozen into a static assumption.
I think on a larger level a lot of businesses actually don’t know quite what to do with Facebook because conversation and photo-sharing makes up so much of what the Facebook platform is all about, and for many of them it has become a real lack of marketing emphasis. Yet it was still surprising how few business and even brands had static welcome pages in the recent/old FBML days.
Personally I believe that Facebook is in need of a facelift for business, and honestly that is what iframe is. Who is going to take advantage of this? This is a continental sized shift in the Facebook environment.
pegfitzpatrick
May 25, 2011
I am very impressed with the change from a static boring Facebook page to a dynamic, new look.
iLike!
@mediasres
May 30, 2011
Thank you Peggy! Glad you like it so much. I agree, the old FB template blue is murder for company message.
robin
May 30, 2011
Very good insight into iframes. I am a little confused about FBML though. Is it completely gone? Or does it just need to be in an iframe?
Of course, the great thing about iframes, is you can put just about anything in there.
@mediasres
May 30, 2011
Robin,
FBML is no longer supported, in the sense that you can no longer use FBML to create welcome pages in the static FBML app (as of March). FBML though was basically HTML with a few tiny differences. HTML of course now can be put into any iframe, the difference is that you need to host it somewhere else, and make sure that you design it within the frame parameters.
You are completely right though, there is now almost no limit to the creative things you can do in this window.
As to how long Facebook will support current FMBL Facebook welcome pages I believe I read somewhere that they will phase those out at the end of 2011, but the truth is I can not relocate that information. One assumes they will be phased out eventually.
Glad you like the post. Maybe something really interesting could be done on an artist fb page, showing work, just like Tonner products are shown.
Dane Findley
June 10, 2011
It’s true, that sometimes Facebook changes (to design, procedure, and algorithm) occur with such frequency, that businesses and entrepreneurs are almost left with a sort of Facebook-PTSD! If you’re an enthusiastic fan of FB, as I have been, these kinds of changes can be disorienting.
In my opinion, that last change to Edgerank — that was partly done to motivate businesses into using “Sponsored Stories” — was a real shocker. From what I can tell, for many Pages, there was a 70% drop in visibility in Top News streams — overnight! — and it seemed to come out of nowhere, without time to strategize and prepare. I can’t help but wonder how the cumulative effect of these kind of behaviors will eventually have on businesses’ perceptions of FB’s reliability.
{ twitter = @danenow }
@mediasres
June 10, 2011
Dane,
I completely agree that Facebook lacks a coherent strategy towards business – oddly, Google has had problems with this same thing, consistent offerings that won’t go away, clear communication lines and heads up. It seems that Facebook has in fact modeled itself on Google’s Wizard of Oz Great Oz communication strategy. I’ve heard from many from the Bigger Business side that Facebook simply is not trustable. This, combined with a genuine lack of understanding of how to even take advantage of the medium makes for a blind eye I think. “Not only don’t we understand it, or know how to measure it, it also keeps changing!” The thing is though, Facebook is really a tremendous opportunity for relatively low cost I believe. And these recent iframe changes could produce dramatic opportunities, depending on the industry, for large scale and small scale businesses alike. It will be only those that overlook Facebook’s opacity that will take advantage of this new and open ground.
Thanks for your great comment. And thanks for prompting me to think more on this.
Cheers,
@mediasres
Lisa Thorell
June 10, 2011
Great overview, Kevin. I was deep in crocodiles with a client project when iFrames was announced in March so your post and research caught me up! And yes i don’t get the mystery of FB’s under promotion of iFrames — except that some using it have commented that it is a “heavy weight operation” and very resource intensive. Perhaps FB is doing some optimising before fully releasing a beautiful beast that might hit their response time on a mass scale.
@mediasres
June 10, 2011
Hey Lisa,
“under promotion” is a huge understatement. Almost nothing said, and in fact very little has been blogged about. Not sure at all what people would mean by a “heavy weight operation” other than the material has to be designed and hosted somewhere. We put up the Tonner page in about a week, from 1st thought to going live. There were some challenges in load time do to the excessive photo material, but we actually worked those out pretty well. It remains a mystery for me what the silence on iframe has come from. As I said, not only FB, but also designers are mum on it. People I’ve talked to in the business have felt that for some reason it has fallen into a blind spot. A big reason why we are pushing this page forward is to make people aware of just what is possible. This is an open door for Facebook marketing creativity.
Always glad to hear from you Lisa!
best, Kevin
@mediasres