It is know that FBML Facebook Fan Pages has now been depreciated and it is no longer  possible to add the Static FBML application to pages. Static FBML is what many of us have used to create custom Facebook tabs in the past. But have no fear,existing FBML tabs will still continue to work and it will be possible to edit them but you can no longer create new pages using this application. I don’t know how long Static FBML will work before Facebook takes it away completely but i believe they will in a few months once everyone has got used to using the iframe app and developer have produced dynamic ways of using iframe in facebook pages.

So how to you create a fan page using iframes? Read below.

Before we continue you should know that there are currently 2 ways to add iframe app to your facebook fan pages,
1. through facebook developers and
2. through the wildfire iframe app.

The wildfire app is easier to implement but it has some major compatibility issues and you cannot integrate normal html text into this app as it does not allow, align, cell spacing, cell padding, javascript, script or type html attributes which is quite poor. It does however allow you to easily create a landing page for non fans and hide content that only fans will see without having to input any fancy coding like before.

For more options and dynamic content it is best to use the facebook developers iframe app, as you can add whole html pages straight from your hosting as well as java, jQuery, flash and any other type of coding you can think of

Creating Dynamic Facebook Fan Pages Tab with iframe

1. Make a html, php, flash or other type of web page and then upload the document to you server (make sure all the files sits within the same directory). Instead of pasting the code directly into the Static FBML app, the iframe application will be pulling or streaming if you like the page that sits on your server to Facebook. This page will still need to be the correct Facebook size limit of 520px wide.
2. Go to the Facebook Developers website.
3. Create a new app by clicking on the ‘Set Up New App’ button.
4. Give the new app a name. I recommend naming it what you want the name of the tab to be. Agree to the Terms of Service and click on the ‘Create App’ button.
5. Now for the fun part – the security check with the  annoying unreadable captcha.
6. Next fill in your application profile details.
7. Give your new application a description and upload your own icon or log if you choose to. I recommend at least using the icon because in the list of tabs on your page, your icon will appear rather than the iframe or static fbml icon. This is all we *have* to fill in on the About Tab.
8. The next tab we fill out is VERY important. This is integrating your application into Facebook Fan Pages.
9. Canvas URL – fill out the directory where the file you uploaded is located. This DOES NOT include the name of the file. The URL must have a trailing slash Example:  http://www.creative-websolutions.com/creative-fanpage-template/
10. Canvas Type – select,  iframe.
11. Iframe Size – unless you want ugly scroll bars select auto re-size. Removing the scroll bars completely requires additional steps.
12. Tab Name – this is the name you want your tab to be called, such as Welcome, About, Products, etc. The first time I tested this my tab name was ignored and the name of the Application was used, which is why I recommended naming the application what you want the tab to be called. I’m not sure why this happened or if I did something wrong the first time so if someone can clarify this, please let me know.
13. Tab URL – this is the name of the page file you uploaded. In my example it is index.html
14. The Click on Save Changes.
15. You will now be on the screen with information about your new application. You do not need to submit it to the directory. Actually, you probably don’t want to do this because than anyone could add you custom iframe tab to their page – I don’t know why anyone would want to do this but you just never know.
    
16. Click on the link on the right of the application information page that says ‘Application Profile Page’.
17. You now need to add the application you created to your page. This is like adding any Facebook application, such as Static FBML. Click on the link on the left under the profile image that says ‘Add to My Page’. If you are an admin for multiple pages, you will need to select the correct page to add the new iframe page application to.
    
18. Go to your page and you will see the new tab in the list under the page photo and, if you uploaded your own icon, you will see that next to the name of the new iframe page tab.
19. Click More> Edit at the bottom of the list and you can move the tab higher up the list but it can’t go higher than Wall and Info.
20. You can make this the default landing tab by going to Edit Page > Manage Permissions.

Negatives of New Facebook Fan Pages

1. You will have to make one of these for every custom tab that you want to make – if your Facebook Fan Pages is going to have three custom tabs you will need to make three iframe apps for it.
2. It is my understanding that if you are not logged into Facebook, you will not be able to see a custom tab created with iframe. This is not good for google searches that were locating our custom Facebook Fan Pages tabs. If I am wrong about this, please let me know.
3. I have not yet figured out how to use code similar to visible to connection that is used to hide content from people who haven’t liked the page, if you know how to do this drop a comment for everyone below.

Benefits of New Facebook Fan Pages

1. More code flexibility – pretty much anything that will work on your server will work on your iframe tab. For example, you can see that I added javascript and flash to mine that shows a mini website in effect. You can also add a video with the embed code and don’t have to use the FBML code for video. Other scripts and widgets will work too.
2. You can add your Google analytics tracking code just like you would to any web page!
3. You could make different pages in advance and quickly swap them out by simply changing the Tab URL in the application settings.
4. Other? – You tell me.

You can visit the iframe facebook fan page tab I made here. I made a flash coded html page, which is only 60% finished but you can see the benefits of using iframe application.

If you would like assistance creating iframe tabs or transitioning your current tabs to iframe or would like a flash enable mini website as your facebook  fan pages landing tab, please contact me for prices.

NOTE: If you’re an admin of the Fan Page you’re using this FBML in, and you’re logged in, you will see the content whether or not you’re actually a fan of the Page. People get confused about this and think the tags aren’t working, seeing either both fan and non-fan content, or one or the other images covering each other.

ALSO NOTE: You no longer need to have the <fb:fbml version=”1.1″> </fb:fbml> tags, as much documentation on the Web specifies.

FINALLY: If you want to copy and paste my code, MAKE SURE you convert all quotes to plain-text (straight up and down) quotes! Otherwise, your code will not work!

How to Show Different Content to Fans and non-Fans – Reveal Tab

<fb:visible-to-connection>
Fans will see this content.
<fb:else>Non-fans will see this content.</fb:else>
</fb:visible-to-connection>

Removing the Space above the Non- Facebook Fan Page Content

The best way to prevent the non-fan content from pushing the fan content down the page, use this method:

Use “position: absolute” CSS which takes the non-fan content out of the document flow (See this article on using the CSS absolute-position element) and positions it relative to its containing element (usually a DIV).

In the following example, I have given the containing DIV the ID “wrapper” and used CSS to style it “position: relative”. Then the non-fans content is in the DIV with the ID “non-fans” and is “position: absolute” and is set to be flush against the left and top margins of the “wrapper” DIV:

The code in the FBML box:

<div id=”wrapper”>
<fb:visible-to-connection>

FANS-ONLY CONTENT

<fb:else><div id=”non-fans”>CONTENT FOR NON-FANS</div>
</fb:else>
</fb:visible-to-connection>
</div>

The CSS:

#wrapper {
width:520px;
margin:0 auto; border:0; padding:0;
position:relative;
}

#non-fans {
width:520px;
position:absolute; top:0; left:0;
}

When using the “position:absolute” in CSS the crucial thing to remember is that the element you’re positioning absolute will be positioned RELATIVE to the element in which it’s contained.

Facebook Fan Page Troubleshooting

If you aren’t having success implementing this code, it is most likely due to one of the issues described below. PLEASE carefully read this post and the troubleshooting tips below before asking questions via the comments.

* IF YOU SEE BOTH FANS-ONLY & NON-FANS CONTENT: To test whether you’ve implemented this feature correctly, you MUST NOT be logged in as an admin for the page you’re adding this to, or you’ll see both the content for fans and for non-fans. The best way to test is to create a user profile for testing and log in as that user. You can then “Like” the page and “un-Like” the page to test the display of content. To “unlike” a page, click on the Wall tab for the page and at the bottom of the left column you’ll see an “Unlike” link. Click that to unlike the page;

* NO “CURLY” OR “FANCY” FORMATTED QUOTES: Your quotes, whether single or double — and ALL your code — MUST be plain-text. If your quotes aren’t straight up and down, then they’re formatted quotes and should be fixed or your code will NOT work;

* MATCHING QUOTES: Make sure quotes around values are both the same, either single or double, but they have to match!

* HEIGHT SETTINGS: My fix for the extra space above the non-fan content uses an example height. Make sure you set the height value and the “margin-top” negative values for your individual case.

* TEST YOUR URLS: If you can’t access the URL for an image or file directly in your browser, it won’t work in your code. Make sure your URLs are correct;

* URLS must be properly formed: After the domain name (“TLD”), URLs are CASE SENSITIVE. They should also contain NO SPACES or, as mentioned above, no specially formatted characters.

Testing your Facebook Fan Page Show/Hide Code

It’s important to remember that if you’re logged in to Facebook as the user who is the Facebook Fan Page admin, you will see both the fans-only and non-fans content.

To properly test your code:

* Set up a new Facebook personal profile, to be used just for testing purposes;
* Log in the Facebook as that new test user and view your Page;
* If you see the “Like” button at the top, then you’re not yet a fan (duh!);
* Assuming you’re not yet a fan, you should see the content of <fb:else>;
* Click the “Like” button; you should then see the fans-only content and the non-fan content will be invisible;

If you need to do tweaking to the code and re-testing, you’ll have to log out as the test user and log back in as the admin to edit the Static FBML.

TIP: Open, say, Firefox and be logged in there as the page admin, and do your testing in a different browser (Internet Explorer or Safari) logged in as the test user. Then you can just switch between browsers to edit and test.

To “Unlike” a Facebook Fan Page you’ve Liked, click on the Wall tab and scroll down to the last links in the left column and you’ll see the “Unlike” link:

Part 1 | Keep it Simple
Part 2 | Don’t Go Alone
Part 3 | Think Like Them
Part 4 | Get Clicks!
Part 5 | Build Relationships
Part 6 | Promote Your Business Website
Part 7 | Keep it Fresh
Part 8 | Test Drive
Part 9 | Analyze
Part 10 | Keep Learning

In writing this short and simple online business website guide, I had to make an assumption. That assumption is that you don’t have a web site now (and know you desperately need one) or you already have a web site that you’re tired of apologizing for because you know it’s outdated and not to your standards. If you fall into one of those two categories, read on!

Take a few minutes and review the Creating a Business Website series. When you’re finished, you’ll have the best possible advice for saving time and money when it comes to creating or recreating a professional web site and online presence.

You’ll learn how to make the process easier on yourself, how much web design costs, how to get help, how to create compelling web content, how to be found on Google, how to utilize email marketing, how to get more people to visit your business website, how to incorporate a blog to greatly increase your online visibility, maintenance made easy, an introduction to Google Analytics (web stats), and the most popular resources to maximize for the most effective small business website.

Part 1 | Keep it Simple
Part 2 | Don’t Go Alone
Part 3 | Think Like Them
Part 4 | Get Clicks!
Part 5 | Build Relationships
Part 6 | Promote Your Business Website
Part 7 | Keep it Fresh
Part 8 | Test Drive
Part 9 | Analyze
Part 10 | Keep Learning

In writing this short and simple online business website guide, I had to make an assumption. That assumption is that you don’t have a web site now (and know you desperately need one) or you already have a web site that you’re tired of apologizing for because you know it’s outdated and not to your standards. If you fall into one of those two categories, read on!

Take a few minutes and review the Creating a Business Website series. When you’re finished, you’ll have the best possible advice for saving time and money when it comes to creating or recreating a professional web site and online presence.

You’ll learn how to make the process easier on yourself, how much web design costs, how to get help, how to create compelling web content, how to be found on Google, how to utilize email marketing, how to get more people to visit your business website, how to incorporate a blog to greatly increase your online visibility, maintenance made easy, an introduction to Google Analytics (web stats), and the most popular resources to maximize for the most effective small business website.