Cisco Blogs


Cisco Blog > Digital and Social

Video: How to Create a Custom Facebook Tab Using Iframes

April 4, 2011
at 11:00 am PST


Facebook recently announced that they will be deprecating FBML (aka Facebook Markup Language), Hallelujah! How does this affect you? All custom tabs were created using the confusing (for non-engineers, i.e this guy) FBML. Now we can create custom tabs by pulling in our own web pages via an iframe. This means that you can incorporate things like HTML, CSS, and Javascript from your webpage into a custom tab for your fan page without re-coding the functionality into FBML. Here’s a four minute video on how you create a custom tab for your Facebook fan page using iframes; steps provided by Kim Woodbridge at (Anti) Social Development:

Note: Width of your page must be 520px or less to avoid horizontal scrolling.

  • Go to http://www.facebook.com/developers/
  • Click “+Set Up New App” in the top right corner
  • Give your app a name and agree to the Terms
  • About Section
    • Enter descriptions and icons if necessary.
    • Web Site Section
      • Enter your site’s URL. This is where the custom tab is being pulled from. Example: http://newsroom.cisco.com/
      • Facebook Integration Section
        • Create a name for the Application page under “Canvas Page”. Example, http://apps.facebook.com/ciscotopstories.
        • Enter the “Canvas URL”. This is the base directory for the page that is being pulled into the iframe. Example: http://newsroom.cisco.com/facebook/
        • Make sure “Canvas Type” is clicked on iframe.
        • Under “Page Tabs” enter the “Tab URL”. This is the actual page that will be pulled in through the iframe. Example: http://newsroom.cisco.com/facebook/topstories.html

Voila, the tab is done. Simply go the application profile page, located at http://facebook.com/developers, to add the tab to your fan page. Have you incorporated custom tabs into your Facebook page? What methods did you use? What was your experience? Any and all comments are welcome and, as always, feel free to connect with me on Twitter - @arom1000.

Tags: , , , ,

In an effort to keep conversations fresh, Cisco Blogs closes comments after 60 days. Please visit the Cisco Blogs hub page for the latest content.

16 Comments.


  1. “aaaannd boom goes the dynamite”

    Great tut, man

       0 likes

    • nice tutorial! thanks for sharing the tips. did you shoot the video using video camera, or if you use some screen recorder software, such as camtasia?

         0 likes

  2. Alex Romano

    Thanks. This was all Camtasia. I was actually just testing out the software as I was working on a custom FB tab and felt that it would actually be a decent video…and here we are :)

       0 likes

  3. I’m trying to create a tab using these instructions, but I keep getting a ‘page cannot be displayed’ error after I click my new tab on the left. Actually the error reads:

    The page cannot be displayed
    The page you are looking for cannot be displayed because an invalid method (HTTP verb) was used to attempt access.

    Any advice I can get will be greatly appreciated!!

       0 likes

    • Alex Romano

      Hey Rachel,
      Can you view the page at its direct URL before you try to place it in the custom tab?

         0 likes

      • Alex – yes, the URL shows directly when typed in the browser. It just won’t pull into the Facebook page. Thanks!

           0 likes

        • Alex Romano

          Rachel, I had that problem as well. In my case, I had problems with the canvas URL. I was attempting to use an existing directory, with many pages/files in it, and it wasn’t rendering the page for whatever reason. My workaround was to create a new “Facebook” directory and drop the new page in there. I’m not sure if the problem was on FB’s side or mine but it seemed to fix it. So maybe try changing up the canvas URL and see if that works. Hope this helps!

             0 likes

  4. Great post, we’ve been looking for information on this.

    Saviour!

       0 likes

  5. Hi Alex,

    First thanks for the great video. I’m having a bit of trouble on this step “Enter the “Canvas URL”. This is the base directory for the page that is being pulled into the iframe. Example: http://newsroom.cisco.com/facebook/

    I’m trying to pull a page from our new graduate recruitment webpage that’s being hosted on Cisco EOS – I’m not quite sure how I would get the canvas URL. This is the page I’m trying to pull into the tab http://www.universityconnection.ciscoeos.com/opportunities/ any guidance you can provide would be most appreciated.

    Cheers
    Sedef

       0 likes

  6. I’ll have a check to see what I can find, thanks so much Alex for your help!

       0 likes

  7. Thanks for this post. So very useful!

       0 likes

  8. Looking for information on this topic for my blog. Thanks for the post

       0 likes

  9. thanks for the share worked great!

       0 likes

  10. Wow you made that look very easy and quick. Wish it would work that way for me..:) Just one question on that though, after its all done and setup, does everything I post to that page on my site automatically post to it on the FB page? Or do I have to go and edit the tab from my FB page? Thanks Mark…

       0 likes