Building to Branding: All About New iFrames on Facebook

| March 16, 2011 | 1 Comment

By
Building to Branding: All About Facebook iFrames by Lisa PeytonAs a professional who has been implementing campaigns in Facebook for clients over the last few years, I know one thing to be true: change is coming. If you learn to deal well with change, chances are you’ll be able to bypass the frustrations with Facebook that many developers and marketers experience. As of last week, all Facebook pages now reflect a new lay-out and offer users additional functionality . I’ve been eagerly anticipating the move to allow iFrame functionality on page ‘tabs’.

Facebook has been promising this feature to developers for months and I had grown skeptical that they would ever make it work. The issue is that in order to create an interactive experience on a page tab you were limited by FBML, a bastardized mark-up language with limited functionality. Common scripting languages like Javascript wouldn’t work on Facebook tabs. This meant marketers had two options: 1) use a ready-built application that could do the job but offered little or no customization or 2) pay a company thousands of dollars to create one for you. After some testing, I can assure you THAT has all changed.

Building an iFrame Tab

I had already tried to build interactive tabs prior to this change and so was armed with a HTML page, limited to 520 pixels wide. The web page housed a few cool features that wouldn’t work within the old structure: 1) a countdown clock that was counting down the days/hours/minutes to the product launch and 2) a slideshow that used Javascript to allow users to scroll through selected photos. So how long would it take me to get the content on a Facebook tab? Answer: 10 minutes. I’m absolutely THRILLED!

Here’s what you’ll need:

1) A GREAT iFrame Facebook Tab Tutorial. I used this one:
http://www.hyperarts.com/blog/adding-iframe-application-to-facebook-fan-page/

2) A customized icon used to represent your tab in the new left sidebar page navigation structure. It should be 16×16 and the tab name can be up to 16 characters (See Disney Pixar screenshot below).

3) A snippet of code that will get rid of the DREADED scrollbar within the tab and overide Facebook’s limit on tab length. This post outlines all the details:
http://www.hyperarts.com/blog/facebook-iframe-apps-getting-rid-of-scrollbars/



How to engage?

Now that I was convinced that Facebook had made good on their promises and my interactive content would work on a Facebook tab, I wanted to see iFrames in action. How were the big brands using this new feature? With almost limitless possibilities, I went searching for some ‘outside of the box – or ‘page’ (hah!) strategies.

I stated with a list of the top social brands in 2010 as determined by Vitrue (http://soshable.com/top-social-media-2010/). Called ‘The Viture 100,’ the list ranks brands by how well they engage their social media community. I figured these brands would be among the first to implement the new Facebook page updates and put iFrames to good use. After researching Facebook pages for the top six brands, I found some winners and surprisingly some BIG losers.

Top Social Brands of 2010 on Facebook


1) iPhone – I found a page for the iPhone app that hadn’t been updated in months.
(www.facebook.com/iphone). It took a few minutes trying to find any ‘official’ page for the iPhone – ultimately, my search was unsuccessful.

Lesson: If someone researching your page isn’t willing to put in the time to find it, neither will anyone else.

iPhone Facebook page hasn't been updated in months

2) Blackberry – I found the page with my first Google search. The landing page promoted the new ‘Blackberry PlayBook,’ which looks pretty cool. It housed a few fairly effective videos and the latest ‘BlackBerry Playbook Updates’ from Twitter, Facebook and the official blog. How about some consistent branding? Is the ‘b’ in Playbook capped or not? The page featured both versions of the brand.

3) Disney – I also found this page with my first search. The main page housed the top 5 Disney Facebook pages and the top newsfeed updates from the likes of Dory (http://www.facebook.com/FindingNemoDory), the fish from Finding Nemo and Captain Jack Sparrow (http://www.facebook.com/CaptainJackSparrow). The page design looks very ‘Facebook-y’ with the light blue headers and embedded ‘like’ buttons.

The page header had worldwide fan ticker that presumably updated anytime someone ‘liked’ the page. I tried this out a few times and although the numbers did update, it appeared to update in multiples of ten. So it felt a bit buggy to me.

The top updates included in-character comments by Disney characters and open-ended questions like this one from “Toy Story”: ‘Have you ever misplaced one of your favorite toys?’ This simple question solicited over 3,000 comments!

4) Android – Another case of mistaken identity. First Facebook page listed by Google hadn’t been updated in over a month. 3rd one on the list – AndroidCentral – sounded promising. It looked good, but the info claimed it was for the blog androidcentral.com. So no idea if it’s official or not. FAIL.

5) iPad – I wasn’t able to find the official iPad page – if there is one. I was able to find an iTunes page (http://www.facebook.com/iTunes) that was announced in a related blog post as the ‘Official Page on Facebook.’ With 10 million fans, I have to say I was underwhelmed. The page still has the old page layout along with a simple ‘fade into the background’ blue profile pic.

The custom tabs include a page with polls and I was happy to find a question on which film would win ‘Best Picture of the Year’ at the Academy Awards. With the award ceremony taking place in just a matter of hours, the poll was extremely relevant and curious to see the responses, I voted. “The King’s Speech” was ahead, earning 33% of the vote.

The video Showcase tab didn’t house any live video but instead had you redirect to a page with a Quicktime streaming video of some comedy TV show that I had little to no interest in. I started typing this paragraph and then was off the page before the video even began to play.

6) Sony – SEARCH YOUR BRAND IN FACEBOOK! When I searched on ‘Sony’ in the Facebook search box, this popped up first under pages: I Have a Defective Sony TV. (http://www.facebook.com/pages/I-Have-a-Defective-Sony-TV/182875766612) The page has almost 5,000 ‘likers’ and I was tempted to join the cause just to be on the side of the underdog. The first update read: “It’s nice to see so many people ‘standing’ behind William, instead of Sony”. The photos spanning the top of the page – thanks to the newly updated page lay-out – featured shots of distorted and discolored TV screens. NICE!

Turning once again to Google to see if I could try and find the ‘official’ page,- the 3rd result seemed to be the one. The Sony Ericsson Facebook page (http://www.facebook.com/sonyericsson) seemed to be taking queues from Disney, with a banner counting worldwide fans. The Sony banner requested you ‘like’ the page – which I did to see if I could get that fan count to increase. It didn’t.

I was happy to see the profile pic featuring the ‘Fan of the Week’ – from Malaysia. Although I was a bit baffled by the ‘legalese’ that was posted just below the photo:

By posting your profile photo with your inspiring photo, video or comments, you are giving us permission to use your photo for the Fan of the Week profile image. It will not be used for any other purpose.

So now I was suddenly worried that by ‘liking’ the page, I had somehow given them permission to use my Facebook profile pic to endorse Sony on their fan page. Granted, I do have a tendency to be a bit paranoid but the language was confusing. I would hope that only fans who had explicitly submitted their photo to be the ‘Fan of the Week’ were featured on the page.

Other than this main landing page, the other page tabs were fairly standard. They did have a tab called ‘Future News’ that housed a sign-up for their email list.

What’s Next?

So my round-up of the top brands in social media for 2010 resulted in mixed reviews. Thankfully most of the brands have updated their page to the new lay-out and NONE of the pages are using those damned hide codes to force fans to ‘like’ the page to view the tab content.

I was most impressed by Disney, who offered up a great service by indexing their top Facebook pages – since Facebook does such a crappy job at it. They were also brave enough to have some fun with their characters; not taking themselves too seriously by allowing characters to comment on Facebook. Bravo!

This is only the tip of the iceberg when it comes to the new functionality offered by Facebook moving to iFrames on page tabs. They have evened the playing field such that you now don’t have to be a big brand to have more engaging pages. Instead of paying a service like Buddy Media $5,000 per month for one custom tab, you can simply hire a freelance developer for $50 bucks per hour. But keep that to yourselves – I have a feeling if I broadcast that fact too loudly, they will come looking for me.

About Lisa Peyton


Lisa is a leader in the field of digital marketing. Based in Portland, OR, she serves as executive editor at TMMPDX.COM and teaches digital strategy at Portland State University. Her services include social media coaching, content strategy and digital marketing consulting.

Category: Facebook, Internet Marketing, Social Media Marketing, Social Media Tools

Lisa Peyton FacebookInternet MarketingSocial Media MarketingSocial Media Tools

By
Building to Branding: All About Facebook iFrames by Lisa PeytonAs a professional who has been implementing campaigns in Facebook for clients over the last few years, I know one thing to be true: change is coming. If you learn to deal well with change, chances are you’ll be able to bypass the frustrations with Facebook that many developers and marketers experience. As of last week, all Facebook pages now reflect a new lay-out and offer users additional functionality . I’ve been eagerly anticipating the move to allow iFrame functionality on page ‘tabs’.

Facebook has been promising this feature to developers for months and I had grown skeptical that they would ever make it work. The issue is that in order to create an interactive experience on a page tab you were limited by FBML, a bastardized mark-up language with limited functionality. Common scripting languages like Javascript wouldn’t work on Facebook tabs. This meant marketers had two options: 1) use a ready-built application that could do the job but offered little or no customization or 2) pay a company thousands of dollars to create one for you. After some testing, I can assure you THAT has all changed.

Building an iFrame Tab

I had already tried to build interactive tabs prior to this change and so was armed with a HTML page, limited to 520 pixels wide. The web page housed a few cool features that wouldn’t work within the old structure: 1) a countdown clock that was counting down the days/hours/minutes to the product launch and 2) a slideshow that used Javascript to allow users to scroll through selected photos. So how long would it take me to get the content on a Facebook tab? Answer: 10 minutes. I’m absolutely THRILLED!

Here’s what you’ll need:

1) A GREAT iFrame Facebook Tab Tutorial. I used this one:
http://www.hyperarts.com/blog/adding-iframe-application-to-facebook-fan-page/

2) A customized icon used to represent your tab in the new left sidebar page navigation structure. It should be 16×16 and the tab name can be up to 16 characters (See Disney Pixar screenshot below).

3) A snippet of code that will get rid of the DREADED scrollbar within the tab and overide Facebook’s limit on tab length. This post outlines all the details:
http://www.hyperarts.com/blog/facebook-iframe-apps-getting-rid-of-scrollbars/



How to engage?

Now that I was convinced that Facebook had made good on their promises and my interactive content would work on a Facebook tab, I wanted to see iFrames in action. How were the big brands using this new feature? With almost limitless possibilities, I went searching for some ‘outside of the box – or ‘page’ (hah!) strategies.

I stated with a list of the top social brands in 2010 as determined by Vitrue (http://soshable.com/top-social-media-2010/). Called ‘The Viture 100,’ the list ranks brands by how well they engage their social media community. I figured these brands would be among the first to implement the new Facebook page updates and put iFrames to good use. After researching Facebook pages for the top six brands, I found some winners and surprisingly some BIG losers.

Top Social Brands of 2010 on Facebook


1) iPhone – I found a page for the iPhone app that hadn’t been updated in months.
(www.facebook.com/iphone). It took a few minutes trying to find any ‘official’ page for the iPhone – ultimately, my search was unsuccessful.

Lesson: If someone researching your page isn’t willing to put in the time to find it, neither will anyone else.

iPhone Facebook page hasn't been updated in months

2) Blackberry – I found the page with my first Google search. The landing page promoted the new ‘Blackberry PlayBook,’ which looks pretty cool. It housed a few fairly effective videos and the latest ‘BlackBerry Playbook Updates’ from Twitter, Facebook and the official blog. How about some consistent branding? Is the ‘b’ in Playbook capped or not? The page featured both versions of the brand.

3) Disney – I also found this page with my first search. The main page housed the top 5 Disney Facebook pages and the top newsfeed updates from the likes of Dory (http://www.facebook.com/FindingNemoDory), the fish from Finding Nemo and Captain Jack Sparrow (http://www.facebook.com/CaptainJackSparrow). The page design looks very ‘Facebook-y’ with the light blue headers and embedded ‘like’ buttons.

The page header had worldwide fan ticker that presumably updated anytime someone ‘liked’ the page. I tried this out a few times and although the numbers did update, it appeared to update in multiples of ten. So it felt a bit buggy to me.

The top updates included in-character comments by Disney characters and open-ended questions like this one from “Toy Story”: ‘Have you ever misplaced one of your favorite toys?’ This simple question solicited over 3,000 comments!

4) Android – Another case of mistaken identity. First Facebook page listed by Google hadn’t been updated in over a month. 3rd one on the list – AndroidCentral – sounded promising. It looked good, but the info claimed it was for the blog androidcentral.com. So no idea if it’s official or not. FAIL.

5) iPad – I wasn’t able to find the official iPad page – if there is one. I was able to find an iTunes page (http://www.facebook.com/iTunes) that was announced in a related blog post as the ‘Official Page on Facebook.’ With 10 million fans, I have to say I was underwhelmed. The page still has the old page layout along with a simple ‘fade into the background’ blue profile pic.

The custom tabs include a page with polls and I was happy to find a question on which film would win ‘Best Picture of the Year’ at the Academy Awards. With the award ceremony taking place in just a matter of hours, the poll was extremely relevant and curious to see the responses, I voted. “The King’s Speech” was ahead, earning 33% of the vote.

The video Showcase tab didn’t house any live video but instead had you redirect to a page with a Quicktime streaming video of some comedy TV show that I had little to no interest in. I started typing this paragraph and then was off the page before the video even began to play.

6) Sony – SEARCH YOUR BRAND IN FACEBOOK! When I searched on ‘Sony’ in the Facebook search box, this popped up first under pages: I Have a Defective Sony TV. (http://www.facebook.com/pages/I-Have-a-Defective-Sony-TV/182875766612) The page has almost 5,000 ‘likers’ and I was tempted to join the cause just to be on the side of the underdog. The first update read: “It’s nice to see so many people ‘standing’ behind William, instead of Sony”. The photos spanning the top of the page – thanks to the newly updated page lay-out – featured shots of distorted and discolored TV screens. NICE!

Turning once again to Google to see if I could try and find the ‘official’ page,- the 3rd result seemed to be the one. The Sony Ericsson Facebook page (http://www.facebook.com/sonyericsson) seemed to be taking queues from Disney, with a banner counting worldwide fans. The Sony banner requested you ‘like’ the page – which I did to see if I could get that fan count to increase. It didn’t.

I was happy to see the profile pic featuring the ‘Fan of the Week’ – from Malaysia. Although I was a bit baffled by the ‘legalese’ that was posted just below the photo:

By posting your profile photo with your inspiring photo, video or comments, you are giving us permission to use your photo for the Fan of the Week profile image. It will not be used for any other purpose.

So now I was suddenly worried that by ‘liking’ the page, I had somehow given them permission to use my Facebook profile pic to endorse Sony on their fan page. Granted, I do have a tendency to be a bit paranoid but the language was confusing. I would hope that only fans who had explicitly submitted their photo to be the ‘Fan of the Week’ were featured on the page.

Other than this main landing page, the other page tabs were fairly standard. They did have a tab called ‘Future News’ that housed a sign-up for their email list.

What’s Next?

So my round-up of the top brands in social media for 2010 resulted in mixed reviews. Thankfully most of the brands have updated their page to the new lay-out and NONE of the pages are using those damned hide codes to force fans to ‘like’ the page to view the tab content.

I was most impressed by Disney, who offered up a great service by indexing their top Facebook pages – since Facebook does such a crappy job at it. They were also brave enough to have some fun with their characters; not taking themselves too seriously by allowing characters to comment on Facebook. Bravo!

This is only the tip of the iceberg when it comes to the new functionality offered by Facebook moving to iFrames on page tabs. They have evened the playing field such that you now don’t have to be a big brand to have more engaging pages. Instead of paying a service like Buddy Media $5,000 per month for one custom tab, you can simply hire a freelance developer for $50 bucks per hour. But keep that to yourselves – I have a feeling if I broadcast that fact too loudly, they will come looking for me.

About Lisa Peyton


Lisa is a leader in the field of digital marketing. Based in Portland, OR, she serves as executive editor at TMMPDX.COM and teaches digital strategy at Portland State University. Her services include social media coaching, content strategy and digital marketing consulting.