Introducing iframe Tabs for Pages

Today we announced major updates to Facebook Pages to help Page admins manage communications, express their brands, and increase engagement. As part of these changes, we are also updating the model for building apps on Pages.

Using iframes in Page Tabs

Many useful applications have been built for Facebook Pages like BandPage for artists to share their music with fans and Shop Now to help Pages sell merchandise on Facebook. As of today, you can build your Page Tab apps using iframes rather than FBML. This means you can now build apps that run across Facebook (including Pages and Canvas applications) using the same simple, standards-based web programming model (HTML, JavaScript, and CSS). In addition, you can easily integrate social plugins and the Graph API within your tab.

How to Add an iframe Page Tab

Enable iframes by editing the Facebook Integration settings on the Developer App:

Specify a Tab Name and a Tab URL that is loaded when the user selects your Tab on a given Facebook Page. Finally, to add the app to a Page, an admin of the Facebook Page must navigate to your app's Profile Page and select "Add to my Page.” You can see step by step instructions in our guide.

Updated signed_request

When a user lands on the Facebook Page, she will see your Page Tab added in the left-hand menu. When a user selects your app in the left-hand menu, the app will receive the signed_request parameter with one additional parameter, page, a JSON array which contains the ‘id’ of the Facebook Page your Tab is hosted within, a boolean (‘liked’) indicating whether or not a user has liked the Page, and a boolean (‘admin’) indicating whether or not the user is an ‘admin’ of the Page along with the user info array. If a user has authorized your application, the signed request will also contain an access token and the user id for the current viewing user so you can personalize your application for them.

In addition, your application will also receive a string parameter called app_data as part of signed_request if an app_data parameter was set in the original query string in the URL your tab is loaded on. For the Shop Now link above, that could look like this: "http://www.facebook.com/MollySimsOfficial?v=app_135607783795&app_data=any_string_here". You can use that to customize the content you render if you control the generation of the link.

      {
      "algorithm":"HMAC-SHA256",
      "expires":1297328400,
      "issued_at":1297322606,
      "oauth_token":"OAUTH_TOKEN",
      "app_data":"any_string_here",
      "page":{
      "id":119132324783475,
      "liked":true,
      "admin":true
      },
      "user":{
      "country":"us",
      "locale":"en_US"
      },
      "user_id":"USER_ID"
      }
    

Policy Revisions

We’ve also revised our Platform and Page policies to ensure that apps on Page Tabs maintain a high quality user experience and do not share information between Pages.

FBML Roadmap

With our recent launch of Requests and the support for iframe on Pages Tabs, we are now ready to move forward with our previously announced plans to deprecate FBML and FBJS as a primary technology for building apps on Facebook. On March 11, 2011, you will no longer be able to create new FBML apps and Pages will no longer be able to add the Static FBML app. While all existing apps on Pages using FBML or the Static FBML app will continue to work, we strongly recommend that these apps transition to iframes as soon as possible. Lastly, we want to be clear that our deprecation of FBML does not impact XFBML, such as the tags that support social plugins.

We are excited to see the new types of apps you build using iframes in Page Tabs. Please leave any comments or questions below.