HyperArts on SEO, Social Media, Facebook, WordPress & Programming

Changes in Facebook – Boxes, Tabs, FBML and More

Posted by timware in Social Media / Inbound Marketing, Web Coding on February 24th, 2010

As many know, Facebook is planning some pretty significant changes in the coming weeks (or thereabouts) that developers really need to be aware of. These are not trivial changes, but significant changes in how information is displayed. Here is the PowerPoint that was distributed earlier in 2010.

Fb Pages Transition Jan2010

View more presentations from Alisa Leonard-Hansen.

The Big Picture….

Reduced width of tab width from 760 to 520px;
No iFrames;
No Boxes, neither tabs nor boxes on the left-hand column of your Wall/Info tab, underneath your Page’s profile picture.

Facebook, in a PowerPoint that’s been distributed and is available here, states:

As part of a larger effort to improve user experience and promote consistency across the site, Facebook will be modifying Page and Profile layouts by simplifying how identity is managed and displayed.

Changes to layout:

Tab width changing from 760 to 520 pixels [Discussed in a previous HyperArts post]

Pages will no longer be able to implement iFrames on their Page. All custom content will need to be on a separate, custom tab, which you can add using FBML or a custom application.

Boxes will no longer appear on Pages or Profiles. This means that Pages will no longer include the Boxes tab, or the Boxes that currently exist on the left-hand column of your Wall/Info tab, underneath your Page’s profile picture. You can move the content that currently exists in Boxes to a custom tab.

Read the rest of this entry »

Facebook, Facebook application tabs, Facebook Boxes tab, Facebook tabs, FBML

1 Comment

How to Add an iFrame to your Static FBML Page

Posted by timware in Social Media / Inbound Marketing, Web Coding on February 23rd, 2010

Mar 3 2010: It appears the below iframe method is no longer supported. However, you can still embed iframes into Facebook applications, just not in Static FBML. You’ll need to create an “iFrame” application that includes a “wrapper application” (a simple JavaScript app will do) to trigger the iFrame. I have written a post on how to create a Facebook application with embedded iFrame.

You cannot have an iframe in a Static FBML application tab that loads when the user hits the page. As with JavaScript, Facebook requires a user action before it will execute JavaScript or load an iframe.

Note: We believe that the “late February 2010″ changes Facebook has announced may include eliminating the implementation of iframes altogether. They have stated “Pages will no longer be able to implement iFrames on their Page. All custom content will need to be on a separate, custom tab, which you can add using FBML or a custom application.”

So, given that restriction, how do you add iframe content to your Static FBML page?

Pretty simple. Here’s the JavaScript:



<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Let's see that iframe....</a>
<div id="outside_location"></div>

<fb:js-string var="link_1">

<fb:iframe height="500" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%; border:none" src="http://URL-TO-OUTSIDE-LOCATION"></fb:iframe>

</fb:js-string>

<script type="text/javascript" charset="utf-8"> var outside_location = document.getElementById('outside_location'); </script>

The user action that is required is clicking on the “Let’s see that iframe” (for example), which then loads the iframe and external URL.