Snipe.Net Geeky, sweary things.

Static FBML: Not Every Facebook Fan Page Needs An Application

S

You don’t always need a custom application for your Facebook fan page to look amazing. Save yourself time and money by using the Static FBML application instead.


[box type=”error”]FBML and FBJS were deprecated by Facebook in 2012 in place of iframe applications, so the code in this article will not work anymore. This article is being kept here for historical purposes only.[/box]

If you’ve played around with Facebook pages at all, you know that layout-wise, you don’t have a lot of options. It’s one of the reasons some people prefer MySpace, where you can have custom font colors and sizes and custom backgrounds, and one of the reasons I personally have to be paid to logon to MySpace.

A current misconception seems to be that in order to have any custom content or display elements in a Facebook page, such as a custom tab or profile box with a specific promotion or branded look and feel, you need a Facebook application.

This is not true at all, and hopefully, I can save you a lot of time, headache and money by letting you in on a little secret.

There is a Facebook application called Static FBML that could potentially save you a lot of hassle. This application was put out by Facebook, and it allows you to create custom HTML/FBML boxes and tabs on your Facebook fan page.

At its most sophisticated, the Static FBML app can allow you pull FBML elements into a profile box, boxes tab box, or an entire tab, At its most basic, you can use it to create custom HTML boxes in those same places that you can completely design and brand to your liking.

For example, I recently worked on the Facebook fan page for Sunkist Soda. While we do use a custom application to display recent Twitter posts by the Sunkist Soda Twitter account, there is an entire branded tab that is simple HTML. The “Team” tab on this page isn’t a custom application – it’s simply a Static FBML box with custom HTML.

Sunkist Soda Fan Page - Static FBML Box

We also use a Static FBML box on the main page’s profile, with a small box that includes promotions for various campaigns.

The general rule of thumb is – if you don’t actually need to use any scripted languages like PHP or ASP, and you don’t need to access the API to get the user’s information for any reason, you probably don’t actually need an application. In our Sunkist Soda tab example, we’re not accessing the API, and we’re not doing anything database-related. We’re just displaying a nice background image and some thumbnails that link out.

The end result is a beautifully designed and branded tab or box that looks exactly the way you want it to look. When you need to update the content, just login to Facebook and make your changes in the Static FBML box.

Times When Static FBML is Enough

As I mentioned, if you’re not accessing the API and you’re not doing anything fancy, Static FBML will usually cut it. Also bear in mind that you can use Mock Ajax and FBJS in these boxes, so you could actually have a fairly dynamic tab/box, including expandable onclick elements, etc – without an application.

It basically behaves like a stand-alone webpage within your Facebook fan page.

Some suggestions on where beefing up your fan page with Static FBML can really help:

  • Promotional text/graphics that click through your Facebook application or website
  • HTML version of your latest newsletter in its own tab (with signup box!)
  • A shortcut to important links on your website
  • Any other place where you want a custom look and feel within your fan page

Figuring this out sooner rather than later can save you thousands of dollars if you’re considering hiring someone to help you. A contractor is going to have a vested interest in not mentioning this option to you, because it turns a specialized, several-thousand-dollar project into something any jackhole who knows basic HTML can handle themselves.

About the author

snipe

I’m a tech geek/dev/infosec-nerd/scuba diver/blacksmith/sword-fighter/crime fighter/ENTP/warcrafter/activist. I run Grokability, Inc, and run several open source projects, including Snipe-IT Asset Management. Tweet at me @snipeyhead or read more...

  • Tommy

    Thanks for the information. This is the one I am looking for. How long you took to create the Sunkist Soda page? How do you put the promotions and video on the left hard side? I cannot find any settings to do it.

    Thanks.

  • Tommy

    Thanks for the information. This is the one I am looking for. How long you took to create the Sunkist Soda page? How do you put the promotions and video on the left hard side? I cannot find any settings to do it.

    Thanks.

  • I didn’t do the graphic design – no idea how long it took the designers to do it, but it has the same look and feel as many of the things we were doing, its really just a modification of existing artwork we had already developed.

    The video is not embedded – its just HTML thumbnails that link out to YouTube. If we had embedded the video, the size of rhe player would be tiny, accounting for the video controls.

    That said, the Static FBML box supports the fb:swf tags, so that would be your easiest bet:
    http://wiki.developers.facebook.com/index.php/Fb:swf

  • I didn’t do the graphic design – no idea how long it took the designers to do it, but it has the same look and feel as many of the things we were doing, its really just a modification of existing artwork we had already developed.

    The video is not embedded – its just HTML thumbnails that link out to YouTube. If we had embedded the video, the size of rhe player would be tiny, accounting for the video controls.

    That said, the Static FBML box supports the fb:swf tags, so that would be your easiest bet:
    http://wiki.developers.facebook.com/index.php/Fb:swf

  • Tommy

    Thanks snipe. Some more questions.
    -How come you only have one advertisement on the right hand side and my facebook page has more than that?
    -I assume The Mission tab is using graphic on the top part and some background and html on the bottom. How do you capture the submitted information? Using another web site and database to store the data?

    Thanks.

  • Tommy

    Thanks snipe. Some more questions.
    -How come you only have one advertisement on the right hand side and my facebook page has more than that?
    -I assume The Mission tab is using graphic on the top part and some background and html on the bottom. How do you capture the submitted information? Using another web site and database to store the data?

    Thanks.

  • Re: ads – no idea. I have ad blocker software set up, so it might be blocking other ads, or maybe the number of ads is randomized. You’d have to ask Facebook.

    Re: the Mission tab – that’s a Flash widget, so the Flash captures and writes the data to an external database.

  • Re: ads – no idea. I have ad blocker software set up, so it might be blocking other ads, or maybe the number of ads is randomized. You’d have to ask Facebook.

    Re: the Mission tab – that’s a Flash widget, so the Flash captures and writes the data to an external database.

  • Becks

    Great post. Regarding The “team” tab, how do you make a simple static FMBL box into its own tab? Thanks man.

  • Becks

    Great post. Regarding The “team” tab, how do you make a simple static FMBL box into its own tab? Thanks man.

  • Hi Becks – you just do that through your Edit Page screen in Facebook. Find the FBML box you want to make a tab, click on the pencil icon to the right, and click on Application Settings.

    http://www.flickr.com/photos/snipeyhead/3681686973/
    http://www.flickr.com/photos/snipeyhead/3682500768/

  • Hi Becks – you just do that through your Edit Page screen in Facebook. Find the FBML box you want to make a tab, click on the pencil icon to the right, and click on Application Settings.

    http://www.flickr.com/photos/snipeyhead/3681686973/
    http://www.flickr.com/photos/snipeyhead/3682500768/

  • Tommy

    Snipe, I am totally new to facebook development, please bear with me.
    The flash widget that you mentioned, did you develop in house or some ‘apps’ that I can add to the page?

    Thanks

  • Tommy

    Snipe, I am totally new to facebook development, please bear with me.
    The flash widget that you mentioned, did you develop in house or some ‘apps’ that I can add to the page?

    Thanks

  • Becks

    Thanks for the help, I’m quite new facebook applications. Is it possible to keep it as a box and move it to the fan pages main screen?

  • Becks

    Thanks for the help, I’m quite new facebook applications. Is it possible to keep it as a box and move it to the fan pages main screen?

  • @Tommy – It was developed by a third-party specifically for Sunkist

    @Becks – You can have a small profile box on the same page, but its very narrow. What you may want to do instead is make it a tab and then specify in the page preferences that the tab should be the default one that loads when someone goes to the page.

  • @Tommy – It was developed by a third-party specifically for Sunkist

    @Becks – You can have a small profile box on the same page, but its very narrow. What you may want to do instead is make it a tab and then specify in the page preferences that the tab should be the default one that loads when someone goes to the page.

  • Becks

    Thanks again Tommy. Where is the page preferences?


    Becks

  • Becks

    Thanks again Tommy. Where is the page preferences?


    Becks

  • Becks – on the page itself, in the top left, just below the page profile image, you should see a link that says “Edit page” if you are a page administrator. That will take you to your page preferences options.

    • Anonymous

      I have this SAME issue! I have an online widget that I must get onto several fb pages. I have the link but I have no idea how to add the tab, how to make it a url or what I need to do! PLLLEASE HELP! I have HUGE proposal ridding on my ability to make this happen.

  • Becks – on the page itself, in the top left, just below the page profile image, you should see a link that says “Edit page” if you are a page administrator. That will take you to your page preferences options.

  • Becks

    Hey Snipe. Sorry to keep bothering you, but does this mean that I can’t have a small FBML box on the main page next to the wall? The only option I see under preferences would be to make the default tab another section entirely.

  • Becks

    Hey Snipe. Sorry to keep bothering you, but does this mean that I can’t have a small FBML box on the main page next to the wall? The only option I see under preferences would be to make the default tab another section entirely.

  • Becks – as I said, you CAN have an FBML box on your front page, below the friend preview list in that left column. When you create the FBML box, you just want to set it as a profile box instead of adding it to Boxes or making it a Tab.

  • Becks – as I said, you CAN have an FBML box on your front page, below the friend preview list in that left column. When you create the FBML box, you just want to set it as a profile box instead of adding it to Boxes or making it a Tab.

  • Becks

    The application I am using ‘Static FBML’ does not give me that as an option? Eeek

  • Becks

    The application I am using ‘Static FBML’ does not give me that as an option? Eeek

  • I believe you add it as a box, and then on the boxes tab move it to “profile” or “wall”

  • I believe you add it as a box, and then on the boxes tab move it to “profile” or “wall”

  • Becks

    Now I get it. Awesome.

  • Becks

    Now I get it. Awesome.

  • Great post Snipe! The comments are very handy too. Any links to getting started with FBML/HTML? Even just some samples to see how it is done.
    .-= Chris´s last blog ..070509 =-.

  • Great post Snipe! The comments are very handy too. Any links to getting started with FBML/HTML? Even just some samples to see how it is done.
    .-= Chris´s last blog ..070509 =-.

  • Hi Chris – The amount of FBML needed in these types of boxes is very limited. FBML is really used more in actual applications, since it helps tie-into the API. Since you won’t be able to tie-into the API, you’d only need it for displaying stuff like flash, videos, etc – if you needed it at all. I believe all of the Sunkist stuff was done without a lick of FBML. That said, the Facebook API wiki has decent docs on FBML here: http://wiki.developers.facebook.com/index.php/FBML – but bear in mind API-related calls may not work here, since each user has to authorize information about them to be used on an app-by-app basis.

    For HTML/CSS tutorials, you can just google them – there are literally thousands of great ones out there. A good starting point is the World Wide Web Consortium tutorial tho: http://www.w3.org/Style/Examples/011/firstcss

  • Hi Chris – The amount of FBML needed in these types of boxes is very limited. FBML is really used more in actual applications, since it helps tie-into the API. Since you won’t be able to tie-into the API, you’d only need it for displaying stuff like flash, videos, etc – if you needed it at all. I believe all of the Sunkist stuff was done without a lick of FBML. That said, the Facebook API wiki has decent docs on FBML here: http://wiki.developers.facebook.com/index.php/FBML – but bear in mind API-related calls may not work here, since each user has to authorize information about them to be used on an app-by-app basis.

    For HTML/CSS tutorials, you can just google them – there are literally thousands of great ones out there. A good starting point is the World Wide Web Consortium tutorial tho: http://www.w3.org/Style/Examples/011/firstcss

  • Thanks Snipe. The wiki site is perfect. I’m familiar with HTML/CSS, so I was just looking for what can be used in Facebook. I found that here http://wiki.developers.facebook.com/index.php/Allowed_FBML_and_HTML_Tags

    Thanks again for your help and keep up the great work.

  • Thanks Snipe. The wiki site is perfect. I’m familiar with HTML/CSS, so I was just looking for what can be used in Facebook. I found that here http://wiki.developers.facebook.com/index.php/Allowed_FBML_and_HTML_Tags

    Thanks again for your help and keep up the great work.

  • Matt

    Hey Snipe,
    Very helpful post.

    Question for you:

    Do you know of any other top notch Pages?
    How do you think Harley embedded the video in their “Women Riders” tab?
    http://tinyurl.com/lf8h4x

    Their main page under “Harley – Davidson” is quite good as well.

  • Matt

    Hey Snipe,
    Very helpful post.

    Question for you:

    Do you know of any other top notch Pages?
    How do you think Harley embedded the video in their “Women Riders” tab?
    http://tinyurl.com/lf8h4x

    Their main page under “Harley – Davidson” is quite good as well.

  • Hi Matt – they embedded the video by using the fbml:swf tag in the Static FBML box: http://wiki.developers.facebook.com/index.php/Fb:swf

    It’s very easy – the wiki outlines it pretty well.

    That page is pretty to look at, but really its just just a nice HTML page with some video embedded. It’s the design that’s striking, because it was its a nice looking design that a graphic designer clearly spent lots of time working on. The meat and potatoes of making it work is just HTML and that little FBML swf tag.

    You can see what Facebook considered to be top notch pages by checking out this article about their Facebook Blue Ribbon, which they gave to Vitamin Water (another project I worked on), Starbucks and H&M.; The Vitamin Water page isn’t as elaborate as it was, and it used apps (that I wrote), but they consider pages top notch if they provide lots of ways for users to interact, which is generally done through apps.
    http://www.insidefacebook.com/2009/06/11/facebook-recognizes-starbucks-hm-and-vitamin-water-for-innovative-pages/

  • Hi Matt – they embedded the video by using the fbml:swf tag in the Static FBML box: http://wiki.developers.facebook.com/index.php/Fb:swf

    It’s very easy – the wiki outlines it pretty well.

    That page is pretty to look at, but really its just just a nice HTML page with some video embedded. It’s the design that’s striking, because it was its a nice looking design that a graphic designer clearly spent lots of time working on. The meat and potatoes of making it work is just HTML and that little FBML swf tag.

    You can see what Facebook considered to be top notch pages by checking out this article about their Facebook Blue Ribbon, which they gave to Vitamin Water (another project I worked on), Starbucks and H&M. The Vitamin Water page isn’t as elaborate as it was, and it used apps (that I wrote), but they consider pages top notch if they provide lots of ways for users to interact, which is generally done through apps.
    http://www.insidefacebook.com/2009/06/11/facebook-recognizes-starbucks-hm-and-vitamin-water-for-innovative-pages/

  • Matt

    Thanks!

  • Matt

    Thanks!

  • Hey Snipe,
    I tried the static FBML app and it didn’t work on facebook and it seems like numerous people are having the same problem. I added the app to my page and then went to edit it and it couldn’t be found nor could I find it to delete it and re-add it.

    This is what I ultimately wanted to do, I want to create an area like pazza hut did on the left side where they have long banners.
    http://www.facebook.com/PizzaHut?v=wall&viewas=794192998

    How can I do this?
    Thank you 🙂

  • Hey Snipe,
    I tried the static FBML app and it didn’t work on facebook and it seems like numerous people are having the same problem. I added the app to my page and then went to edit it and it couldn’t be found nor could I find it to delete it and re-add it.

    This is what I ultimately wanted to do, I want to create an area like pazza hut did on the left side where they have long banners.
    http://www.facebook.com/PizzaHut?v=wall&viewas=794192998

    How can I do this?
    Thank you 🙂

  • Facebook User

    Hi Snipe, great article.

    I’ve been trying to find out how to add a ‘suggest friends’ box in my fbml tab but can’t for the life of me figure it out.

    Like the one on this page: http://www.facebook.com/pages/Great-Hudson-River-Revival-2009/50496617538#/pages/Great-Hudson-River-Revival-2009/50496617538?v=app_10339498918&viewas=1424766892

    Any ideas?

  • Hi Snipe, great article.

    I’ve been trying to find out how to add a ‘suggest friends’ box in my fbml tab but can’t for the life of me figure it out.

    Like the one on this page: http://www.facebook.com/pages/Great-Hudson-River-Revival-2009/50496617538#/pages/Great-Hudson-River-Revival-2009/50496617538?v=app_10339498918&viewas=1424766892

    Any ideas?

  • Fred

    I can’t seem to even get my background image to display in the staticFBML I can get links and images to show, but not a background…

    Any idea what I’m doing that’s so foolish?

  • Fred

    I can’t seem to even get my background image to display in the staticFBML I can get links and images to show, but not a background…

    Any idea what I’m doing that’s so foolish?

  • Are you using tables or CSS divs? If you’re using divs (which you should be), you have to set a height to the div as well. Other than that, I can’t think of anything off the top of my head without seeing the code.

  • Are you using tables or CSS divs? If you’re using divs (which you should be), you have to set a height to the div as well. Other than that, I can’t think of anything off the top of my head without seeing the code.

  • @Facebook User – how are you trying to set up the invite page? What code are you using int he FBML box, I mean?

  • @Facebook User – how are you trying to set up the invite page? What code are you using int he FBML box, I mean?

  • puneet

    hi,

    very informative article.

    how can i detect that a user clicking on a tab on a fan page is a fan of the page or not and display the contents of tab based on that information similar to what vh1 has done here http://www.facebook.com/s.php?init=q&q=vh1&ref=ts#/VH1.tv?ref=s

  • puneet

    hi,

    very informative article.

    how can i detect that a user clicking on a tab on a fan page is a fan of the page or not and display the contents of tab based on that information similar to what vh1 has done here http://www.facebook.com/s.php?init=q&q=vh1&ref=ts#/VH1.tv?ref=s

  • First of all, Congratulations for your carrier.
    Second, this articles denotes that you are really commited to share your knowledge, great deal!
    I will try to implement it to a FaceBook proyect that a client has ordered me.
    But I preffer to contract you to develop something similar (Twitter, form and campaigns tabs) in my FB site.

  • First of all, Congratulations for your carrier.
    Second, this articles denotes that you are really commited to share your knowledge, great deal!
    I will try to implement it to a FaceBook proyect that a client has ordered me.
    But I preffer to contract you to develop something similar (Twitter, form and campaigns tabs) in my FB site.

  • @puneet – you can use the Pages.isFan API call if you’re creating an actual application:
    http://wiki.developers.facebook.com/index.php/Pages.isFan

    If you’re just using an FBML box, not your own application, you can use the FBML tag visible-to-connection:
    http://wiki.developers.facebook.com/index.php/Fb:visible-to-connection

  • @puneet – you can use the Pages.isFan API call if you’re creating an actual application:
    http://wiki.developers.facebook.com/index.php/Pages.isFan

    If you’re just using an FBML box, not your own application, you can use the FBML tag visible-to-connection:
    http://wiki.developers.facebook.com/index.php/Fb:visible-to-connection

  • Quick question. I have a static FBML application that I can add to a tab on the fan page, but it doesn’t have the option to add it as a box–what do I need to do to get it to work? The page is here: http://www.facebook.com/home.php?#/BestWestern?v=wall&viewas=1046181173 and the tab is the “Find a Hotel” tab.

  • Quick question. I have a static FBML application that I can add to a tab on the fan page, but it doesn’t have the option to add it as a box–what do I need to do to get it to work? The page is here: http://www.facebook.com/home.php?#/BestWestern?v=wall&viewas=1046181173 and the tab is the “Find a Hotel” tab.

  • @plaidpony – Have you set fb:wide and/or fb:narrow and then called setFBML in your code? Would look something like this, assuming $fbml is the variable you’re keeping all of your out in (also the FBML brackets are replaced by braces for this example so WordPress won’t eat them:

    $wide_fbml = ‘{fb:wide}’;
    $wide_fbml = .= ‘My wide box content’;
    $wide_fbml = ‘{/fb:wide}’;

    $narrow_fbml .= ‘{fb:narrow}’;
    $narrow_fbml = ‘My narrow box content’;
    $narrow_fbml = ‘{/fb:narrow}’;

    $all_fbml = $wide_fbml.$narrow_fbml;

    $facebook->api_client->profile_setFBML(NULL, $Page_ID, $all_fbml, NULL, NULL, $narrow_fbml);

    For reference:
    http://wiki.developers.facebook.com/index.php/Fb:wide
    http://wiki.developers.facebook.com/index.php/Fb:narrow
    http://wiki.developers.facebook.com/index.php/Profile.setFBML

  • @plaidpony – Have you set fb:wide and/or fb:narrow and then called setFBML in your code? Would look something like this, assuming $fbml is the variable you’re keeping all of your out in (also the FBML brackets are replaced by braces for this example so WordPress won’t eat them:

    $wide_fbml = ‘{fb:wide}’;
    $wide_fbml = .= ‘My wide box content’;
    $wide_fbml = ‘{/fb:wide}’;

    $narrow_fbml .= ‘{fb:narrow}’;
    $narrow_fbml = ‘My narrow box content’;
    $narrow_fbml = ‘{/fb:narrow}’;

    $all_fbml = $wide_fbml.$narrow_fbml;

    $facebook->api_client->profile_setFBML(NULL, $Page_ID, $all_fbml, NULL, NULL, $narrow_fbml);

    For reference:
    http://wiki.developers.facebook.com/index.php/Fb:wide
    http://wiki.developers.facebook.com/index.php/Fb:narrow
    http://wiki.developers.facebook.com/index.php/Profile.setFBML

  • plaidpony,
    I just came across the same problem but I managed to figure it out.

    Make sure you have “add to MY page” in Static FBML
    Go to the profile page for your application
    And Edit Application (top left, right below go to application)
    FBML – FBML (the little pen)
    application setting
    and you will find the setting for box and tab

  • plaidpony,
    I just came across the same problem but I managed to figure it out.

    Make sure you have “add to MY page” in Static FBML
    Go to the profile page for your application
    And Edit Application (top left, right below go to application)
    FBML – FBML (the little pen)
    application setting
    and you will find the setting for box and tab

  • @plaidpony – I’m so sorry – I misread your original comment, and thought you were NOT using Static FBML, but were instead using a custom built application. Ignore my comment – that will only work in a custom application. My apologies.

    tksham is correct on where to find the settings for box and tab.

  • @plaidpony – I’m so sorry – I misread your original comment, and thought you were NOT using Static FBML, but were instead using a custom built application. Ignore my comment – that will only work in a custom application. My apologies.

    tksham is correct on where to find the settings for box and tab.

  • When I go to the application profile page and click “Edit Application”, my only options are “Application Information”, “Application Settings”, “Wall Settings”, “Mobile”, “Discussion Boards, “Reviews”, and “More Applications”–there is nothing that is titled “FBML” on the page.

  • When I go to the application profile page and click “Edit Application”, my only options are “Application Information”, “Application Settings”, “Wall Settings”, “Mobile”, “Discussion Boards, “Reviews”, and “More Applications”–there is nothing that is titled “FBML” on the page.

  • And what do you see when you click on Application Settings?

  • And what do you see when you click on Application Settings?

  • plaidpony,
    that’s strange, have you add the pages to your app in the FBML app?
    http://www.facebook.com/apps/application.php?id=4949752878
    there is “add to My page” near the app logo

    snipe,
    I would like to know how to create a custom application for embedding into company’s page, would you please share any ideas /post / tutorials with us?
    .-= tksham´s last blog ..How innovation … =-.

  • plaidpony,
    that’s strange, have you add the pages to your app in the FBML app?
    http://www.facebook.com/apps/application.php?id=4949752878
    there is “add to My page” near the app logo

    snipe,
    I would like to know how to create a custom application for embedding into company’s page, would you please share any ideas /post / tutorials with us?
    .-= tksham´s last blog ..How innovation … =-.

  • @tksham – I have a few articles on writing facebook apps, but haven’t had time to put up a tutorial on writing one from scratch, start to finish yet:

    http://www.snipe.net/2008/09/planning-a-facebook-application/
    http://www.snipe.net/2008/12/planning-a-facebook-application-part-two/

    There are several good tutorials out there already though – just check Google:
    http://tinyurl.com/kqm2r4

  • @tksham – I have a few articles on writing facebook apps, but haven’t had time to put up a tutorial on writing one from scratch, start to finish yet:

    http://www.snipe.net/2008/09/planning-a-facebook-application/
    http://www.snipe.net/2008/12/planning-a-facebook-application-part-two/

    There are several good tutorials out there already though – just check Google:
    http://tinyurl.com/kqm2r4

  • @snipe,

    I am sorry to bother you. (I know you are spending your own time to share with us, it is very kind of you.)

    Thanks to your posts, I figure it out that I missed typing the URL in the tab URL…that’s why I cannot choose to add the tab in my page.

    But the problem now is that I cannot set the Tab URL correctly

    my app is stored in xxx.com/facebook_dev
    and if I set the Tab URL to tab
    it will return

    Errors while loading page from application
    Runtime errors:

    fb:redirect: redirect forbidden by flavor TabFBMLFlavor

    and if I set the Tab URL to index.php

    Errors while loading page from application

    The URL http://xxx.com/facebook_devindex.php returned a 404 Not Found error.

    Any ideas?
    .-= tksham´s last blog ..How innovation … =-.

  • @snipe,

    I am sorry to bother you. (I know you are spending your own time to share with us, it is very kind of you.)

    Thanks to your posts, I figure it out that I missed typing the URL in the tab URL…that’s why I cannot choose to add the tab in my page.

    But the problem now is that I cannot set the Tab URL correctly

    my app is stored in xxx.com/facebook_dev
    and if I set the Tab URL to tab
    it will return

    Errors while loading page from application
    Runtime errors:

    fb:redirect: redirect forbidden by flavor TabFBMLFlavor

    and if I set the Tab URL to index.php

    Errors while loading page from application

    The URL http://xxx.com/facebook_devindex.php returned a 404 Not Found error.

    Any ideas?
    .-= tksham´s last blog ..How innovation … =-.

  • Hi tksham – I actually wrote about this issue here:
    http://www.snipe.net/2009/04/facebook-application-tabs/

  • Hi tksham – I actually wrote about this issue here:
    http://www.snipe.net/2009/04/facebook-application-tabs/

  • I feel like such a dork–another developer already had some Static FBML boxes on the page–they were labeled as [box name] – FBML and I didn’t realize that those were the Static FBML application boxes–I was specifically looking for FBML – FBML. I was able to add another box successfully. Thanks for the help!

  • I feel like such a dork–another developer already had some Static FBML boxes on the page–they were labeled as [box name] – FBML and I didn’t realize that those were the Static FBML application boxes–I was specifically looking for FBML – FBML. I was able to add another box successfully. Thanks for the help!

  • Becks

    Do you know if FBML boxes support image maps? The map in my html does not work when I use it on facebook. Thanks.

  • Becks

    Do you know if FBML boxes support image maps? The map in my html does not work when I use it on facebook. Thanks.

  • @Becks – I believe so, but I usually CSS to make imagemaps, not HTML. Can you use pastebin.com or something similar to show me the code you’re using?

  • @Becks – I believe so, but I usually CSS to make imagemaps, not HTML. Can you use pastebin.com or something similar to show me the code you’re using?

  • Becks

    For some reason pastebin is labeling my code as spam?

  • Becks

    For some reason pastebin is labeling my code as spam?

  • Becks
  • Becks
  • @Becks – okay, well two things off the top of my head:

    1) Skip the html/body tags
    2) Your imagemap image is a link itself:

    {a href=”http://s722.photobucket.com/albums/ww221/beckssphotobucket/?action=view&current;=FinalFBTabSmall.jpg” target=”_blank”}
    {img src=”http://i722.photobucket.com/albums/ww221/beckssphotobucket/FinalFBTabSmall.jpg” border=”0″ alt=”LTM” width=”575″ height=”615″
    usemap=”#map”}{/a}

    If the image is an imagemap, it shouldn’t have a link surrounding it, since the href locations are defined by the map coords.

  • @Becks – okay, well two things off the top of my head:

    1) Skip the html/body tags
    2) Your imagemap image is a link itself:

    {a href=”http://s722.photobucket.com/albums/ww221/beckssphotobucket/?action=view&current=FinalFBTabSmall.jpg” target=”_blank”}
    {img src=”http://i722.photobucket.com/albums/ww221/beckssphotobucket/FinalFBTabSmall.jpg” border=”0″ alt=”LTM” width=”575″ height=”615″
    usemap=”#map”}{/a}

    If the image is an imagemap, it shouldn’t have a link surrounding it, since the href locations are defined by the map coords.

  • Becks

    Hmmm. It is still now working. Thanks for the try.

  • Becks

    Hmmm. It is still now working. Thanks for the try.

  • I’ll try to take a stab tonight when I get home from work, and see if I can get it working. Otherwise you might try a CSS imagemap instead. I don’t remember having any issues with FBML boxes and imagemaps, but it’s been a while since I used an imagemap in an FBML box.

  • I’ll try to take a stab tonight when I get home from work, and see if I can get it working. Otherwise you might try a CSS imagemap instead. I don’t remember having any issues with FBML boxes and imagemaps, but it’s been a while since I used an imagemap in an FBML box.

  • cocopop

    Hi there,

    Really good article. Just a quick question. Is it possible to add static FBML boxes inside a static FBML tab?

    If yes, how?

    Thanks.

  • cocopop

    Hi there,

    Really good article. Just a quick question. Is it possible to add static FBML boxes inside a static FBML tab?

    If yes, how?

    Thanks.

  • @cocpop – well, no – but you wouldn’t need to. If you want the appearance of separate boxes within a static FBML tab, you would just design your HTML/FBML within that static FBML box that you’re using as a tab to give the appearance of being multiple boxes. You can’t put an app inside an app, and the static FBML box is an app.

    • Delayed, but Im stumped on this. I’ve got a decent fan page all html/fbml (sized to the newer narrower spec that is coming our way) but the client wants a fan box on it. I’ve tried everything I can think of — fb:iframe, etc., but I’m getting nothing but space. Actually considering hosting the freaking fan box on a html page on my site and iframing it in. Lots of back and forth. They only have a few hundred fans, so it won’t get all the much traffic while I figure it out. The wiki says to use the iframe with fb fan info inside it, but it’s still not working for me. No clear examples anywhere that I can find.

      Help please!

      • What do you mean you want a fan box in it – the fanbox widget that lets you fan the page, see some of the current fans, etc?

      • Facebook Pages already contain the ability for viewers to become a fan. And if you’re already a fan, the ‘Become a Fan’ button changes to ‘You Are a Fan’.

        You cannot use iframes in static FBML boxes, and to my knowledge, fb:fan will not work within Facebook – it’s meant to live on other sites.

      • Facebook Pages already contain the ability for viewers to become a fan. And if you’re already a fan, the ‘Become a Fan’ button changes to ‘You Are a Fan’.

        You cannot use iframes in static FBML boxes, and to my knowledge, fb:fan will not work within Facebook – it’s meant to live on other sites.

    • Delayed, but Im stumped on this. I’ve got a decent fan page all html/fbml (sized to the newer narrower spec that is coming our way) but the client wants a fan box on it. I’ve tried everything I can think of — fb:iframe, etc., but I’m getting nothing but space. Actually considering hosting the freaking fan box on a html page on my site and iframing it in. Lots of back and forth. They only have a few hundred fans, so it won’t get all the much traffic while I figure it out. The wiki says to use the iframe with fb fan info inside it, but it’s still not working for me. No clear examples anywhere that I can find.

      Help please!

    • Ezzatkal

      hello snipe, can we have multiple custom tabs, and how?

  • @cocpop – well, no – but you wouldn’t need to. If you want the appearance of separate boxes within a static FBML tab, you would just design your HTML/FBML within that static FBML box that you’re using as a tab to give the appearance of being multiple boxes. You can’t put an app inside an app, and the static FBML box is an app.

  • cocopop

    Cheers for quick reply. Can you quickly let me know how to generate a box in an FBML tab? Is there a quick way to do this or do I have to write my own css/html for that?

    Cheers.

  • cocopop

    Cheers for quick reply. Can you quickly let me know how to generate a box in an FBML tab? Is there a quick way to do this or do I have to write my own css/html for that?

    Cheers.

  • You’ll have to write some of the html/css yourself, but this style guide should help: http://devtacular.com/articles/bkonrad/how-to-style-an-application-like-facebook/

  • You’ll have to write some of the html/css yourself, but this style guide should help: http://devtacular.com/articles/bkonrad/how-to-style-an-application-like-facebook/

  • HI, great – thanks

    I added FBML to page: http://www.facebook.com/pages/MTP/123220978707?ref=ts
    created a tab/page, edited the FBML, renamed it and now cannot add another FBML tab.

    Once FBML is added, do I have to add multp tabs before renaming any?
    ANy way to add it again so i can get more FBML tabs?

  • HI, great – thanks

    I added FBML to page: http://www.facebook.com/pages/MTP/123220978707?ref=ts
    created a tab/page, edited the FBML, renamed it and now cannot add another FBML tab.

    Once FBML is added, do I have to add multp tabs before renaming any?
    ANy way to add it again so i can get more FBML tabs?

  • Sorry, never mind, I think I got it working ….

  • Sorry, never mind, I think I got it working ….

  • cocopop

    Thanks snipe for all the help 🙂

  • cocopop

    Thanks snipe for all the help 🙂

  • ashley

    How can I add a “Follow Us” box right below the “Fans” box on my Fanpage?

    Thanks 🙂

  • ashley

    How can I add a “Follow Us” box right below the “Fans” box on my Fanpage?

    Thanks 🙂

  • Hi Ashley – you mean a dynamic ‘become a fan’ button, or just a box that suggests users become a fan?

  • Hi Ashley – you mean a dynamic ‘become a fan’ button, or just a box that suggests users become a fan?

  • Err, sorry – I think I might have gotten wires crossed there – what do you mean by “Follow us” – as in a link to your Twitter account?

  • Err, sorry – I think I might have gotten wires crossed there – what do you mean by “Follow us” – as in a link to your Twitter account?

  • Josh

    Great article! I really like Static FBML too. I have one quick question. I created the page and it comes up perfectly in the preview mode. When I go to the actual fan page all I get is a blank screen. Any suggestions?

    Thanks!

  • Josh

    Great article! I really like Static FBML too. I have one quick question. I created the page and it comes up perfectly in the preview mode. When I go to the actual fan page all I get is a blank screen. Any suggestions?

    Thanks!

  • @Josh – Without seeing the code, its hard to say. I will admit that the FBML app can be buggy sometimes tho. Can you paste the entire contents of the box into a pastebin.com link so I can take a look and see if anything jumps out?

  • @Josh – Without seeing the code, its hard to say. I will admit that the FBML app can be buggy sometimes tho. Can you paste the entire contents of the box into a pastebin.com link so I can take a look and see if anything jumps out?

  • jennyjenny

    Hi Snipe,
    Just wanted to say that you rock for being so helpful and generous with your insights and FBML knowledge!

    Cheers!

  • jennyjenny

    Hi Snipe,
    Just wanted to say that you rock for being so helpful and generous with your insights and FBML knowledge!

    Cheers!

  • Josh

    Hey Shipe,

    Actually, I just figured it out. I had used Static FBML in the past and it was having issues reading both at the same time. Once I deleted both copies of the application I was able to load my new content with ease.

    Thanks for the help!

  • Josh

    Hey Shipe,

    Actually, I just figured it out. I had used Static FBML in the past and it was having issues reading both at the same time. Once I deleted both copies of the application I was able to load my new content with ease.

    Thanks for the help!

  • ashley

    Hi Snipe-

    I meant a Follow Us Box on the left side of the fanpage which has icons of twitter, myspace, youtube, etc and links to them

    check out facebook.com/threadless

    I’ve used FBML, the TAB is showing up but the BOX isn’t and I’ve played around and editted it a few times to have the box show up but no luck 🙁

  • ashley

    Hi Snipe-

    I meant a Follow Us Box on the left side of the fanpage which has icons of twitter, myspace, youtube, etc and links to them

    check out facebook.com/threadless

    I’ve used FBML, the TAB is showing up but the BOX isn’t and I’ve played around and editted it a few times to have the box show up but no luck 🙁

  • dean

    Hey Snipe- great article. I was viewing the Target page; http://www.facebook.com/target and it seems they are using flash for some of their tabs. Which app is that? And are you familiar with the app on The Peas tab which allows users to comment?

  • dean

    Hey Snipe- great article. I was viewing the Target page; http://www.facebook.com/target and it seems they are using flash for some of their tabs. Which app is that? And are you familiar with the app on The Peas tab which allows users to comment?

  • Hi dean – looks like both are just FBML boxes. You can use Flash in an FBML box by using the fb:swf FBML tag. The comments look like they’re just using the fb:comments FBML tag: http://wiki.developers.facebook.com/index.php/Fb:comments

  • Hi dean – looks like both are just FBML boxes. You can use Flash in an FBML box by using the fb:swf FBML tag. The comments look like they’re just using the fb:comments FBML tag: http://wiki.developers.facebook.com/index.php/Fb:comments

  • @ashley – I believe you have to add it as a box, and then on the boxes tab, click on the little pencil edit icon and select to move it to the wall/profile.

  • @ashley – I believe you have to add it as a box, and then on the boxes tab, click on the little pencil edit icon and select to move it to the wall/profile.

  • therealjlo

    Becks, image maps as html are not possible in fbml. Here’s the developer page where you can add your name to the list of people wanting that tag added.
    http://wiki.developers.facebook.com/index.php/Requested_FBML_Tags#
    To add your name, sign in and then click the “edit” beside the map tag entry. Add a break tag to the last line, put your name as something like “7thd by Becks” and then put four tildes (~~~~). that puts a timestamp on it. Then click to save it.

    I’m wanting to put a state map as the image map, so slicing wouldn’t do the trick and I’ve never heard of css to do an image map. I’ll have to check into that, but I’m afraid it probably won’t do the polygon shapes. 🙁

  • therealjlo

    Becks, image maps as html are not possible in fbml. Here’s the developer page where you can add your name to the list of people wanting that tag added.
    http://wiki.developers.facebook.com/index.php/Requested_FBML_Tags#
    To add your name, sign in and then click the “edit” beside the map tag entry. Add a break tag to the last line, put your name as something like “7thd by Becks” and then put four tildes (~~~~). that puts a timestamp on it. Then click to save it.

    I’m wanting to put a state map as the image map, so slicing wouldn’t do the trick and I’ve never heard of css to do an image map. I’ll have to check into that, but I’m afraid it probably won’t do the polygon shapes. 🙁

  • adrian

    Hey Snipe, I am actually just trying to embed my twitter feed into my page(static fbml box) the way you did with the Sunkist twitter tab. How did you do that? From what i have read javascript isn’t allowed and every twitter app i find uses it. I am going bonkers trying to figure this out!
    Any help would be awesome!

  • adrian

    Hey Snipe, I am actually just trying to embed my twitter feed into my page(static fbml box) the way you did with the Sunkist twitter tab. How did you do that? From what i have read javascript isn’t allowed and every twitter app i find uses it. I am going bonkers trying to figure this out!
    Any help would be awesome!

  • Hi adrian – because we wanted to display the feed in a specific way (with the background design, etc), I actually had to write a custom app for that tab. 🙁

    Some javascript is a allowed, but a lot isn’t. You might try doing a search on the app directory for ‘twitter’ – I’m almost positive there were at least one or two apps that let you display your feed. The Twitter app might, and I think Twittar does.

  • Hi adrian – because we wanted to display the feed in a specific way (with the background design, etc), I actually had to write a custom app for that tab. 🙁

    Some javascript is a allowed, but a lot isn’t. You might try doing a search on the app directory for ‘twitter’ – I’m almost positive there were at least one or two apps that let you display your feed. The Twitter app might, and I think Twittar does.

  • Sorry to ask a stupid question but … I can’t figure out how to add the Static FBML to my FB page. I go to the Static FBML page and try to Add a Friend but nothing shows up in the popup box. How do I add this application?

  • Sorry to ask a stupid question but … I can’t figure out how to add the Static FBML to my FB page. I go to the Static FBML page and try to Add a Friend but nothing shows up in the popup box. How do I add this application?

  • Hey Snipe, is your “The Missions” Page static or did you use an application? I am guessing app.

  • Hey Snipe, is your “The Missions” Page static or did you use an application? I am guessing app.

  • Well, its technically FBML, but its a flash widget that was created by a third party.

    • I just found out about Static FBML, and am enjoying the new possibilities. I have not done much coding since HTML, but am always eager to learn. I am trying to add my business’ “Pre-Orders” page as a FB Tab on my business’ Fan Page. However, all I want to do is link to the page (http://www.familyfunhobbies.com/preorders.aspx) and have it display on the FB Tab, without having to completely re-write the page in FB. I thought I could simply use an href link, but to no avail. Help please.

      • A normal A HREF link does work in FBML. Perhaps check your HML?

  • Well, its technically FBML, but its a flash widget that was created by a third party.

  • Just to clear something up – can I put “regular old” html inside the box that says “fbml” or does it NEED to be fbml?

    Also, do I have to have the basic type tags or can I just start typing away? Like suppose I wanted to just have a tab on my fan page that said “stuff”, and then when you clicked on it, it just had plain unstyled text – no pics, no layout positioning, nothing…

    I have a fundamental misunderstanding on how to get started here.
    Currently, when I look at the fbml tab (while viewing the page as a use would) it’s just blank.

  • Just to clear something up – can I put “regular old” html inside the box that says “fbml” or does it NEED to be fbml?

    Also, do I have to have the basic type tags or can I just start typing away? Like suppose I wanted to just have a tab on my fan page that said “stuff”, and then when you clicked on it, it just had plain unstyled text – no pics, no layout positioning, nothing…

    I have a fundamental misunderstanding on how to get started here.
    Currently, when I look at the fbml tab (while viewing the page as a use would) it’s just blank.

  • Hi Chris – regular old HTML is just fine 🙂 You don’t need to have any FBML in an FBML box, and in fact, many people don’t use any at all. The Sunkist example doesn’t use FBML in that tab, just HTML

  • Hi Chris – regular old HTML is just fine 🙂 You don’t need to have any FBML in an FBML box, and in fact, many people don’t use any at all. The Sunkist example doesn’t use FBML in that tab, just HTML

  • Chris

    Are there any REQUIRED tags to make this work?
    Like, for a browser, valid html must have the html, head and body tag – anything like that for the fbml applicaton?

    I just get blank canvas pages regardless of what code I put into the fbml box.

  • Chris

    Are there any REQUIRED tags to make this work?
    Like, for a browser, valid html must have the html, head and body tag – anything like that for the fbml applicaton?

    I just get blank canvas pages regardless of what code I put into the fbml box.

  • Hi Chris – no, no required tags. In fact, if you try to include a head/body, Facebook will strip that out, since the page itself already has a head/body (the one Facebook sends with the page load.) Only thing I can think of is that maybe things are still a little wonky after yesterday’s DDoS attack on Facebook. Whaqt have you tried so far?

  • Hi Chris – no, no required tags. In fact, if you try to include a head/body, Facebook will strip that out, since the page itself already has a head/body (the one Facebook sends with the page load.) Only thing I can think of is that maybe things are still a little wonky after yesterday’s DDoS attack on Facebook. Whaqt have you tried so far?

  • Hey Snipe,

    First I’d like to say that you rock by helping us all out. I have been digging on the Internet for days trying to find a solution to my problem and so far, you are the only one that is offering advice that may actually work.

    So here is what I’m trying to do. I have a fan page, http://www.facebook.com/pages/Colic-Care/104961885431, and I would like a small box on the left side of the wall that will allow people to invite friends to become fans of Colic Care. I want something like what JCPenney has on their fan page. All I have found so far, is code that is geared toward inviting people to applications. Everything I have tried from the Internet has led to blank boxes and tabs. I have removed Static FBML (from the fan page) and HTML Box (from my personal page) and would like to start from scratch. Could you possible walk me through how to do that? I would greatly appreciate it.

    Thanks in advance,

    Mark

  • Hey Snipe,

    First I’d like to say that you rock by helping us all out. I have been digging on the Internet for days trying to find a solution to my problem and so far, you are the only one that is offering advice that may actually work.

    So here is what I’m trying to do. I have a fan page, http://www.facebook.com/pages/Colic-Care/104961885431, and I would like a small box on the left side of the wall that will allow people to invite friends to become fans of Colic Care. I want something like what JCPenney has on their fan page. All I have found so far, is code that is geared toward inviting people to applications. Everything I have tried from the Internet has led to blank boxes and tabs. I have removed Static FBML (from the fan page) and HTML Box (from my personal page) and would like to start from scratch. Could you possible walk me through how to do that? I would greatly appreciate it.

    Thanks in advance,

    Mark

  • Hey, very useful post! I’m wondering if you could point me to some resources or know yourself if there’s a way to create a piece of a website inside a fbml tab in your fan page. So really just a window into the website where people could donate, join, put down their information, etc. anything you know of? Thanks!

    • Anonymous

      Hi Snipe,

      Thanks for the great info. Do you know if FBML boxes support javascript? I tried to create a box (banner ad from an ad server) that I would eventually move to the wall, but it’s not working. Any thoughts?

      sr_adspace_id = 2000000247107;
      sr_adspace_width = 180;
      sr_adspace_height = 150;
      sr_ad_new_window = true;
      sr_adspace_type = “graphic”;

      • Javascript on Facebook is extremely limited, unforunately. They do that to protect their users from malicious content.

  • Hey, very useful post! I’m wondering if you could point me to some resources or know yourself if there’s a way to create a piece of a website inside a fbml tab in your fan page. So really just a window into the website where people could donate, join, put down their information, etc. anything you know of? Thanks!

  • Arun

    Hi Snipe,

    Thanks for the great post.

    I have a doubt, I was planning to create an app to get our calendar/twitter updates to the same tab. I can create a PHP app for that, but i need to have 2 tabs with twitt/calendar updates.. How can i do that?

    Thx in advance
    Arun

  • Arun

    Hi Snipe,

    Thanks for the great post.

    I have a doubt, I was planning to create an app to get our calendar/twitter updates to the same tab. I can create a PHP app for that, but i need to have 2 tabs with twitt/calendar updates.. How can i do that?

    Thx in advance
    Arun

  • Chris

    Do I need to make a full-fledged application (vs. just use a static fbml tab) if I want this to happen:
    When a user takes an action on my fan page, I want that action to post to their wall, so that their friends will see it in their news feeds.

    Would making that happen require “a call to the API” and therefore needing an app?

    Here’s why I want to do this:
    I’m looking to do some PPC on Facebook. The only reason that I can see to take the user from the ad to my FB fan page (instead of my website) is so that -if- I succeed in getting the user to take the desired action, that I have the chance of it “going viral” via their friends seeing that action in their news feeds.

  • Chris

    Do I need to make a full-fledged application (vs. just use a static fbml tab) if I want this to happen:
    When a user takes an action on my fan page, I want that action to post to their wall, so that their friends will see it in their news feeds.

    Would making that happen require “a call to the API” and therefore needing an app?

    Here’s why I want to do this:
    I’m looking to do some PPC on Facebook. The only reason that I can see to take the user from the ad to my FB fan page (instead of my website) is so that -if- I succeed in getting the user to take the desired action, that I have the chance of it “going viral” via their friends seeing that action in their news feeds.

  • KennyNegs

    Would you be able to tell us how you handled the call to the http://twitter.com/statuses/user_timeline/%5BUSERNAME%5D.json since “Javascript src=”doesn’t work?

    Great work, btw!

  • KennyNegs

    Would you be able to tell us how you handled the call to the http://twitter.com/statuses/user_timeline/%5BUSERNAME%5D.json since “Javascript src=”doesn’t work?

    Great work, btw!

  • Hi KennyNegs – do you mean for the Twitter tab? That tab is actually an application, so I’m using PHP to grab the RSS feed for the Sunkist_Soda user, and than parsing it out for display.

  • Hi KennyNegs – do you mean for the Twitter tab? That tab is actually an application, so I’m using PHP to grab the RSS feed for the Sunkist_Soda user, and than parsing it out for display.

  • KennyNegs

    Yep. that makes WAAAY more sense. Thanks a ton!

  • KennyNegs

    Yep. that makes WAAAY more sense. Thanks a ton!

  • Chris

    The more I learn, the less I’m sure that I need to be making an app.

    I’m really only interested in creating a fan page that has a form for people to fill out. -IF- they do fill out that form, then I’d like for that action to be seen by their friends.

    It’s more of an “awarenes cause” than it is an “app” perse. Meaning, I can’t imagine people using the app much more than one time. It will never be like “photos” where its multi-purpose and used daily.

  • Chris

    The more I learn, the less I’m sure that I need to be making an app.

    I’m really only interested in creating a fan page that has a form for people to fill out. -IF- they do fill out that form, then I’d like for that action to be seen by their friends.

    It’s more of an “awarenes cause” than it is an “app” perse. Meaning, I can’t imagine people using the app much more than one time. It will never be like “photos” where its multi-purpose and used daily.

  • Anna

    Hi Snipe,

    I have no programming background whatsoever. I want to add an FBML box to my profile. I’ve been looking at people’s feedback on how to do it but Im still lost, and way in over my head. Any way you could (or show me where) give me step by step directions on how to do it? I know its probably super simple, but it would really help!

    Thanks

  • Anna

    Hi Snipe,

    I have no programming background whatsoever. I want to add an FBML box to my profile. I’ve been looking at people’s feedback on how to do it but Im still lost, and way in over my head. Any way you could (or show me where) give me step by step directions on how to do it? I know its probably super simple, but it would really help!

    Thanks

  • Teresa

    Snipe, I’m creating a business page for a very large company and have the basics. I’m a developer. I’ve been ALL around the world wide web trying to get a very simple basic question answered to no avail!! I see you have accomplished the feat I am trying to do.. Add the ‘Become a Fan’ button underneath the Sunkist name. HOW DID YOU DO THAT???? I can get the code, but have no idea how or where to paste this code to have it appear there on my FB business account.

  • Teresa

    Snipe, I’m creating a business page for a very large company and have the basics. I’m a developer. I’ve been ALL around the world wide web trying to get a very simple basic question answered to no avail!! I see you have accomplished the feat I am trying to do.. Add the ‘Become a Fan’ button underneath the Sunkist name. HOW DID YOU DO THAT???? I can get the code, but have no idea how or where to paste this code to have it appear there on my FB business account.

  • Teresa – The become a fan text is there by default, unless you have already fanned the page. Try removing yourself from fans, and reloading. It appears on its own.

  • Teresa – The become a fan text is there by default, unless you have already fanned the page. Try removing yourself from fans, and reloading. It appears on its own.

  • Wes

    I have the same question as Mark on 8/7. Has it been answered?

    I want to create a box that will allow me to invite people (who aren’t necessarily my friends) to become fans of my page if I have their e-mails.

  • Wes

    I have the same question as Mark on 8/7. Has it been answered?

    I want to create a box that will allow me to invite people (who aren’t necessarily my friends) to become fans of my page if I have their e-mails.

  • Pingback: (Anti) Social-Lists 8/16/09 | (Anti) Social Development()

  • Hello,

    I am trying to create a preview of the wall on the boxes page which is where i want non fans to land. My first thought was to put a Fanbox widget into a fbml box, but facebook seems to strip out he javascript, so my next option seems to be to strip out the java script myself and use fbml…but i am not familiar enough with fbml to a)make that work or b) know if it is even possible.

    My page http://www.facebook.com/bmoreconnected definitely includes this preview feature in my ideal world, but i don’t know if it is possible? Is it, and if not using a fanbox then how?

  • Hello,

    I am trying to create a preview of the wall on the boxes page which is where i want non fans to land. My first thought was to put a Fanbox widget into a fbml box, but facebook seems to strip out he javascript, so my next option seems to be to strip out the java script myself and use fbml…but i am not familiar enough with fbml to a)make that work or b) know if it is even possible.

    My page http://www.facebook.com/bmoreconnected definitely includes this preview feature in my ideal world, but i don’t know if it is possible? Is it, and if not using a fanbox then how?

  • Pingback: Creating Custom Tabs For Facebook Fan Pages | AJ Vaynerchuk()

  • Hi Andy – To my knowledge, this just isn’t possible – also, it’s not really necessary, since the “Become a fan” link that Facebook includes is all the way at the top of the page, impossible to miss. I find with Facebook, a lot of what I’d like to do isn’t possible, so it requires a different approach. You might try a graphic that suggests people fan the page, or reminds them to, but to my knowledge, there is no way to put a “become a fan” workin functional widget in an FBML box.

  • Hi Andy – To my knowledge, this just isn’t possible – also, it’s not really necessary, since the “Become a fan” link that Facebook includes is all the way at the top of the page, impossible to miss. I find with Facebook, a lot of what I’d like to do isn’t possible, so it requires a different approach. You might try a graphic that suggests people fan the page, or reminds them to, but to my knowledge, there is no way to put a “become a fan” workin functional widget in an FBML box.

  • Hey Snipe,

    Mark here again, from the Aug 7th request/post. If you search JCPenney on Facebook and look on their wall, they do exactly that. On the left side of the wall is an image that allows users to select their friends and invite to become a fan. This was the functionality that I was hoping you could help me with. I’d like to do the same thing that they do. I guess that Wes from the Aug 15th post was looking for the same thing. Any help on how to duplicate what JCPenney did would be great.

    Thanks again,

    Mark

  • Hey Snipe,

    Mark here again, from the Aug 7th request/post. If you search JCPenney on Facebook and look on their wall, they do exactly that. On the left side of the wall is an image that allows users to select their friends and invite to become a fan. This was the functionality that I was hoping you could help me with. I’d like to do the same thing that they do. I guess that Wes from the Aug 15th post was looking for the same thing. Any help on how to duplicate what JCPenney did would be great.

    Thanks again,

    Mark

  • Mark – please give me a link to the fan page – when I search on JC Penny, I get nothing relevant.

  • Mark – please give me a link to the fan page – when I search on JC Penny, I get nothing relevant.

  • Chris

    @Andy Ellis
    The code for a “fanbox widget” is for use on websites OTHER THAN facebook. It is for getting people already at your site to also become your facebook fan page fans. So yes – you are correct – the fbml box is stripping out the javascript. You can do the JS equivalent by learning fbjs – there’s no shortcut here – you’re just going to have to learn it.

    @Mark & @Wes
    If you want it to show up on your wall tab, then it will have to be added to the wall as a box. To add as a box, it must be an application. So you are going to have to learn how to create an application. In your case, a simple fbml box will not be enough.

  • Chris

    @Andy Ellis
    The code for a “fanbox widget” is for use on websites OTHER THAN facebook. It is for getting people already at your site to also become your facebook fan page fans. So yes – you are correct – the fbml box is stripping out the javascript. You can do the JS equivalent by learning fbjs – there’s no shortcut here – you’re just going to have to learn it.

    @Mark & @Wes
    If you want it to show up on your wall tab, then it will have to be added to the wall as a box. To add as a box, it must be an application. So you are going to have to learn how to create an application. In your case, a simple fbml box will not be enough.

  • Its not the become a fan functionality that i am trying to acheive, what i want is the ability for people who land on boxes to see the topic of the daily discussion on the wall…I speant some time working on it and have a solution i am going to try to implement tonight that simply uses an rss feed…it requires more day to day tasks on my part but it solves he problem while i am learning a more automated approach…thanks for the help!

  • Its not the become a fan functionality that i am trying to acheive, what i want is the ability for people who land on boxes to see the topic of the daily discussion on the wall…I speant some time working on it and have a solution i am going to try to implement tonight that simply uses an rss feed…it requires more day to day tasks on my part but it solves he problem while i am learning a more automated approach…thanks for the help!

  • Andy – As I said, I don’t think you can do this through a static FBML box, since the code needs to access the API in order to get a list of your friends, to populate the box. JC Penney is using an app for their widget box.

  • Andy – As I said, I don’t think you can do this through a static FBML box, since the code needs to access the API in order to get a list of your friends, to populate the box. JC Penney is using an app for their widget box.

  • This information will definitely change my life. I can’t wait to put it into use.

    Thank you for sharing. Also, your Facebook Sunkist page is an absolute gem!
    .-= Robyn´s last blog ..One more Ottawa anecdote =-.

  • This information will definitely change my life. I can’t wait to put it into use.

    Thank you for sharing. Also, your Facebook Sunkist page is an absolute gem!
    .-= Robyn´s last blog ..One more Ottawa anecdote =-.

  • I was pretty stoked to read this post – it was right in line with what I’ve been telling folks the last few weeks after finding out how to use the Static FBML app. Stoked and a little smug until I read the last line and realized that “any jackhole who knows basic HTML can handle themselves”. Oh well, I guess I’m a Jackhole with some cool custom content for my FB page.

    Just busting your balls a little Snipe – great write up and dead on in terms of how the FB really shines with some basic old school HTML. I think that many of the current current platforms are the same – who would have thought I’d need to sharpen up my low rez image vectoring skills to make a Twitter background? HTML for FB. LinkedIn is even more basic and limiting. Take care – ben

  • I was pretty stoked to read this post – it was right in line with what I’ve been telling folks the last few weeks after finding out how to use the Static FBML app. Stoked and a little smug until I read the last line and realized that “any jackhole who knows basic HTML can handle themselves”. Oh well, I guess I’m a Jackhole with some cool custom content for my FB page.

    Just busting your balls a little Snipe – great write up and dead on in terms of how the FB really shines with some basic old school HTML. I think that many of the current current platforms are the same – who would have thought I’d need to sharpen up my low rez image vectoring skills to make a Twitter background? HTML for FB. LinkedIn is even more basic and limiting. Take care – ben

  • Tom

    Hi,

    I am a newbie and non-programmer (like Anna on the 14th, who didn’t get answered). I’ve gotten to the point where i have an FBML Tab on my page, but that’s it. When I click on the tab I don’t get any place to type any code, just a blank white area that doesn’t accept any keystrokes (the space underneath does look for a second or two like something is going to happen, but nothing does). The only thing I can do is to click on the pencil to the right of FBML and be allowed to “delete” the FBML Tab, which I’ve accidentally done several times.

    Is this what Facebook developers bug#6377 is – and is it still unresolved?

    Thanks in advance

    – Tom

  • Tom

    Hi,

    I am a newbie and non-programmer (like Anna on the 14th, who didn’t get answered). I’ve gotten to the point where i have an FBML Tab on my page, but that’s it. When I click on the tab I don’t get any place to type any code, just a blank white area that doesn’t accept any keystrokes (the space underneath does look for a second or two like something is going to happen, but nothing does). The only thing I can do is to click on the pencil to the right of FBML and be allowed to “delete” the FBML Tab, which I’ve accidentally done several times.

    Is this what Facebook developers bug#6377 is – and is it still unresolved?

    Thanks in advance

    – Tom

  • @Tom – you go to EDIT PAGE and find the FBML box in the list of installed apps for your page. Then click on the pencil icon and go to EDIT. From there, you’ll have a box you can enter content into.

  • @Tom – you go to EDIT PAGE and find the FBML box in the list of installed apps for your page. Then click on the pencil icon and go to EDIT. From there, you’ll have a box you can enter content into.

  • Hiya,

    Like Anna, I don’t have much in the way of HTML experience, all I want to do at the moment is get users who click on my FB page to go to the Review page not the Wall. Also, can anyone tell me if people who do not have a FB account can view/comment on my group/fan page? Thanks.

    My page is

    http://www.facebook.com/pages/Stourbridge-United-Kingdom/MyiPodBroke/126671088776?v=app_6261817190&viewas=1601534468&ref=search#/pages/Stourbridge-United-Kingdom/MyiPodBroke/126671088776?v=wall&viewas=1601534468&ref=search

  • Hiya,

    Like Anna, I don’t have much in the way of HTML experience, all I want to do at the moment is get users who click on my FB page to go to the Review page not the Wall. Also, can anyone tell me if people who do not have a FB account can view/comment on my group/fan page? Thanks.

    My page is

    http://www.facebook.com/pages/Stourbridge-United-Kingdom/MyiPodBroke/126671088776?v=app_6261817190&viewas=1601534468&ref=search#/pages/Stourbridge-United-Kingdom/MyiPodBroke/126671088776?v=wall&viewas=1601534468&ref=search

  • @Yvonne – you do not need any FBML to do this. It’s an available option in your page settings.

    Go to EDIT PAGE > WALL SETTINGS – and click on the pencil icon to the right of the box, and go to EDIT. Pick the tab you wan to be the default for non-fans (“Default Landing Tab for Everyone Else”) from the dropdown list.

    This will only work for people who are not fans of the page – there is currently NO way to override the default (wall) tab from loading when a fan hits your page. The only option you have is to link directly do specific tabs if you want users to get there first.

    One way of doing this might be to create a redirect so that yoursite.com/fb automatically redirects to your FB page with the right tab loaded up, but you’d beed some basic scripting knowledge to do that.

  • @Yvonne – you do not need any FBML to do this. It’s an available option in your page settings.

    Go to EDIT PAGE > WALL SETTINGS – and click on the pencil icon to the right of the box, and go to EDIT. Pick the tab you wan to be the default for non-fans (“Default Landing Tab for Everyone Else”) from the dropdown list.

    This will only work for people who are not fans of the page – there is currently NO way to override the default (wall) tab from loading when a fan hits your page. The only option you have is to link directly do specific tabs if you want users to get there first.

    One way of doing this might be to create a redirect so that yoursite.com/fb automatically redirects to your FB page with the right tab loaded up, but you’d beed some basic scripting knowledge to do that.

  • You’re gonna think I’m totally stupid but I can’t see how to Edit Page > Wall Settings.

  • You’re gonna think I’m totally stupid but I can’t see how to Edit Page > Wall Settings.

  • Screenshots are fab and will really help BUT I don’t have anything like that on my page. I don’t see anything that lets me edit the page

  • Screenshots are fab and will really help BUT I don’t have anything like that on my page. I don’t see anything that lets me edit the page

  • Not sure what to tell you. You’re either looking at the wrong url (i.e. not your page’s main profile) or you’re not an administrator.

  • Not sure what to tell you. You’re either looking at the wrong url (i.e. not your page’s main profile) or you’re not an administrator.

  • How stupid am I??? :)))) My husband is the administrator – no wonder I couldn’t see it. Done it now but it doesn’t appear to work, but I couldn’t see anywhere to save the changes, so I’m hoping that once I’ve logged off and on again, it will work. Thanks soooo much for all your help.

  • How stupid am I??? :)))) My husband is the administrator – no wonder I couldn’t see it. Done it now but it doesn’t appear to work, but I couldn’t see anywhere to save the changes, so I’m hoping that once I’ve logged off and on again, it will work. Thanks soooo much for all your help.

  • Mark

    Can you tell me how to add a twitter box on a fan page like on this face book fan page? Thank you.

    http://www.facebook.com/admiralmikemullen

  • Mark

    Can you tell me how to add a twitter box on a fan page like on this face book fan page? Thank you.

    http://www.facebook.com/admiralmikemullen

  • Kali

    I have been using the fbml app on my fan page – super great and easy to use. I am wondering if there is any way to use this app or something of the sort on my personal profile page?
    Or how would you embed content onto your fb personal profile page?
    Any help would be greatly appreciated.

    Love your blog!

  • Kali

    I have been using the fbml app on my fan page – super great and easy to use. I am wondering if there is any way to use this app or something of the sort on my personal profile page?
    Or how would you embed content onto your fb personal profile page?
    Any help would be greatly appreciated.

    Love your blog!

  • Your bolded quote:
    “The general rule of thumb is – if you don’t actually need to use any scripted languages like PHP or ASP, and you don’t need to access the API to get the user’s information for any reason, you probably don’t actually need an application.”

    So I assume then that’s why I can’t get tags like to work? Because they pull user information via the API? is listed under fbml tags, so I’d think it should work for fbml taps. It’s not like I’m using javascript or php api calls…

  • Your bolded quote:
    “The general rule of thumb is – if you don’t actually need to use any scripted languages like PHP or ASP, and you don’t need to access the API to get the user’s information for any reason, you probably don’t actually need an application.”

    So I assume then that’s why I can’t get tags like to work? Because they pull user information via the API? is listed under fbml tags, so I’d think it should work for fbml taps. It’s not like I’m using javascript or php api calls…

  • @Walton – WordPress ate your code – can you post it again without brackets?

  • @Walton – WordPress ate your code – can you post it again without brackets?

  • The “fb:name” tag – will that not work? Because it pulls user info?

  • The “fb:name” tag – will that not work? Because it pulls user info?

  • I believe that is correct, but you can always try it and see. Incidentally, the fb:comments tag also does not work in Static FBML boxes. 🙁

  • I believe that is correct, but you can always try it and see. Incidentally, the fb:comments tag also does not work in Static FBML boxes. 🙁

  • Pingback: eleen.com » Add custom tabs to your Facebook Business Page()

  • adrian

    Hey Snipe,love the article. I have a question hopefully you might know how to answer. I created a fbml tab and want to use horizontal navigation (much like spry tabs), however cannot get it to work for the life of me. I know fbml doesn’t except external javascript files, but i can’t get the spry function to work with out it. Any solution you know of?
    thanks,
    chewie

  • adrian

    Hey Snipe,love the article. I have a question hopefully you might know how to answer. I created a fbml tab and want to use horizontal navigation (much like spry tabs), however cannot get it to work for the life of me. I know fbml doesn’t except external javascript files, but i can’t get the spry function to work with out it. Any solution you know of?
    thanks,
    chewie

  • Natasha

    Hi Snipe,
    I am trying to create a promotional code for those who become a fan of my page. (Much like what 1-800-flowers is doing – http://www.facebook.com/iTunes?v=wall&viewas=100000044673860&ref=search#/1800flowers?v=app_4949752878&viewas=100000044673860&ref=nf)
    However, I am having trouble creating this. I need to make a different code for every Fan. Any suggestions?

    Thank you in advance!
    -Natasha

  • Natasha

    Hi Snipe,
    I am trying to create a promotional code for those who become a fan of my page. (Much like what 1-800-flowers is doing – http://www.facebook.com/iTunes?v=wall&viewas=100000044673860&ref=search#/1800flowers?v=app_4949752878&viewas=100000044673860&ref=nf)
    However, I am having trouble creating this. I need to make a different code for every Fan. Any suggestions?

    Thank you in advance!
    -Natasha

  • Hi Natasha – you’d need to make that an application, not an FBML box, since you’d need to tie into the API and execute additional code.

  • Hi Natasha – you’d need to make that an application, not an FBML box, since you’d need to tie into the API and execute additional code.

  • Facebook User

    I need to run an external .js. is this possible on a static fbml page? if yes, how? thx.

  • I need to run an external .js. is this possible on a static fbml page? if yes, how? thx.

  • Hello there

    How do I get these banners http://www.facebook.com/pages/DENTS-Fine-Accessories-for-Men-and-Women/153712276351#/pages/DENTS-Fine-Accessories-for-Men-and-Women/153712276351?v=box_3&viewas=285700470 which feature in the boxes section on the wall page on the left hand side? i’ve seen other sites do this, yet I am having some difficulty.

    Thanks for any help 🙂

    Jimmy

  • Hello there

    How do I get these banners http://www.facebook.com/pages/DENTS-Fine-Accessories-for-Men-and-Women/153712276351#/pages/DENTS-Fine-Accessories-for-Men-and-Women/153712276351?v=box_3&viewas=285700470 which feature in the boxes section on the wall page on the left hand side? i’ve seen other sites do this, yet I am having some difficulty.

    Thanks for any help 🙂

    Jimmy

  • scout

    Thanks for pointing me to static fbml, its doing just the job i need.

    Only problem I’m having is, I have a two column layout, around 600px wide, with some images floated etc.

    This is all showing up fine, but the surrounding app box is still showing at about 200px wide by 100px. Is there anyway of removing this surrounding box. Its the one with the border around it, and a small light blue header. I really want to get rid of this so that the box looks like a stand-alone element, as in the sunkist example above.

  • scout

    Thanks for pointing me to static fbml, its doing just the job i need.

    Only problem I’m having is, I have a two column layout, around 600px wide, with some images floated etc.

    This is all showing up fine, but the surrounding app box is still showing at about 200px wide by 100px. Is there anyway of removing this surrounding box. Its the one with the border around it, and a small light blue header. I really want to get rid of this so that the box looks like a stand-alone element, as in the sunkist example above.

  • @Jimmy – I’m not sure what your question is, exactly.

    @scout – can you show me what you mean?

  • @Jimmy – I’m not sure what your question is, exactly.

    @scout – can you show me what you mean?

  • scout

    @snipe Actually, the problem seems to be solved thanks. The Application box (the surrounding border and light blue header) is showing when I’m logged in and editing the page, but it doesn’t appear to anyone else who actually views the page, so it’s really not a problem at all.

    Sorry, it’s not a great photo, as I don’t want to show too much of the clients stuff at the moment in case they get funny, but here’s what I was talking about anyway, if you can make it out

    http://www.flickr.com/photos/11687206@N07/3886010955/

  • scout

    @snipe Actually, the problem seems to be solved thanks. The Application box (the surrounding border and light blue header) is showing when I’m logged in and editing the page, but it doesn’t appear to anyone else who actually views the page, so it’s really not a problem at all.

    Sorry, it’s not a great photo, as I don’t want to show too much of the clients stuff at the moment in case they get funny, but here’s what I was talking about anyway, if you can make it out

    http://www.flickr.com/photos/11687206@N07/3886010955/

  • jamie

    http://www.facebook.com/target#/target?v=app_82676004266

    is this a static fbml page? looks like it..but there is a comment area.

    I am building a fanpage with Static FBML and I need to embed 2 facebook comment boxes for users to leave comments. Is this possible? The canvas app is looking to possibly be a bit out of my current knowledge range.

    Any words on this would be greatly appreciated.

  • jamie

    http://www.facebook.com/target#/target?v=app_82676004266

    is this a static fbml page? looks like it..but there is a comment area.

    I am building a fanpage with Static FBML and I need to embed 2 facebook comment boxes for users to leave comments. Is this possible? The canvas app is looking to possibly be a bit out of my current knowledge range.

    Any words on this would be greatly appreciated.

  • inquiring

    Hi there,

    I’ve been running to a problem with the Static FBML app no longer (as of 9/2, i think) being able to move boxes to the Wall. Judging by comments on the app discussion tab, it looks like i’m not alone. Do you have any insight/suggestions on how we can get this to work? It was working for us on Tuesday, and then Wednesday, poof.

    TIA!

  • inquiring

    Hi there,

    I’ve been running to a problem with the Static FBML app no longer (as of 9/2, i think) being able to move boxes to the Wall. Judging by comments on the app discussion tab, it looks like i’m not alone. Do you have any insight/suggestions on how we can get this to work? It was working for us on Tuesday, and then Wednesday, poof.

    TIA!

  • I tried to add FBML to my fanpage. It gives no options to edit. How do I delete this from my fanpage? It has no options to do anything and I don’t see it in my applications. It sits in my dropdown list, but gives no option to delete it. I would like to delete it then readd it to my fanpage, not my main profile page. Any advice?

    Heather

  • I tried to add FBML to my fanpage. It gives no options to edit. How do I delete this from my fanpage? It has no options to do anything and I don’t see it in my applications. It sits in my dropdown list, but gives no option to delete it. I would like to delete it then readd it to my fanpage, not my main profile page. Any advice?

    Heather

  • Hi,

    Yes i agree not every fan page needs application you can still customize your fan page by using default fb tools.

    Thanks

  • Hi,

    Yes i agree not every fan page needs application you can still customize your fan page by using default fb tools.

    Thanks

  • adrian

    Hey Snipe, I posted an earlier comment about creating tabs in fbml box. I saw another example of this :
    http://www.facebook.com/iTunes
    Their podcast and featured section have functionality I am looking for. Any idea how they did this? Any help would be great, thanks

    chewie

  • adrian

    Hey Snipe, I posted an earlier comment about creating tabs in fbml box. I saw another example of this :
    http://www.facebook.com/iTunes
    Their podcast and featured section have functionality I am looking for. Any idea how they did this? Any help would be great, thanks

    chewie

  • Hi chewie – you can create tabs in an FBML box just by designing the HTML you’re using in the FBML box to look like tabs. The iTunes page you’re referencing uses an application for their (default) Featured tab, so they’re using an actual app there:
    http://www.facebook.com/apps/application.php?id=74561238314

    Even so, you just need to design the HTML you put in your FBML box to use tabs in the design and code them that way if you’re using just FBML and not a standalone app.

  • Hi chewie – you can create tabs in an FBML box just by designing the HTML you’re using in the FBML box to look like tabs. The iTunes page you’re referencing uses an application for their (default) Featured tab, so they’re using an actual app there:
    http://www.facebook.com/apps/application.php?id=74561238314

    Even so, you just need to design the HTML you put in your FBML box to use tabs in the design and code them that way if you’re using just FBML and not a standalone app.

  • adrian

    Tabs: Hey Snipe, thanks for the quick response. The problem I am having, is that when the user clicks on the tab it takes them to another page. How do I just reveal the contents rather than goto url? Here is the code I got going so far.
    /////////////////

    mybknd {
    margin : 10px;
    font: Verdana, Helvetica, Arial;
    padding: 0px;
    background: #fff;
    }

    #menu {
    border-bottom : 1px solid #ccc;
    margin : 0;
    padding-bottom : 19px;
    padding-left : 10px;
    }

    #menu ul, #menu li {
    display : inline;
    list-style-type : none;
    margin : 0;
    padding : 0;
    }

    #menu a:link, #menu a:visited {
    background : #E8EBF0;
    border : 1px solid #ccc;
    color : #666;
    float : left;
    font-size : small;
    font-weight : normal;
    line-height : 14px;
    margin-right : 8px;
    padding : 2px 10px 2px 10px;
    text-decoration : none;
    }

    #menu a:link.active, #menu a:visited.active {
    background : #fff;
    border-bottom : 1px solid #fff;
    color : #000;
    }

    #menu a:hover {
    color : #f00;
    }

    mybknd.section-1 #menu li#nav-1 a,
    mybknd.section-2 #menu li#nav-2 a,
    mybknd.section-3 #menu li#nav-3 a,
    mybknd.section-4 #menu li#nav-4 a {
    background : #fff;
    border-bottom : 1px solid #fff;
    color : #000;
    }

    #menu #subnav-1,
    #menu #subnav-2,
    #menu #subnav-3,
    #menu #subnav-4 {
    display : none;
    width: 90%;
    }

    mybknd.section-1 #menu ul#subnav-1,
    mybknd.section-2 #menu ul#subnav-2,
    mybknd.section-3 #menu ul#subnav-3,
    mybknd.section-4 #menu ul#subnav-4 {
    display : inline;
    left : 10px;
    position : absolute;
    top : 95px;
    }

    mybknd.section-1 #menu ul#subnav-1 a,
    mybknd.section-2 #menu ul#subnav-2 a,
    mybknd.section-3 #menu ul#subnav-3 a,
    mybknd.section-4 #menu ul#subnav-4 a {
    background : #fff;
    border : none;
    border-left : 1px solid #ccc;
    color : #999;
    font-size : smaller;
    font-weight : bold;
    line-height : 10px;
    margin-right : 4px;
    padding : 2px 10px 2px 10px;
    text-decoration : none;
    }

    #menu ul a:hover {
    color : #f00 !important;
    }

    #contents {
    background : #fff;
    border : 1px solid #ccc;
    border-top : none;
    clear : both;
    margin : 0px;
    padding : 15px;
    }

    Home
    Reviews
    Trailers
    Chums

     

    ////////////////
    Every where i look, this seems to involve java script, which fb doesn’t like.
    thanks again,

    chewie

  • adrian

    Tabs: Hey Snipe, thanks for the quick response. The problem I am having, is that when the user clicks on the tab it takes them to another page. How do I just reveal the contents rather than goto url? Here is the code I got going so far.
    /////////////////

    mybknd {
    margin : 10px;
    font: Verdana, Helvetica, Arial;
    padding: 0px;
    background: #fff;
    }

    #menu {
    border-bottom : 1px solid #ccc;
    margin : 0;
    padding-bottom : 19px;
    padding-left : 10px;
    }

    #menu ul, #menu li {
    display : inline;
    list-style-type : none;
    margin : 0;
    padding : 0;
    }

    #menu a:link, #menu a:visited {
    background : #E8EBF0;
    border : 1px solid #ccc;
    color : #666;
    float : left;
    font-size : small;
    font-weight : normal;
    line-height : 14px;
    margin-right : 8px;
    padding : 2px 10px 2px 10px;
    text-decoration : none;
    }

    #menu a:link.active, #menu a:visited.active {
    background : #fff;
    border-bottom : 1px solid #fff;
    color : #000;
    }

    #menu a:hover {
    color : #f00;
    }

    mybknd.section-1 #menu li#nav-1 a,
    mybknd.section-2 #menu li#nav-2 a,
    mybknd.section-3 #menu li#nav-3 a,
    mybknd.section-4 #menu li#nav-4 a {
    background : #fff;
    border-bottom : 1px solid #fff;
    color : #000;
    }

    #menu #subnav-1,
    #menu #subnav-2,
    #menu #subnav-3,
    #menu #subnav-4 {
    display : none;
    width: 90%;
    }

    mybknd.section-1 #menu ul#subnav-1,
    mybknd.section-2 #menu ul#subnav-2,
    mybknd.section-3 #menu ul#subnav-3,
    mybknd.section-4 #menu ul#subnav-4 {
    display : inline;
    left : 10px;
    position : absolute;
    top : 95px;
    }

    mybknd.section-1 #menu ul#subnav-1 a,
    mybknd.section-2 #menu ul#subnav-2 a,
    mybknd.section-3 #menu ul#subnav-3 a,
    mybknd.section-4 #menu ul#subnav-4 a {
    background : #fff;
    border : none;
    border-left : 1px solid #ccc;
    color : #999;
    font-size : smaller;
    font-weight : bold;
    line-height : 10px;
    margin-right : 4px;
    padding : 2px 10px 2px 10px;
    text-decoration : none;
    }

    #menu ul a:hover {
    color : #f00 !important;
    }

    #contents {
    background : #fff;
    border : 1px solid #ccc;
    border-top : none;
    clear : both;
    margin : 0px;
    padding : 15px;
    }

    Home
    Reviews

    Trailers

    Chums

     

    ////////////////
    Every where i look, this seems to involve java script, which fb doesn’t like.
    thanks again,

    chewie

  • veronica

    i want to hug you! excellent info 🙂

  • veronica

    i want to hug you! excellent info 🙂

  • ellan

    does anyone know how to create a link “become a fan of…” on the videos you have on your fan site? so that while the video is playing there is a link in the top corner named “become a fan”. so that when people click on the link, they becomes fans of your fan page. how do you do that? can anyone help me? and is it free to use static fbml?

  • ellan

    does anyone know how to create a link “become a fan of…” on the videos you have on your fan site? so that while the video is playing there is a link in the top corner named “become a fan”. so that when people click on the link, they becomes fans of your fan page. how do you do that? can anyone help me? and is it free to use static fbml?

  • puneet

    snipe hi,

    i am trying to create application for a fan page. basically what i want to do is create a tab on my fan page and display a web form which includes uploading a file and save data on the backend. how can i go about doing this?

    thanks
    puneet

  • puneet

    snipe hi,

    i am trying to create application for a fan page. basically what i want to do is create a tab on my fan page and display a web form which includes uploading a file and save data on the backend. how can i go about doing this?

    thanks
    puneet

  • Thanks for this. I’ve added a landing page via FBML. The only problem I see is that when a user clicks to become a fan, they’re still staring at the landing page. Is there a way to have them go to the Wall once they’ve become a fan?

    Thanks,
    Jeff

  • Sorry, Jeff again…here’s the landing page I mention in the previous post: http://www.facebook.com/greenopolis

    Thanks,
    Jeff

  • Thanks for this. I’ve added a landing page via FBML. The only problem I see is that when a user clicks to become a fan, they’re still staring at the landing page. Is there a way to have them go to the Wall once they’ve become a fan?

    Thanks,
    Jeff

  • Sorry, Jeff again…here’s the landing page I mention in the previous post: http://www.facebook.com/greenopolis

    Thanks,
    Jeff

  • @Jeff – The “become a fan” functionality is performed in Ajax, I think, so I don’t think there’s any way to change that. Better idea is to plan for the fact that fans and non-fans will see it, and message accordingly. You can change the default tab that a non-fan lands on in your app settings, but I don’t believe you can control anything beyond that.

  • @Jeff – The “become a fan” functionality is performed in Ajax, I think, so I don’t think there’s any way to change that. Better idea is to plan for the fact that fans and non-fans will see it, and message accordingly. You can change the default tab that a non-fan lands on in your app settings, but I don’t believe you can control anything beyond that.

  • Great post! loved it
    .-= facebook application development´s last blog ..[Google opensocial development | Opensocial Applicaitons | Facebook Guru London] =-.

  • Great post! loved it
    .-= facebook application development´s last blog ..[Google opensocial development | Opensocial Applicaitons | Facebook Guru London] =-.

  • Ali

    I have the same problem with Jamie.But nobody answered his writing.Please reply us.I need to create a comment box to my fan page.
    thanks
    Jamie:
    I am building a fanpage with Static FBML and I need to embed 2 facebook comment boxes for users to leave comments. Is this possible? The canvas app is looking to possibly be a bit out of my current knowledge range.

    Any words on this would be greatly appreciated.

  • Ali

    I have the same problem with Jamie.But nobody answered his writing.Please reply us.I need to create a comment box to my fan page.
    thanks
    Jamie:
    I am building a fanpage with Static FBML and I need to embed 2 facebook comment boxes for users to leave comments. Is this possible? The canvas app is looking to possibly be a bit out of my current knowledge range.

    Any words on this would be greatly appreciated.

  • @Ali – the answer is the same as the one for chewie, adrian and Walter in the comments above. Target and iTunes are both using applications, not FBML boxes.

    http://www.facebook.com/apps/application.php?id=82676004266

    You cannot add comments to a Static FBML box – you have to make it an application.

  • @Ali – the answer is the same as the one for chewie, adrian and Walter in the comments above. Target and iTunes are both using applications, not FBML boxes.

    http://www.facebook.com/apps/application.php?id=82676004266

    You cannot add comments to a Static FBML box – you have to make it an application.

  • Tony

    Hi there – great site – thanks for the tips! I’m using the FBML app fine – however, one thing I can’t work out is how to change the name of the box so it doesn’t say FBML! In your example you’ve got yours called ‘A Team’.

    Any help much appreciated!

    cheers

    Tony

  • Tony

    Hi there – great site – thanks for the tips! I’m using the FBML app fine – however, one thing I can’t work out is how to change the name of the box so it doesn’t say FBML! In your example you’ve got yours called ‘A Team’.

    Any help much appreciated!

    cheers

    Tony

  • Hi Tony – the title of your box determines the title that shows up on the tab – this screenshot may help:
    http://www.flickr.com/photos/snipeyhead/3945879399/

  • Hi Tony – the title of your box determines the title that shows up on the tab – this screenshot may help:
    http://www.flickr.com/photos/snipeyhead/3945879399/

  • Hey thank you for the post very good info. I want to create a tab that shows my newly released clothes and also provide a link so my fans can purchase any items they are interested in. Here is an example of what I want to somewhat match. Can you point me in the right direction on figuring this out. The best way I see it working out is that I set up a tab and on that tab it pulls info (products) from my site and displays them on that tabs page. Can this be done?

    Threadless page: http://www.facebook.com/search/?q=threadless&init=quick#/threadless?v=app_116832620224&ref=search

    My fan page: http://facebook.com/dankaclothing

  • Hey thank you for the post very good info. I want to create a tab that shows my newly released clothes and also provide a link so my fans can purchase any items they are interested in. Here is an example of what I want to somewhat match. Can you point me in the right direction on figuring this out. The best way I see it working out is that I set up a tab and on that tab it pulls info (products) from my site and displays them on that tabs page. Can this be done?

    Threadless page: http://www.facebook.com/search/?q=threadless&init=quick#/threadless?v=app_116832620224&ref=search

    My fan page: http://facebook.com/dankaclothing

  • Hi Brian – yes, its possible, but not with a static FBML box. Threadless is using an application for their tab, and you would have to do the same if you wanted that kind of functionality:
    http://www.facebook.com/apps/application.php?id=116832620224

  • Hi Brian – yes, its possible, but not with a static FBML box. Threadless is using an application for their tab, and you would have to do the same if you wanted that kind of functionality:
    http://www.facebook.com/apps/application.php?id=116832620224

  • vinnie

    I want to do something which I think is very simple but I can not figure it out. I am not as skilled as the others on here. I added the static FBML application to create a custom tab on my charities fan page. I now want to simply link (show) the source web page in this box. Seems like it would be pretty simple, but I have been searching the net for answers. Great info on your site!
    Thank you for your help!

  • vinnie

    I want to do something which I think is very simple but I can not figure it out. I am not as skilled as the others on here. I added the static FBML application to create a custom tab on my charities fan page. I now want to simply link (show) the source web page in this box. Seems like it would be pretty simple, but I have been searching the net for answers. Great info on your site!
    Thank you for your help!

  • Great post. I just recently had a client ask me to create a custom Fan Page on Facebook and I never have done it before but said I would figure it out. This post really helped and the final product (http://www.facebook.com/cherylburkedancestudios) gave me a new idea of offering this service in my company at a fraction of the price all others are doing it. I think these new “Facebook Websites” could be a great way for business owners to stand out on Facebook. It is also a good way to look different if you are using it for personal reason.

    Thank you author

    Jarrett Gucci
    jgucci@dynastywebsolutions.com

  • Great post. I just recently had a client ask me to create a custom Fan Page on Facebook and I never have done it before but said I would figure it out. This post really helped and the final product (http://www.facebook.com/cherylburkedancestudios) gave me a new idea of offering this service in my company at a fraction of the price all others are doing it. I think these new “Facebook Websites” could be a great way for business owners to stand out on Facebook. It is also a good way to look different if you are using it for personal reason.

    Thank you author

    Jarrett Gucci
    jgucci@dynastywebsolutions.com

  • Ward

    Hi Snipey,

    I have a tab enabled app that is set to iframe mode and embedded in a fan page and it keeps throwing a “Cannot allow external script” error and eating my links. I am trying to include some jquery goodness in this app.

    Could you hazard a guess as to why I might be getting this type of error? The app is working fine otherwise. Well, mostly, the other issue i have is if I try and access it from apps.facebook.com/… then it shows a “page not found” but it works when it is embedded in the fan page.

    Thanks infinitely,
    W

  • Ward

    Hi Snipey,

    I have a tab enabled app that is set to iframe mode and embedded in a fan page and it keeps throwing a “Cannot allow external script” error and eating my links. I am trying to include some jquery goodness in this app.

    Could you hazard a guess as to why I might be getting this type of error? The app is working fine otherwise. Well, mostly, the other issue i have is if I try and access it from apps.facebook.com/… then it shows a “page not found” but it works when it is embedded in the fan page.

    Thanks infinitely,
    W

  • Any idea how to get videos to work in the Static FBML box? It doesn’t seem to work.
    thanks.

  • Any idea how to get videos to work in the Static FBML box? It doesn’t seem to work.
    thanks.

  • Hello all

    I think I have the same question as Vinie postet on the Sep 25 (hope its from this year :o) I have a Homepage (www.lyocell.ch) that I would like to show directly in my box. But I have no idea how to do this….I am even not sure if this is possible. Is it? What I tried is:

    I thought that could work because like that I also embed my lightroom galleries into my iWeb homepage.

    Would really appreciate if you could give me an answer.

    Positive vibrations
    Lyocel

  • Hello all

    I think I have the same question as Vinie postet on the Sep 25 (hope its from this year :o) I have a Homepage (www.lyocell.ch) that I would like to show directly in my box. But I have no idea how to do this….I am even not sure if this is possible. Is it? What I tried is:

    I thought that could work because like that I also embed my lightroom galleries into my iWeb homepage.

    Would really appreciate if you could give me an answer.

    Positive vibrations
    Lyocel

  • I am struggling with the static FBML app, i put in my HTML save changes but then when you go back to the page and “Get involved” nothing but a blank page, here is the htmal i am trying to upload:

    “Get Involved”

     
    Donate to Play Rugby
    USA:

    Your donation will help us continue to drive forward
    our philosophy of ‘Developing Youth through Rugby’ by spreading our mission
    throughout American schools and youth organizations. Donations will go directly
    towards programs, event scholarships, curriculum development, staff training and
    operating costs, to ensure that every child can afford to play rugby.

    VOLUNTEER WITH PLAY RUGBY
    USA:

    We encourage parents, students and other CBOs to get involved with
    our programs and offer training courses for those interested in learning how to
    coach and referee flag rugby. Additionally, we can help you get a program going
    at your neighborhood school by providing all the necessary information, support
    and training that you may require. To get involved simply follow this link
    and complete the form.
     

    Thanks for the help

  • I am struggling with the static FBML app, i put in my HTML save changes but then when you go back to the page and “Get involved” nothing but a blank page, here is the htmal i am trying to upload:

    “Get Involved”

     
    Donate to Play Rugby
    USA:

    Your donation will help us continue to drive forward
    our philosophy of ‘Developing Youth through Rugby’ by spreading our mission
    throughout American schools and youth organizations. Donations will go directly
    towards programs, event scholarships, curriculum development, staff training and
    operating costs, to ensure that every child can afford to play rugby.

    VOLUNTEER WITH PLAY RUGBY
    USA:

    We encourage parents, students and other CBOs to get involved with
    our programs and offer training courses for those interested in learning how to
    coach and referee flag rugby. Additionally, we can help you get a program going
    at your neighborhood school by providing all the necessary information, support
    and training that you may require. To get involved simply follow this link
    and complete the form.
     

    Thanks for the help

  • Brian

    How do you add pictures and paragraphs to “boxes” on the fan page in facebook? I have tried “enter”, “tab”, “shift+enter” and “space bar” but when saved and reviewed, it’s still in a single paragraph. Also wanted to add pictures next to the text.

  • Brian

    How do you add pictures and paragraphs to “boxes” on the fan page in facebook? I have tried “enter”, “tab”, “shift+enter” and “space bar” but when saved and reviewed, it’s still in a single paragraph. Also wanted to add pictures next to the text.

  • Brian – contents of an FBML box are formatted using HTML. So you have to add HTML where you want line breaks, etc.

  • Brian – contents of an FBML box are formatted using HTML. So you have to add HTML where you want line breaks, etc.

  • i just like to test this 🙂

  • Marc

    Hey Snipe, Great post! I am interested in this “Custom” Twitter app that you mention in passing… I take it that this is something that you have developed? Do you license it out at all or do you know where I can “obtain” something similar?

    Keep up the good work!!

  • themediarevolution

    Hay Snipe, What's the chances of you sharing that there custom app?! (God I'm a cheeky F*cker!) 😉 I too am after displaying our twitter feed using a BG image etc.. and I just can't work ou how to do it… maybe you'd license it out?!?

    😀

  • If it were something easily shared, I'd have done it already. Each instance is pretty unique. I'd maybe license it out – drop me a line 😉

  • If it were something easily shared, I'd have done it already. Each instance is pretty unique. I'd maybe license it out – drop me a line 😉

  • Nice info ! thanks .

  • Pingback: Facebook FBML « Our Blog()

  • Ty

    Thanks for this post. I’ve tried adding a YouTube Video to FBML. However, the image doesn’t show up. I’m not certain of how to add the correct url for the image. Here is my code:

    I’m not certain of what to do next.

    • Looks like your video url is fine, but the image url is wrong. When I go to http://img.youtube.com/vi/J4v5IXbEauM&hl/2.jpg it shows up blank.

      • Ty

        Exactly. This may be extremely simple, but I’m new to this. So how do I get the correct URL for the YouTube video?

        • I think you’ve got the right url for the video, at least according to the FBML documentation. Try using the url of an image you know exists as the image parameter.

          • Ty

            Yes. I agree. I see that the url is right for the video. However, my concern is does YouTube not automatically provide a url for the image of the video? Do I have to add this (imgsrc=’http://img.youtube.com/vi/J4v5IXbEauM&hl/2.jpg’ width=’340′ height=’270′ />) in order for the video image to show up. I was under the impression that once you just add the HTML, everything (the video and the image of it would appear. Thanks so much for your help. This is a little different than what I’m used to doing.

          • Its actually the &hl that’s biffing your code, I think.
            http://img.youtube.com/vi/J4v5IXbEauM/2.jpg is the address of the auto-thumbnail, not http://img.youtube.com/vi/J4v5IXbEauM&hl/2.jpg

            Likewise, the actual url of your video is:
            http://www.youtube.com/v/J4v5IXbEauM

            These urls should never have & or ? symbols in them. If they’re in there, strip them out.

            Give it a shot using those parameters instead.

          • Ty

            Thanks for catching that! I tried this and unfortunately it still doesn’t work:

            Do you think it’s a possibility that there is something wrong with Static FBML? Is there another great application that you suggest I use instead of this one? We want to have Videos of the week and be able to keep them up and keep adding to them. Do you think this is the best application for what we are looking to accomplish? Thanks again!

          • Actually, it works just fine – click on the Micro-Site tab:

            http://www.facebook.com/pages/SnipeNet/116633947708?v=app_7146470109

            That does the trick. Only thing I can suggest is that you:

            1) Always use double-quotes for all parameters – you’ve got mixed single and double quotes in your example
            2) Make sure you change the curly-quotes displayed by these blog comments with “normal” straight quotes.
            3) Keep it all on one line – this shouldn’t matter, but my version worked fine on one line

          • Ty

            Thanks so much! It is working now. I really appreciate your help. God Bless You!!!!
            As for the application, for what we are trying to do, do you think this is the best layout for Posting Videos of the Week. We would like to keep videos from Previous weeks on the page as well. Thanks again!!!

  • Great article – I’ve been trying to figure out how to get something like this on my fan page. If you ever want to do some pro-bono work and help out the troops, let me know over at http://facebook.com/opwritehome – I’m a dummy when it comes to a lot of this stuff, but I’m a designer – I just need someone to help me get it posted!

    • I’m kind of up to my ears in pro-bono work right now, and don’t really have the time. (I know everyone says that, but in my case, it’s actually true.) If you want to send me a mockup via email, I’ll take a look at what you had in mind and see if I could swing it.

  • Pingback: How To Quickly Customize Your Facebook Page To Attract More Fans()

  • Kim

    How can i add a background image or color to a box using static FBML?

    • You would just create a container div, and then use CSS to set a background image for the div

  • Francesca

    Hi, I am very very very un-educated on everything about programming (even html is obscure to me).
    Although I’kind of intuitive: I’ve uploaded static FBML on a page I’m playing around with and cutting and copying from here and there I could add a “Tell your friends interactive tab” and some very basics boxes.
    I read the page u’ve done it’s in html, it’s amazing! where did you started from??? From a word table then you translated the word table in html? For the video:
    1-what’s the tag you used?
    2-what’s the url? How do I find it?
    3-can I do a similar thing if I have video uploaded on a web page?

    Do you think there’s any chance for a total unlettered to do something similar?
    Any chance you can send me the language code you used for the page as a template I can study and play around with????
    thank you.

  • May be you are right but the thing is that application makes your page attractive. Which is make your brand promoted.

    • If you actually bothered to read the post instead of just the title (so you could take the opportunity to spam by blog with a comment linking back to your own FB app company’s website) you would realize that your comment doesn’t make any sense.

  • can you please tell me how to set-up the fbml page as the default welcome page?

    • Thank you for your e-mail. I will be out of the office from Monday, November 30 until Friday, December 4 with limited access to e-mail and voicemail.

      I apologize for any inconvenience and will get back to you as soon as possible once I return.

      – Alison

  • Awesome brother! thanks for your post! look forward to following you on Twitter!

  • Lee

    The Info was very help! but I have a background image and everytime I embed a video via:

    It messes the background image up. Is there anyway to fix this? or should I just use images and link to the youtube videos?

    Thanks so much

  • Jon

    Sorry if this has already been covered here but the post is getting very long!!!!
    I have added one FBML page to a fan site and was wondering if you are able to add a second FBML page or if 1 is the limit. Are there any other (low cost ways) to add extra pages to a fan page.

    Cheers

  • Jon

    Sorry if this has already been covered here but the post is getting very long!!!!
    I have added one FBML page to a fan site and was wondering if you are able to add a second FBML page or if 1 is the limit. Are there any other (low cost ways) to add extra pages to a fan page.

    Cheers

    • Hi Jon – sorry for the delay. You can add multiple Static FBML tabs to your fanpage without a problem.

  • Pingback: Facebook fanpage need more kick? Check out FBML | Fuel Your Apps()

  • Brigitte

    I have add this to my fan page but it does not give me the option to add it as a box on my profile page. It only places it as a box within the box tab at the top. Do you know how I can get this to display as a box on the left side of my profile?

    • You have to add it to the boxes tab via your settings, and then click on the pencil icon in the boxes tab box for it and select ‘move to profile’

  • I have restricted access to my content to only fans.
    This work well in all browsers except IE. Any solutions.

    http://www.facebook.com/webwhispers?v=app_10442206389

    • What version of IE? This sounds more like a Facebook issue than anything else. If it’s IE6, Facebook has already stated tat they do not officially support IE6, so that may be why.

      • Anonymous

        Thanks Snipe….My browser ver is 6. Does it work ok in ur IE browser?

  • Derek

    Does anyone know how to get a box or tab to be the main page when facebook opens your profile…. for example: http://www.facebook.com/pages/Anamosa-IA/National-Motorcycle-Museum/228733646288?ref=search&sid=1490464940.903759956..1
    as they successfully made it happen!

    • This is a setting in your page settings area. You should see something like “default tab”, and a dropdown list that lets you pick which tab should be the default. Unfortunately, this only works if the visiting user is NOT a fan, if I recall correctly. There is no other way to do this though, so that’s your only option.

  • Sylvie Paquette

    Hi there! I’d just like to tell you I think you’re fantastic for all the help you’re giving. I have been teaching myself to use static fbml from the very beginning – using online html tutorials to get a start on a landing page for the facebook fan page I recently made for my mom’s business. It’s really basic, and my code works when I open it in my browser (firefox), but when I paste it into the fbml box, it comes up blank. I have tried removing and such as you suggested, to no avail. If you have a chance I’d love your feedback… Thanks and Happy New Year to you! Here’s the code if this helps you figure out what I’m doing wrong.

    Welcome to HypnoBirthing Canada!

    Thank you for visiting our fan page. We hope this page becomes your one-stop resource for everything pertaining to birth – the way nature intended!
    Be sure to become a fan by clicking right up at the top of the page!
    “To those who say it is just not possible to birth naturally and without pain, I say “But what if we’re right? Wouldn’t it be wonderful?” “

    — Lorne R. Campbell, M.D.

    For more information, visit the home page of HypnoBirthing Canada anytime you’d like. You can even visit us in French at HypnoNaissance.

    • Hi Sylvie – can you point me to the fan page so I can take a look? (Also, you have two BODY tags in your sample code – did you remove both or just the one when you took out those parts)

  • Anonymous

    Hi Sylvie…it seems that you have used 2 body tags. Also for static FBML….there is not need for the Head and Body tags. Just remove it and it should work.

  • I just read that FB will be changing tab coding in a few days. I’ll check back in then to see how to do this.

  • Good article, people sometimes need to quit trying to re invent the wheel

  • Good article, people sometimes need to quit trying to re invent the wheel

  • Anonymous

    Hi,

    I know this was asked a while back but never saw an answer. I am trying to make a tab where users can invite fans just like this one http://www.facebook.com/SportsAuthority?v=app_17037175766&ref=search.

    Could you walk me through what code I should use to recreate the multi friend selector form?

    Thanks,
    Ryan

  • Anonymous

    Hi,

    I know this was asked a while back but never saw an answer. I am trying to make a tab where users can invite fans just like this one http://www.facebook.com/SportsAuthority?v=app_17037175766&ref=search.

    Could you walk me through what code I should use to recreate the multi friend selector form?

    Thanks,
    Ryan

  • Anonymous

    hey snipe,

    do you know if I can target a fan photo album with the API? I can “see” the regular albums with the API (non-fan photos) but is it possible to target the fan photo album?

  • Anonymous

    hey snipe,

    do you know if I can target a fan photo album with the API? I can “see” the regular albums with the API (non-fan photos) but is it possible to target the fan photo album?

    • What do you mean by “target” exactly? Ability to upload an image to that album? And when you say fan photo album, do you mean a fan’s photo album, or the fan page’s photo album?

      • Anonymous

        is this know to be not possible?

      • Anonymous

        is this know to be not possible?

      • Anonymous

        I mean I want to display the images using fbml and flash. I can do this with the fan page’s regular albums but not a fan page’s “fan photo” album.

    • What do you mean by “target” exactly? Ability to upload an image to that album? And when you say fan photo album, do you mean a fan’s photo album, or the fan page’s photo album?

  • Omar

    i need help.. when i use HTML in static FBML i just get a blank white screen when i click on the new tab i have assigned to it? the html works fine in explorer.. could u please help..

    • Did you remove any HEAD/BODY tags?

    • Did you remove any HEAD/BODY tags?

      • Omar

        thank you snipe.. i got it going..

  • Omar

    i need help.. when i use HTML in static FBML i just get a blank white screen when i click on the new tab i have assigned to it? the html works fine in explorer.. could u please help..

  • Omar

    help again please, i cannot mange to get a background picture or colour, i am using HTML coding but its just white.. please help..

  • Great info, i have been working on my fan page.

    First impressions do last so it’s important to offer somthing unique,

    Paul.

  • Thanks a million. I am using it for a blog of mine in Arabic.
    I guess I can embed a Networkedblogs badge to the entrance.
    Thanks a million

    Ahmed

  • projectx

    Hi, great site , helped me out a lot.

    Need some help though . can anyone tell me how i can create a link or thumbnail picture which opens up in facebook pop-up box, so display picture and more informations.

    thanks

  • Pingback: Static FBML: Not every face book fan page needs an application! « Facebook applications for developers()

  • matthew

    Where do you place the link tags to call an external stylesheet?

    • I don’t thin you can – you have to embed inline. FB’s proxy sees any attempt at loading an external script file as potentially malicious.

  • Jorge

    Thank you! Your article is great. This is what I was looking for.

  • This is, by far, the best I have found on the subject. Thank you for sharing this information.

    A huge kudos to you and your patience. 😉

  • plzz i m not understanding can any1 tell me how to make a new tab at fan page i need a help wit other friends plzz help me this is my link add me and and send me msg if u want to help me plzzz i need help http://www.facebook.com/profile.php?ref=profile&id=100000229364953

  • Anonymous

    sample create tab ? sample fb:redirect

  • Hey Snipe,

    My company would really like to take advantage of FBML, but I can’t for the life of me figure out how to get started on it. I’ve added it into the page, then added the application, but when I try to edit it; I only have the “Delete Tab” option.

    http://i359.photobucket.com/albums/oo37/mochuu/FBML.jpg

    Any insight on this would be greatly appreciated, thanks!

    • Go to your page wall, click on Edit Page. In the Edit screen, find the
      Static FBML app in the list, and click on ‘edit’ link below it.

  • Sorry, just found the answer in an earlier comment from you, thank you!!

    • Glad you got it sorted 🙂

  • Anonymous

    thanks so much for sharing all this info with us! I am pretty much computer illiterate and just getting into this because I started a Business/Fan Page on FB. I was completely upset with the standard set up of the page and started reading Help discussions on FB trying to learn how to achieve creating custom tabs and how to use Static FBML. Wow this has been an eye opener to say the least! I found a tutorial on eleen.com on how to create custom tabs, yay it worked, I jumped up and down! From her page I found Customizing Pages by Hyper Arts and thus found you 🙂 I loved the way Hyper Arts had the sub tabs on their page when you clicked on a main tab and you showed me how to accomplish this, doesn’t look near as good as theirs but its ok-Thanx! Dilemma, yeah you saw this coming, huh? Well for some reason only part of my info is showing up like I have put too much info in the FBML box??? Question-Do the boxes have a limit of some sort or is there something that pops into your head that could be causing this? Second question-Since starting this I have become highly interested in learning more about stuff like this…The book Designing with Web Standards (3rd Edition) by Jeffrey Zeldman was recommended, have you heard of this book and would you recommend it? Or are there other books you would recommend for a beginner. I don’t want to buy the book and find that I can not even understand it, LOL, which is highly likely to happen! Once again thanx sooo much for time and help!
    ~Jamie

    • I’m out of town in meetings for the next few days but I’ll try to
      address your questions soon

  • Debk

    I created a static FMBL box, but can't get the tab to save with the title created. I looked at your links in your post above and when I click to edit I don't see the admin options. I am an admin on a page, but did not create the page, does this make a difference?

  • Anonymous

    I am off to create my first FBML tab for my upcoming workshop – thanks for the idea!

  • Anonymous

    Very good comment. I though wanted to see some sample code.

  • What you name the box is what the tab name will be called. You do that in the text field above the box where you put your FBML code. Then just add it as a tab.

  • ameliaw

    I have the same prob as Ashley on this one – seems I can get it to show as a Tab, but not as a Box even though I have it selected to show as a box. Any suggestions/ideas?

  • andreatantillo

    I am trying to include an EPA widget on my Facebook Fan Page, but the EPA embeddable code is iframe. Is there an easy way to use FBML to show this widget?

    <iframe FRAMEBORDER=”1″ WIDTH=”141″ HEIGHT=”215″ id=”dailytips” SCROLLING=”no” MARGINWIDTH=”0″ MARGINHEIGHT=”0″ SRC=”http://www.epa.gov/widgets/dailytips.htm”></iframe>

  • Iframes are not allowed, I don't believe.

  • Andrea Tantillo

    thanks. I've used informaiton from this article on several of my fan pages. If Iframes aren't allowed, is there another way to call an external web site using FBML? I'm getting the feeling it's just not gonna happen!

  • Unfortunately, no. Facebook doesn't want you to be able to call external elements (CSS, Javascript, web pages, etc) because you could be prompting users to enter data or do other things that they cannot control. You could try making a very simple application and having the entire app be the iframe code, then adding it as a tab. Other than that, I'm not sure what to tell you. 🙁

  • that was good article, would you please let me know how do i add this website http://ohlalashopping.co.uk/ or run php code in fab page? Or probably you have already written an article to do just that.

    Thanks

  • Alan Rodgers

    Ive tried to use fbml on one of my fiends FB fan page. I followed the above instructions and tried to put an image on it. The only thing I managed to do was put the title on a new tab!! Is it just a case of copying and pasting HTML from say, Deamweaver or am I missing something???
    Thanks for anyhelp

  • Nope, that's pretty much all there is to it. You set a tab/box title, and then put your HTML/CSS into the main textarea. Obviously rememember that when placing images, you need a full url (http://www.yoursite.com/path/to/yourimage.jpg) instead of a relative url.

  • Alan Rodgers

    Thanks snipe, Ill try that tommorow.
    Alan

  • Pingback: Hidden Marketing Gems of Facebook – Freesource Agent()

  • Craig

    I'm trying to do a general welcome tab for my Facebook page with links to Twitter, YouTube, and a website. I tried to do an image map and link it up with Photobucket but I can't get it to work. Any suggestions?

  • HTML imaemaps aren't allowed in FB code. You have to use CSS to set the hotspots. 🙁
    If you're not sure how to do that, there are lots of tutorials online:
    http://designreviver.com/tutorials/css-image-ma

  • max

    thanks dude 🙂

  • shedhead

    Sorry Snipe, I seem to have posted the same question twice!! oops!!

  • shedhead

    Hi Snipe, Im on custermising my friends Fan page on FB using FBML. Is there any way of changing the text color on the tabs???
    Cheers
    ShedHead

  • Hi Shedhead – you can customize text colors using inline CSS

  • abraham

    Hi, this page is awesome, lods of information about fbml.
    I have a fbml page, and i would like to set up a button that get you a pop-up to suggest to friends when you click on it ( Example here: http://www.facebook.com/pages/cafe-world-bonuse…) but i can't figure it out, i looked all over the net, from the wiki i used the multi friend selector but it limits the invites to 12. here is another example of how i want to have it on my page since you have to click on each button for the next button to show.It would be great if you can help me with the second example thank you.

  • I believe the multi-friend selector is going to be the only way you can do this, so you're stuck with the limit of 12 invites per day.

  • abraham

    Thank you for your really fast reply, in this example how did they do it?
    example: http://www.facebook.com/pages/cafe-world-bonuse

  • jeanne

    Great article. I am using static FBML to embed a flash file (.swf file – hosted on my own server). It works great, although I am concerned that one day I'll wake up and it won't work anymore because I've heard that FB does NOT want links to external sites embedded in tabs (they want us to create applications to do this). I thought that was just a nasty rumor, but appears it does have some truth – i.e., can't embed an iframe in static fbml (used to, but that doesn't appear to work any longer)….

    Thoughts?

  • Hi Jeanne – I don't actually remember a time where iframes were allowed in FBML boxes, and I've been doing this a long time. Lots of big brands link to external pages from the tas – I wouldn't worry about it. It's always a risk you take when you use someone else's platform that they'll go and change things. It is unfortunately the nature of the beast. 🙁

  • RHG

    I have a Facebook fan page and am trying to add the static fbml application. Here's the problem: the only option it is giving me is “add to my page's favorites” – nothing else, no “add to my page” option. Why can I not get it? Is this a known bug?

  • segrace

    I am trying to use an image map for mine, but the links won't work in Facebook. I am not sure why either! I took out the HTML and BODY stuff, but the links wont work. The image comes up on my page tho. Please help asap

    <img src=”https://app.onlinephotofiler.com/images/A_8/1/5/5/125518/84a996ed13264355b8196e33314e4781.jpg “width=”191″ height=”586″ alt=”WingsnMore” usemap =”#WingsnMore” />

    <map name=”WingsNMore”>
    <area shape=”rect” coords=”0,0,191,290″ alt=”Rate Us” href=”http://www.wingsnmorehouston.com/rateus.asp” />
    <area shape=”rect” coords=”0,295,191,435″ alt=”Order Online” href=”http://www.wingsnmorehouston.com/order.asp” />
    <area shape=”rect” coords=”0,440,191,586″ alt=”Wing Email Club” href=”http://www.optemaxcorp.com/subscribe.cfm?clientid=46″ />

  • Please see previous comments. HTML Imagemaps are not permitted in FBML. You have to use CSS.

  • Crystal

    Hey there Snipe, this is probably the dumbest of all questions but here i go… ive already mape my “WELCOME page” but want to add another… how the bloody hell do i do it? any ideas… i know you will have all the answers…

  • By “Welcome page” do you mean a tab you created with the Static FBML app? You have to go back to the screen where you edit the text in the FBML box. Look underneath the text box, and it's got a link that says “Add another FBML box” (or something similar.) Once you create the new FBML box, you'll be able to add that one as a tab. HTH.

  • Very good advice. I never know how easy it was to use FBML on fan pages till I tried it. It supports most html and css tags and classes and anyone with a basic knowledge can create a very nice fan page or landing page

  • Hi,

    I've reviewed so many articles on FBML for Facebook boxes my head is spinning yet none of them answer the simplest of all questions. Everyone likes to deal with the more complex stuff. Maybe you can help me.

    I simply want to add a website link (URL) in my Facebook FBML box that actually works. No images, no photos, no video, just your ordinary, everyday website link. I have the link in my box including the http but it does not act as a link. What is the pre and post code so it will be recognized as a link?

    Thanks

  • Hi Don – it's probably not covered in other FBML tutorials because what you're asking for is HTML, not FBML. I don't know if my commenting system is going to screw up the display of this but it would be:

    [code]your text[/code]

    Make sure the quotes in the above are straight quotes, not formatted curly quotes.

  • Don Shapiro

    Your a hero! Thanks so much. I really don't know much about HTML either. This worked.

  • Keli

    Thanks – this is awesome, I'm just discovering how much i can actually do to my facebook page! I do have a question… I have a swf which contains an rss feed, and when I add it to the FBML, the feed doesn't work. Is there any way to get it to work? Thanks, any help is appreciated!

  • erikarenewal

    Snipe,

    I am finding that when I go into the FBML app, the only option shown is to add it to my page's favorites, not a way to actually add it as an app. Any ideas?

    Thanks!

  • leej0nes

    On the Sunkist Soda page I see that you are able to dynamically load content upon click the tab. So far I have been unable to do this – I have the AJAX calls working and the JSON data turned into nice pretty FB style items – but have yet to discover how to do this without having to click an element. Please can you provide a code snippet?

  • I'm not sure I understand what you're asking. Which content are you referring to, and can you give me an example of what you're trying to do with a little more specifics?

  • No clue – it's showing up fine for me.
    http://www.facebook.com/apps/application.php?id

    Directly under the logo, “Add to page”.

  • leej0nes

    Basically I'm looking for an equivalent to window.onload or div.onload or
    something to offer the same sort of behaviour when a user clicks an my
    Offers tab. At which point the server will be queried for a JSON response
    listing the current offers. I've got the Ajax side working just fine but
    cannot get the data to load upon opening the tab, instead the user has to
    click a link to load the offers data which is kinda naff. I hope I have
    explained myself a little better and appreciate your speedy response and
    assistance.

  • What are you using as the scripting language? Wouldn't you just parse that JSON via your scripting language when the page loads. For example, using php, fetch and parse all of the JSON data, and then do whatever filtering and so on via ajax clicks.

  • leej0nes

    Further to my last message. I've tried things like setInterval/setTimeout
    in the script block's global scope but to no avail.


    Lee

  • Generally speaking, in FB, you can't do things like that. Facebook doesn't let you automatically load any kind of script that could potentially load content the user isn't expecting. It's the same way that their FBJS onmouseover events ONLY work after the user has clicked something else on the page.

  • leej0nes

    Argh!. Ok I can see the security implications but hell thats an unfortunate
    limitation. Are there any kind of workarounds?

    Thanks again.

  • Sort of, but not really 😀 1) Do it in Flash. (I know, I know.) 2) Do it the way I mentioned earlier – letting your server side scripting language (like PHP, ASP, etc) handle the JSON parsing. The parsing isn't done via Javascript that pont, so you can display whatever you want. You could display all of your offers, or just stash the parsed data into your javascript, to reveal selectively when the user clicks on specific things, (sort by, etc.)

  • leej0nes

    FBJS is the scripting language I'm using, well attempting to use. I'm a
    C/C++/C# developer by day but happy to code in JavaScript, FBJS and FB are
    throwing me some curveballs due to their limitations. The handling of the
    JSON response is not a problem, that code works fine, its simply the user
    being forced to click a link to kick the whole thing into action that
    bothers me. In an ideal world there's be support for .onload or similar to
    fetch the data automatically in FBJS.


    Lee

  • Right, but what I'm saying is that you can work around the curveball by letting your server-side script do the parsing, and then just use JS to figure out what to display when. The user isn't forced to click, because the data has already been parsed and is loaded as part of your server-side generated code. So you can just display it without having to use JS. Then if you wanted to offer sorting or what have you, ajax could handle that part.

  • leej0nes

    Ok thanks for the help, much appreciated. I guess I'll have to come up with
    some creative wording for the click…


    Lee

  • But again, you don't need the click if you parse the JSON server-side and then just display the contents as part of the normal page load content.

  • leej0nes

    Ah I think I'm getting you now. I don't suppose you have small snippet that
    shows how you currently do this? I know I'm asking a lot but this one still
    hasn't fully suck in…


    Lee

  • leej0nes

    A snippet of the FBJS side of things.


    Lee

  • leej0nes

    Ok I've got you on one aspect… build the page on the server side – more
    than happy to do that. What I'm being super thick on – or I guess an avenue
    I haven't explored yet – is calling the server side code on page load. I
    dunno, sorry mate I'm confusing myself something chronic here. Brain ache
    from something that should be a no-brainer.


    Lee

  • Well, let me bck up – are you trying to do this in a Static FBML tab? Or an application/application tab?

  • leej0nes

    Its a Static FMBL tab. The person I'm doing this for doesn't want an
    application unfortunately.


    Lee

  • Ahh – well then, that makes it harder. I'm not sure you can do what you're trying to do in Static FBML. Tell him he needs an application 🙂

  • leej0nes

    Ok thanks. I have figured out some sensible and creative wording for
    the link so they'll have to live with it fir now.

    I'm very grateful for your time and input.


    Lee

  • scottbedford

    It's amazing what some basic HTML can do to to FB – so tired of the blue and white!

    Cheers for the post.

  • kprDOTnu

    iam dumb.

    can i add java script to fbml static? if not how can i add a java poll it my page. thanks for any responses.

  • You can add some basic FBJS, but adding a poll calls 3rd party scripts, so that wouldn't be allowed.

  • tomsmarch

    Great article. Is there an easy way to display my web page in one of the FBML tab areas like you have for Sunkist? I am a photographer and it does exsists in an app for photographers who use showit websites but I do not use them and want to do it on my own.

  • Hi Tom – no way to include a website. You'd have to design something specifically for Facebook and code that out in the FBML.

  • Pingback: Managing Expectations – Free Stuff – Cool Tweets: Great Job!()

  • Just a quick question if you don't mind. I found a custom facebook fan page that includes some feed from a calendar. http://www.facebook.com/fsusga
    How are they pulling that information in? I know you can't iframe in something. I just cannot figure out how to pull in an RSS feed or XML within FBML.

  • You cannot do it in just FBML, you have to use a scripting language like PHP or ASP. That tab is not a Static FBML page, it is an application: http://www.facebook.com/apps/application.php?id

  • Ok, so let me ask this. 1) Can I incorporate the WALL into FBML code? I want a page that people can communicate on and I don't want to use the COMMENTS code. So, can I pull in the Wall?
    2) I found an App called SocialRSS which works great. But, it adds it to another tab. How do I incorporate that APP into my FBML page? Thanks!

  • 1) Not that I know of
    2) Cannot do it. Static FBML is it's own application and doesn't allow you to stick in other apps.

  • Ok, I think I'm getting there. I just created my first basic app. When I went to my app page, I have to ALLOW ACCESS to view the app. Once I allowed, it worked fine. So the link I sent yesterday that you said was an app (http://www.facebook.com/fsusga), it did not ask me to Allow the App.
    I also notice my app test page does not have tabs. Am I not allowed a tab until I submit it to the directory?

  • Ok, so I figured out the tabs. For anyone that wants to know, within the Application, under the Profiles tab, you actually have to enter the page name (index.php) when you enter a page name. I assumed it would know index.php.

    But, I am still a little lost on the Allow Access. If you don't do the $facebook->require_login or put anything else USER related, it does not ask for Access. Am I correct in assuming this is the way it should work. I mean, it makes sense that someone has to be logged in. But, do we really need to get their Approval to display “friends, comments, etc”

  • To clarify for readers, that's the Profiles tab in the Application Settings screen. Many times (more often than not, really) the tab page is not meant to be the index page, which is why they let you choose. Since a tab page has to be designed with a more narrow layout to fit into the tab design, some people create a tab version and a canvas page version, each sized optimally for the restrictions of where it appears.

    I'm not sure if they have changed what requires approval, but its traditionally been ANY time you're accessing user-specific information, you need their approval.

  • treseh7

    Hi, what is the name of the FBML app to use to create a Twitter feed? Or, can you direct me to sample HMTL code I can copy & customize? Thanks.

  • Do you mean to display a user's Twitter feed in a page? Do a search on “Twitter” in the application directory. Not sure off the top of my head. The stuff I did was custom-built.

  • You rock! Thanks for explaining so much information. Lastly, why would I ever build a “canvas” if it cannot have a tab associated with it?

  • Just depends on the app. Some apps are developed independently by people or companies that don't have or want a fan page – or because the app itself is too wide to fit in the smaller tab area and they didn't have the time or budget to create two versions. They just want you to go to the app canvas page.

    There are some limitations on apps in canvas pages that Facebook has imposed as well, so directing people right to the canvas page is sometimes better for the flow of the game.

  • jweaving

    There's a few things I'd like to do with our fan page… I'll try to break it down in pieces…

    I like the model of Walgreen's fan page: http://facebook.com/walgreens — it prompts non-fans to their custom tab called “Fan Offer.” I've read that this was coded via FBML. Non-fans are presented with Walgreen's sales offer to get users to become fans, once they become fans the default landing page is the Wall. (Non-Fan default page is “Fan Offer”). Once you become a fan and return to the “Fan Offer” tab, it's dynamic — I'm not concerned about changing the images with coupons/offers like Walgreens, but I DO like the model.

    Here are my questions:

    1) How do I set the Non-Fan default landing page to the custom FBML tab?
    2) How do I set the Fan default page to the Wall?
    3) How do I change the custom FBML tab image to a basic web image page image — it would be nothing more than HTML redirect, what is more important is how do I change the image after 'fanning.'

    There are a number of sites that do the same thing, so I know it can be done. I just don't know how…

    I have another question, but I'll leave that for a separate post. 🙂

  • jweaving

    Ignoring the blog-roll on the righthand side, I am looking to insert a page within a custom tab similar to our site's page:

    http://www.bullsonwallstreet.com/Blog.aspx

    It would be a page hosted on our site with simple design background — only graphics and the YouTube video that is on that link. This is similar to what you've described with your Sunkist example.

    I do know how to insert a YouTube video into a custom tab via FBML code, but it looks really crappy — that's why I'd rather go this design route. The FBML code for YouTube makes you click on the image, then it loads the YouTube player to click on (horrible). Other company fan pages have done similar programming to what I'm suggesting.

    What do you suggest? How do I go about doing this?

  • We love this application and use it regularly with clients as well. You provided some good tips, people are always asking how to personalize their page. Thanks for sharing. 🙂

  • aliew

    For some reason I can not add this app to my FB fan page. Every time I go to the Static FBML app page, I only have the choice to add it to my favorites. when i log out of my company's page and login with my own personal account, I can see the add to page button, but when I log back in as my work, that button is gone. Any advice?

  • Don Shapiro

    Hi,

    You helped me with a simple HTML issue for my FBML box, now I have another one. Why are the simple things so hard to find. I've been to 30 HTML code assistance sites and none of them offered an answer.

    I want to specify the width of my FBML box so that it does not go across the entire page (available area provided by Facebook). I would like the box to be somewhere between 40% to 50% of the available space. I will need to play with this once I know how to code the box width.

    Any help will be greatly appreciated.

    Thanks, Don

  • Hi Don – you'd want to use a div tag, and use style=”width: 50%”

  • Don Shapiro

    Thanks! BTW, do you offer professional services to code more complex FBML pages like you would see for a music artist?

  • caparepandrew

    Thanks for all of this helpful information. What I'm trying to do is this:

    pull video from a vimeo rss feed and display it like the FBJS example you have on facebook with the pumpkin carving gallery.

    I understand that I need to create an application to parse the rss then call that into a css/fbml gallery script?

    A tutorial on something like this would be awesome! I'm sure other people would like to do something similar (I actually want to use yahoo pipes to aggregate more RSS content to pull into my eventual FBML/app tab)

  • kit

    you're awesome! thank you so much for the information

  • Bartolo

    Hy Snipe I think u are great. Could u tell us how to embed ifram in to fb page using this script im sort of a usles here. thanks a lot:
    <a onClick=”outside_location.setInnerFBML(link_1);” style=”cursor: pointer;”>Let's see that iframe….

    <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>

  • Thanks I was just trying to decide whether to learn to make an FB app, didn't know that so much could be done with Static FBML. You've saved me a LOT of time!!

  • Hi and thank you for youre insights – very helpfull to a facebook-page rookie!

    I'm wondering if it's possible to embed a swf-file via static FBML to? – and if so – how do I go about that?

    Kind regards
    Jesper Friis

  • Yes you can – more info here: http://wiki.developers.facebook.com/index.php/F

  • Paul

    Question.. my FBML pages… all of them… just vanished.

    It seems to load…. but then nothing happens. This happened around 6 hours ago, and then on checking more sites I admin… the same thing had happened.

    Here is one of mine. http://www.facebook.com/wsichile

    The idea was to have a “mini-website” in there. IF you wish I can post up the code I used… but it seems strange that all of them went without a trace, whilst SOME of the tabs like the contact us still work.

    Thanks, any help would be great.

  • Honestly, this has happened before. Facebook occasionally breaks it for some reason. Not much you can do but wait it out for them to fix it. 🙁

  • Anonymous

    Hi, I am trying to ad 4 tabs that are 1/4 inch each in a profile box that open into different linked areas of other sites and video’s but cannot find any recipe or that. Can you help? Thanks in advance, Fred:)

  • Paul

    Oh yeah… they just came back.

    What a strange thing. Oh well, panic over thanks.

  • mindworks

    I have a question.

    I am just playing around with an idea at the moment, but what I am getting stuck on is the collect the information at the end.

    If you go to http://www.facebook.com/MindworksChile you can see a test page where I try out codes before implimenting them.

    Now, I have a tab called contactanos.

    You can see they pur their name, etc in there… and also there is a drop menu with 3 options.

    So far no problem…

    To collect the fields info I use the code…

    // collect field values
    var queryParams = {
    'name' : document.getElementById('name').getValue(),
    'apellido' : document.getElementById('apellido').getValue(),
    'rut' : document.getElementById('rut').getValue(),
    'email' : document.getElementById('email').getValue(),
    'pregunta' :
    document.getElementById('pregunta').getValue(),
    'menu2' :
    document.getElementById('menu2').getValue(),
    'send' :
    document.getElementById('send').getValue(),
    'origin' : document.getElementById('orgin').getValue()
    };
    ajax.post('http://mindworks.cl/facebook/mindworkschile/contactus.php?sys=fbpage&#39;, queryParams);
    return false;
    }
    </script>

    But, It is NOT collecting the info.

    If I take out the drop menu… the iformatino is sent to my server, and I collect the information perfectly, but when I put the drop menu back again… nothing.

    I am sure this is simply an eror in mym php on the server, or in the HTML…

    I have been tearing my hair out for 3 days now, and am still no closer to solving this. Any help.

    Would you like to to post the contact.php, and the HTML code in FBML so you can see exactly what is there (and for others to help themselves too?)

    Thanks

  • mindworks

    Yeah, super easy.

    1. Upload the swf to your server, or if it is already online, copy the URL.
    2. post in the code to FBML.

    That's it.

    Example code for a video from Youtube would be…

    <fb:swf
    swfbgcolor=”000000″ imgstyle=”border-width:3px; border-color:white;”
    swfsrc='http://www.youtube.com/v/xxxxxxxxxx&#39;
    imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg&#39; width='340' height='270' />

  • Great post! I found the Sunkist Soda page on Facebook as I wanted to check out the tab first hand but it appears it's been removed with Twitter now having it's own tab and the photos appearing on the standard 'Photos' tab 🙁

    I'm curious why they would have done this – any ideas?

  • Jac

    Is there any reason why one of my fans won't see the Static FBML box we've created? The tab doesn't show up for them when they come to our site. When we've sent them a direct URL it brings them back to the home page. Do you have any answers to why?

  • Hi Josh – Sunkist is no longer a client for my agency, so I cannot say why they would do that, unless their new agency wasn't FB savvy enough to make it happen. (I did send them the source code for the Twitter app, and they had access to the FBML tab for photos, but I couldn't guess why they would have chosen not to use it.)

  • ZammyBoi

    Hi Snipe,

    Am completely stuck with Static FBML. I am not a tech person and have never developed any sort of HTML or FBML programmes (in my entire life)! But now I am stuck, as I have been given the responsibility of developing a business page for my company on Facebook. Now the problem is that I am not able to find FBML / HTML codes that can be used for me to spruce up the page I have created. So right now its basically looking like any other FB page!!!

    Would be great if you could help share any link or the codes that can be used to spruce up the Page. Am looking for something more than just basics. {eg. Have to add videos within FBML, background image, collage, clickable tabs within the body of the welcome!

    Appreciate your assistance.

    Cheers,
    Zam

  • Pingback: Socialize it with Facebook Developer Tools()

  • Hi Zammy,

    Clickable tabs are explained here:
    http://www.snipe.net/2009/10/mini-site-facebook

    Background images/colors are simple CSS, not FBML.

    Embedding video is part of the FB API:
    http://wiki.developers.facebook.com/index.php/F
    http://wiki.developers.facebook.com/index.php/F

    Not sure what you mean by “collage”.

  • ZammyBoi

    Hi Snipe,

    Thanks for the quick reply. As mentioned, I am a complete NON technical person, so do not get CSS (or FBML for that matter); have managed to gain some insight into the technical field over the past 24 hrs, but still quite illiterate! 😀

    So all help would be really appreciated:
    1. Is there a code that you could share which i can use for background image?
    2. Collage is a collection of images randomly pasted on a background. Any idea about that?

    Thanks again for the links and the help.

    Cheers,
    Zam

  • Background image:
    http://www.w3schools.com/css/pr_background-imag

    Collage: That's not a real term in web development. If they are pasted randomly on a background, it sounds like you need to create the collage image in Photoshop or some other graphics program and then just insert the finished image.

  • ZammyBoi

    that's great Snipe…..thanks for all your help! will try n do smething with ur help…..shall get in touch again incase i get stuck

  • forrestwang

    very good article.

    btw ,if i want to create an application for the Fan Page.how would i do?

  • You would create it as any other FB app, and specify what file you wish to use as the tab in your FB app settings.

  • Duncan

    Hi Snipe

    Sorry to bother but Im going crazy. I have set up a new welcome page which works great, and I wam trying to make it the default page people see when first visiting the site. It should be really easy – as the page should be available in the dropdown in wall settings > Default Landing Tab for Everyone Else, but my new tab is just not an option in there. I only have the option for Info or Wall – thats it. I've scoured for a solution around the net but noone seems to have this issue. Have you any idea why I cant set the page as default? Thanks in advance!

  • Hi Duncan – looks like this has been brought up on the developer forums. No word on why it's happening yet:
    http://forum.developers.facebook.com/viewtopic….

  • Summer

    Just ran across this site. This may be a silly question, but do you have to have a personal profile linked to your business page in order to install Static FBML? Do you recommend having a personal profile linked to a corporate site?

  • Hi Summer – The public can't see who the admins of a page are, so there's no real harm in linking the two. But if you're paranoid, you can always create a separate profile.

  • Duncan

    Thanks! I actually fixed it – I had to “like” my own page – then they appeared – maybe I was being stupid. But without being my own fan I couldn't see those drop downs. Maybe it will help someone else

  • Any idea how to add a like button for page within the static fbml?

    Cheers!

  • kevin

    same problem for me… any solution?

  • Santosh Setty

    Firstly thanks snipe for nice tuts, i just wonder how you displayed twitter feeds on facebook page?? suggestion would be appreciated.

    Thanks
    Santosh Setty

  • I created a cutom application that pulls from the Twitter API. If you don't want to (or don't know how to) make a FB application that reads from the twitter API, you can use one of these badges. Normal JS won't work on FBML boxes, but a few image/html/flash based options are listed. http://mashable.com/2009/03/30/twitter-badges/

  • Thanks a lot for the reply

  • Jasonwilliams2005

    Very Cool Post I actually discovered Static FBML and was searching on ways to use it when I stubled on your site. The only thing is I am trying to set up a good looking FB page for my website http://pokerheavy.com and it seems like the FBML box only publishes to bxes can I use FBML to create a wall back ground? or in the other sections?

  • You can set it as a tab or in boxes, but when you first add it, it will always default to boxes. Go to Edit Page, find the FBML box you just created, and click on the “application settings” link underneath it. A popup will show up that shows two options – boxes and tab. click “remove” to remove the FBML box from Boxes, and click “add” next to Tabs to add the tab.

  • Maurizio

    Hi snipe, good stuff really. I have a question though; do you know how to put a video within a picture? here is an example, http://www.facebook.com/HiltonCaribbean, thanks!

  • They're not really putting a video within a picture – they've just set the background-image for the div to a specific image, and then coded in a video on top.

  • Maurizio

    oh ok….and do you happen to know how to do that?…:)
    Thanks

  • Mark

    Hey Snipe, thanks for all the help! I was wondering if you knew of a way to get around making the user click “Add a comment…” when using the <fb:comments> tag. I found an example of it on this page and now i just have to have it! http://www.facebook.com/threadless?v=app_116832

  • Hi Mark – they may not be using the fb:comments tag, since that tab is definitely an application. It might be a custom commenting piece.

  • Mark

    Well I suppose I will let that go for now… Unfortunately, I am actually having a real problem now.

    I wrote my page and it has a fb:swf object on it. Now I want this item to change everyday, so i thought thats pretty simple and made a file named facebook.swf and facebook.jpg on my domain. I then have a script that will overwrite those files with new files of the same name. Now every time the script runs the flash runs perfectly, however, the image is not updated in real time and I see the last image that was used for some time after it has changed.

    I am guessing that Facebook is caching that image and it is only refreshed every so often. I know its a long shot for you to know of anyway to reset that cache (especially since the idea would be to do it from code so I don't have to), but is there anything you can think of to help me out?

  • Mark

    And in fact now it is sometime reverting back to the very first image that was stored as facebook.jpg and seems to sporadically show images that were used before.

  • Yeah, the problem is that Facebook aggressively caches image across multiple CDNs, which is why I'd normally use an application for a situation like that (instead of a static FBML tab), since I can use the API to request an image refresh.

    You might try setting a clear transparent gif as the swf image, and then setting a background image via CSS in a div that the swf sits in. CSS calls to external images don't get cached I don't think, so that might work. Something like:

    <div style="background: url(http://example.com/image.png)">[your swf code]</div>

  • Mark

    I gave it a try and it looks like they may also cache the css image. Ill give it a little time to maybe clear itself out, but I will probably have to write an application or go with a generic play image…

    Thanks for the try though.

  • Sorry I can't be of more help. 🙁 The CSS trick was the only thing I could think of that wouldn't require an app. If you did an app, though, you could basically use the same code, just tack a timestamp onto the end of the image/swf urls so that it forces a unique url every day. Wouldn't be a lot of extra work.

  • I think I know what you mean… and it is easy, I have something similar on one of my pages. Check out one of my clients pages ( http://www.facebook.com/wsichile ). When you get there, it should automatically be opening on the BIENVENIDO (welcome in Spanish tab.) The tab is basically set up like a mini website, with its own navigation bar, etc. On the navigation is an option called “Estudio”.

    Choose ESTUDIO and you will see a little text, and a image of a lady holding a notice board. Click on her, and you can se I have a swf running behind her. Now, in this case it is an swf… but the mechanics are the same for movies, or whatever you need.

    Have a check, and if it is what you were asking, I can copy/paste the code for the image/media here for you.

    Let me know

  • Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources - Smashing Magazine()

  • Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources | ()

  • Pingback: TG Designer » Designing A Facebook Fan Page: Showcases, Tutorials, Resources()

  • Jeffrey

    Hi snipe. Great stuff in here. I've researched all the links you've provided, but I'm still having trouble. Here is my situation:

    here is my fan page: http://www.facebook.com/EZLinksGolf

    I created a new tab called: Online Tee Times

    I would like feed in this URL: http://zodiacfalls1.ezlinks.com (it is an online booking engine for golf tee times)

    Here is the code that I have:

    <fb:iframe src=”https://zodiacfalls1.ezlinks.com/%28S%28tcyy0sav1z1yr4qwyzfrk5fy%29%29/Search/ReservationSearch.aspx”></fb:iframe>

    The URL in the code is what it resolves to. Not sure if this matters or not. In any case, when I click on the Online Tee Times tab a blank page shows up.

    Thank you in advance for any help.

    -Jeff

  • That's because iframes are not allowed in FBML tabs. 🙁

  • Jeffrey

    So I would need to make an application? What are my options if I want to feed in a URL into an iframe?

    Thanks again.

  • Well, yeah. You've either got to make it into an application and set up the iframe that way, OR, there is a hack that allows you to place an iframe into an fbml box, but being that it's a hack, it's not endorsed (or technically allowed) by Facebook, so that means it can stop working at any time.

    [code]<script>

    function foo(){
    ajax = new Ajax();
    ajax.responseType = Ajax.FBML;

    ajax.ondone = function(data){
    dlg = new Dialog().showMessage('title',data);
    }

    ajax.post('http://yoursite.com/test.php&#39;);
    }

    </script>

    <a href=”#” onclick=”foo(); return false;”>book your green[/code]

    Then you have a file, script, whatever resource you want, that serves up the iframe. The contents of that file (in this example, test.php) are:

    [code]<fb:iframe src=”https://zodiacfalls1.ezlinks.com/%28S%28tcyy0sav1z1yr4qwyzfrk5fy%29%29/Search/ReservationSearch.aspx”></fb:iframe>[/code]

  • Pingback: ArticleSave :: Uncategorized :: Designing A Facebook Fan Page: Showcases, Tutorials, Resources()

  • Pingback: Smashing Magazine: Tim’s shared items in Google Reader: Designing A Facebook Fan Page: Showcases, Tutorials, Resources | XtremelySocial.com()

  • Pingback: 王赟的分享博客 » Blog Archive » Designing A Facebook Fan Page: Showcases, Tutorials, Resources()

  • Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources « YouTooDesign()

  • Witch Craft

    Hi Snipe ! I do see the Static FBM App on the bottom of my business page, but the symbol isn´t green, it´s grey and everytime i click on it i end up on my profile page. Same problem when I use the search for the application. I am admin of the page and i´m logged in … but i´m not able to add the application … can you pleeeeeeeeeeeeease help?? THX

  • FB might be acting up – have you tried it again since?

  • Witch Craft

    yes … I´m trying every day … I also tried using IE instead of FF … who knows … but still can´t add it. i also tried setting up another page – just for testing – still doesn´t work … I can´t even get in touch with the developers, cause I can´t open the application page …

  • Can you take a screenshot? I'm not sure I understand what you're seeing.

  • Witch Craft

    I don´t see anything – when clicking on http://www.facebook.com/apps/application.php?id… – I am automatically transferred to http://www.facebook.com/home.php

  • Did you mabe accidentally block it? Try going here: http://www.facebook.com/settings/?tab=privacy and then click on the middle-bottom option, “Block lists”

  • Witch Craft

    oh my god!! i can´t believe it!!! YOU ARE RIGHT!!! i don´t know … this must have happened long ago when I didn´t think to ever need it or whatever … THANK YOU SOOOOO MUCH!!! I posted on several pages – but nobody could help!! You´re amazing!!!!

  • Glad to help 🙂

  • Dslockward

    Is it possible to add this to a regular Profile Page?

  • Kgpvideo

    My facebook business page does not have a like button, and idea on how to add one?

  • All pages have a like button – you likely cannot see it becau're you've already liked it. The button disappears once you like it.

  • marco

    Hi, thanks for the info – It helped me a lot looking at other pages and learning how FBML works to make my pages look much better. Also, I think it was really helpful to find out how to feed my RSS feed right into the Notes tab without any additional application. So thanks for the input, we do appreciate it out here! Here is what I have come up with the latest page I created:
    http://www.facebook.com/pages/ReXark-Archival-Recordings/152834168063347

  • Stacey

    Hi there,
    I’m just commenting with the hope that you can help. I’m trying to create a very basic photo Static FBML for a musician page (anything first up is better than looking at the boring wall). I added the app you mentioned, but have no idea what to do next! (laugh at me if you feel it appropriate. What do i need to write in the fbml box after i have renamed the tab? Please email if you can help me, blakwrx@hotmail.com.
    Thanks in advance,
    Stacey Gambell.

  • I am available for paid consulting work, but I cannot give free email support to everyone who visits my blog, I’m sure you understand. Have you read the other tutorials on the site?

    http://www.snipe.net/2009/10/mini-site-facebook-static-fbml/
    http://www.snipe.net/2010/05/static-fbml-microsite-next-level/

  • Pingback: FaceWord - Conception d’une page Fan Facebook: Vitrines, Tutoriels, Ressources()

  • Nicely explained. Thank you for sharing this information. I’m spending the day on the subject of FBML Design.

  • Great post! The comments are very handy too. Thanks…

  • I wish this information is longer, now Im still stuck on how to put image in my facebook fan page, thanks for the share too

  • Exactly the kind of article I was looking for! Nice one!

  • MVB

    Hi Snipe.. I’m having trouble editing my FBML… When I click on Edit, the following message appears “The developer of this application does not currently allow it to be added”
    I also tried to add the application again but it doesn’t seem to be available anymore. What should I do? Thx!

  • Pingback: Facebook Fan Pages para se inspirar | IFDBlog()

  • Carolina

    Hello how do I add an image in the FBML? I can ad the New Tab but how can a I put an image like de Sunkist example?

  • Fbmlcode

    Hi Snipe,
    Could you please tell me how to make poll (i’ve seen “Sunkist Soda” Poll tab), thats really great. What Fbml code for poll tab like that? your help would be great, thanks in advance!

    • Hi – the poll was done as an application, and can’t be done using just FBML alone. Needs a database to store poll entries, etc.

  • Robert

    Any idea why this CSS code from image-maps.com isn’t working in FBML?

    http://pastebin.com/raw.php?i=nVJt47WX

  • William E Kelleher

    Hi Snipe!

    Amazing information!

    I am trying to add a tab that will serve as a “question and answer” platform for my fans. Is FBML sufficient for this or am I going to have to go with an application?

    • Hi William – meaning you want people to be able to submit their own questions and answers? That would require an application. If you just want to have an FAQ type of thing, you can use FBML.

      • William E Kelleher

        Yes, we want to have people ask/post our mascot a question, than we will post an answer. Thank you for the quick response!!

  • Nouka99

    thx a lot for the article,
    now just to be sure i correctly got ur point, does this mean that to use fql to get some info about fans , static fbml won’t be enough now?
    if so , then how can i do it? write a serverside php or .net code? then how can i call it then?
    thx

  • hey frndzz i m new in makg my facebook page !!!!!! can u tell me hw to u add images n layouts in FMBL,,,i dnt no anytg…Can u help me,,,,I hav MAde FMBL tab, bt i dnt knw hw to use it..plz if u cn help me !!! my email id is memonmsaad@hotmail.com….i wil b watg for ur rplz……….

  • Dublinduff

    hows a going. i have a business page but i have a tab on it bt want to have just a colour plain background for it. anyone know how to do this??? codes etc…

    • Background colors are done via CSS. Google “CSS background color” and you should have several examples.

  • Can you tell me how to add the Static FBML app when there isn’t an Add to My Page? Note: there is an Add to My Page’s Favorite, which doesn’t help with this matter. Thanks.

    • FBML has marked for deprecation for several months. The Static FBML app is most likely being phased out, since Facebook gave us 4+ months of warning.

    • I had that problem – no “Add to my page” link, but you can easily install it to any page for which you are an admin at the following link. Bookmark it!

      https://www.facebook.com/add.php?api_key=fdfd01c9df7d644a68a4e989ae861e44&pages=1&page=112047832220359

      If this tip helped you please click the like button on my web page – thanks!

      • That link will likely not work since there is an API key attached to it. That said, it’s a VERY BAD IDEA to bother to install Static FBML at this point. FBML is being deprecated, so whatever you put in that box will stop working. It’s a much better idea to use one of the hosted iframe tab apps and play by the new rules.

        • GriffN84

          Any suggestions for one of those “Hosted iframe tab apps”?

  • Monicadhondage

    i am facing d same problem as Victoria Knaup…the option of “add to my page” z not available. Is facebook making a some changes again or is there a bug?

  • Thereal7861

    need facebook fan page api code in php

    • The PHP SDK is available for download along with some sample API code once you create an application in Facebook.

  • Catherine

    Can anyone help me??? I manage several Fan Pages for business. Is there a way to load the Static FBML on EACH page???

    • AFAIK, FBML is being deprecated, so you can’t add the Static FBML app to pages anymore.

    • guest

      who says? i manage several pages as well and added it to each page. ust follow the directions. itwill ask you which pages you want toadd it to.then i went back into the app, and it asked me again and i chose another page. just follow the prompts.

      • Who says? Facebook says. Back in February. http://developers.facebook.com/blog/post/462 – it may work right now, but it’s being phased out, so it’s smarter not to create new stuff with Static FBML. We used to use it all the time too, but knowing that it’s going away, it wouldn’t be wise to create new projects with Static FBML.

  • I need help importing a JSON feed from Google Spreadsheet into Facebook (My static fbml page)… I dont want to use any server side scripts…

    Is it possible to just import the feed and have it displayed in facebook (and update itself whenever a new entry occurs in google spreadsheet?)

  • Hello Sir,
    Could you please help me with this on going problem with Facebook Fan page. I host a Talk Show called The Think About It “TALK” About It show, we have a player by way of html code on our webpage that will play each show live and or archived see it at http://www.thinkaboutittalkaboutit.com we are trying to place that same place and twitter feed on our FB Fan Page on the front or wall so listeners can go there as well as the webpage BUT! facebook makes it impossible i have tried many things even fbiframe. could you please help us? you may send comments or suggestions to thinkaboutittalk@gmail.com Thank You Dr. Ramsey

  • Hello Sir,
    Could you please help me with this on going problem with Facebook Fan page. I host a Talk Show called The Think About It “TALK” About It show, we have a player by way of html code on our webpage that will play each show live and or archived see it at http://www.thinkaboutittalkaboutit.com we are trying to place that same place and twitter feed on our FB Fan Page on the front or wall so listeners can go there as well as the webpage BUT! facebook makes it impossible i have tried many things even fbiframe. could you please help us? you may send comments or suggestions to thinkaboutittalk@gmail.com Thank You Dr. Ramsey

    • If your facebook tab is in an IFRAME, regular HTML will work.

    • If your facebook tab is in an IFRAME, regular HTML will work.

  • HOW CAN I DO THIS

  • Thank you for this site, it is very helpful.

  • hmmm .. the Static FBML is not there now …. Any other Method ??

  • jackson698

    if you don’t really need to
    use any scripted language like PHP or ASP, and you don’t need to right of entry
    the API to get the user’s in turn for any motive, you most likely don’t in
    reality call for an submission romantic status quotes.

By snipe
Snipe.Net Geeky, sweary things.

About Me

I’m a tech geek/dev/infosec-nerd/scuba diver/blacksmith/sword-fighter/crime fighter/ENTP/warcrafter/activist. I run Grokability, Inc, and run several open source projects, including Snipe-IT Asset Management. Tweet at me @snipeyhead or read more...

Get in Touch