Where Marketers Go to Grow

    Search HubSpot's Blogs

    Start typing...

    Press return/enter to start your search

    February 22, 2011 // 8:00 AM

    How to Set up a Facebook Custom iFrame Landing Page Application

    Written by David Wells | @

    Editor's Note: We wrote a more up-to-date article about creating custom Facebook tabs here.

    Facebook recently announced that they would be discontinuing their support of the Static FBML app in favor of iframes.

    From a marketing perceptive this is actually some great news as FBML was pretty restrictive on what was and wasn't allowed within Facebook.

    I decided to investigate how much of pain is involved in setting up a custom tab on Facebook using an iframe. As it turns out, it's actually not to difficult.

    Below is a video with setup instructions step-by-step and a screenshot guide if you don't want to watch the video.

    The end result of this effort is this iframed application tab (for a contest that ends this Wednesday)!

    In order for this to work you must update your Facebook Fan Page to the newest settings.

    Set Up Your iFrame Page on Your Own Server

    Set_up_your_Iframe_page_on_your_own_server..png

    For this to work you will need a webpage on your server that you will be iframing into your new custom tab. That means you must have the HTML living outside of Facebook on your own server. Try and make this content 540px wide. Anything wider will not show up well in your custom tab.

    Head to http://facebook.com/developers

    Head_to_httpfacebook.png

    Allow the developer application if you have not already done so.

    Click on Set Up New App

    Click_on_set_up_new_app.png

    Name the App (This is Not What The Custom Tab Will be Named)

    Name_the_app__this_is_not_what_the_custom_tab_will_be_named_.png

    Add Description and Your Custom Icon

    Add_description_and_your_custom_icon.png

    1. Grab a 16x 16 icon from iconfinder upload the icon and save your changes.

    Set Up Your Canvas URL in the Facebook Integration Page

    Set_up_your_Canvas_URL_in_the_Facebook_Intregration_Page.png

    1. Your canvas URL will be the main domain your HTML content is living on. Make sure you include the trailing slash in your url.
    2. Make sure that Canvas type is selected iFrame.

    Setting Tab URL (Still in Facebook Intregration Page)

    Setting_Tab_URL__Still_in_facebook_Intregration_Page_.png

    1. Name your Tab. Note: 16 character limit!
    2. Specify the tab URL. In this case the piece of content I am iframing in is "http://inboundnow.tv/fbtest2.html" so I added in the "fbtest2.html" in the Tab URL.

    Save the Changes and Click on Back to My Apps

    Save_the_changes_and_click_on_back_to_my_apps.png

    Select Your App and Go to the Application Profile Page

    Select_your_app_and_go_to_the_application_profile_page.png

    On the Applications Profile, Click on "Add to My Page"

    On_the_Applications_Profile__Click_on_add_to_my_page.png

    Select the page you want to add the custom iframe tab to and you are done!

    media_1298321715945.png

    Go into edit page > Manage Permissions to change this to the default landing page.

    That wasn't so bad was it?

    advanced-facebook-ebook like-what-youaposve-read-click-here

    Topics: Social Media

    Subscribe to HubSpot's Marketing Blog

    Join 350,000+ fellow marketers! Get HubSpot's latest marketing articles straight to your inbox. Enter your email address below:

    Comments

    Sorry we missed you! We close comments for older posts, but we still want to hear from you. Tweet us @HubSpot to continue the discussion.

    Comments
    subscribe to hubspot's marketing blog
    grade your marketing with marketing grader