This is a relatively cool and easy application that you can add to your Facebook page to change the content depending on the status of the visitor to the page.  Follow along and you too can make your page cool like the pros!

For an example of this effect, go the http://www.facebook.com/timeoc and check out the green image that reads “Click ‘Like’ Above!”.  If you then click the “Like” button (which you should probably do anyway because we want you to like us!), you will see the image change to a yellow image that reads “Thanks for liking us!” and gives an address at the bottom to go to the meetup page. Then, if you click anywhere in the image you are taken to the TIMEOC meetup page in a new window.  Neat!

Here are the steps to follow.  Please let me know in the comments if they are too “techie” or hard to follow. *DISCLAIMER* Facebook makes A LOT of changes ALL OF THE TIME.  If some of these steps don’t work or seem confusing, please post in the comments and I will do my best to update the post.

1. It may seem obvious but you will first need a Facebook account.  Chances are you already have a profile page for yourself, but if you don’t, head over to http://www.facebook.com and sign up.
2. Next you will need to create a Facebook Page (help found here). Make sure you are logged into your Facebook account and then click on this link. From here on I will refer to your Facbeook Page as FB Page so as not to confuse it with a regular web page.
3. Go through the process for creating an FB Page. You are now ready for some dynamic content! ***TIP*** If you keep forgetting where your pages are on your profile, you probably just need to click on “Home” in the upper right of your Facebook page, then your pages will appear in the left column.
4. When looking at your FB Page, in the upper right corner of the screen click on the “Edit Page” button.  If you don’t see this button, it may be because you have some note from Facebook telling you how ot make your pages better.  Close that notice and the “Edit Page” button should appear.
5. Now in the left column, click on “Apps”.  You see a list of the added Apps to your account.
6. Up in the top Search box, type in “Static FBML” (without quotes). If there are several, use the one with over 100 million monthly users. Go to that page and on the lower left side click “Add to my page”.  This will add the static FBML App to your page.  FBML stands for Facebook Markup Language and its kind of like HTML for Facebook.
7. A box should pop up showing your FB Page with an “Add to Page” button beside it. Click that button, then “Close” at the bottom to close this window.
8. Next, click on the back button on your browser to return to the “App” page. Find the app “FBML” and click on the “Go to App” right beside the FBML icon.
9. This takes you to the app edit page. You are now ready to put your content in.  First, of course you will need to actually have content.  I made two images for TIMEOC, a “pre-Like” image and a “Like” image.  If you like the starburst effect in the background, go here to see how that is done in Photoshop. I’ll assume at this point you have both images available AND you have put them on a web server somewhere so you can access them.  If you want to test this process fro the time being, you can use my images temporarily until you figure out your own solution.
10. You are now on the “Edit FBML” page. Make sure that Box Title is something you want to appear both at the top after your page name and in the left column to identify this page.
11. In the FBML box, copy the following and paste it into the box (don’t include the *’s, just what is between them: **************************************************
12. <table height=”539″ width=”520″>
    <tr><td background=”http://blog.timeoc.com/facebook/timeoc/TIMEOCFacebookPreLike.jpg”>
    <fb:visible-to-connection>
    <img src=”http://blog.timeoc.com/facebook/timeoc/TIMEOCFacebookLike.jpg”>
    </fb:visible-to-connection>
    </td>
    </tr>
    </table>
13. *************************************************** For those that know html, you are probably saying “Tables, are you kidding? No one does TABLES anymore!”  You are right.  But if you don’t know why you should be offended on a technical level at this point, go ahead and just use this html.  If you know CSS and html well enough, then put your own in and send me your html so I can add it here. Consider it extra credit.  Anyway, remember to swap out my images and put yours in where you see the paths in the html.
14. Even though the html shown here points to my images, it will work on your page.  Isn’t the internet wonderful?
15. Click on Save Changes at the bottom, then the name of your FB Page at the upper left to get back to your page.
16. You should see an App listed on the left with the name you typed into “Box Title” before. I use “Like”, but you can you whatever you want. Click on the App and see your new content in all of its glory.  You will probably see the “Like” version of the content.
17. You will need to edit the FB Page now, and depending on which section you are on, you will see either an “Edit Page” button at the top right or an “Edit Info” link in the top center. Click whichever one you see.
18. In the left column, click on “Manage Permissions” to get to that section.
19. Find the “Default Landing Tab” property about half way down the page. Change it to your App Name (what you filled in to Box Title).
20. Voila!  Test, test test.  Check it out from a browser where you are not logged in to Facebook.  Have a friend try it! Have fun with it.  And please remove my images if you used them.  I appreciate the free advertising but you really should use your own stuff. 😉

Please post any comments below and GOOD LUCK!