Good news, everyone! My compulsive need to make websites and write content has struck again, this time resulting in my new site, FBMHell.Com, which I hope will evolve into a great resource for Facebook developers, whether you’re an app developer or fan page designer.

It’s literally just been launched, so I’m looking for your help. I’ll be going through some older posts and rounding up the questions that seem to come up often and writing up answers for the new site, but if there’s a burning question you’ve had for a while and haven’t been able to find an answer for, let me know in the comments.

One that comes up often is whether or not you can include an IFRAME in a tab, so don’t ask that one It’s already on deck.

I’m looking for all kinds of questions, ranging from the complicated to the more basic, so don’t be afraid to ask. More complicated tutorials (similar to what I’ve posted in the past regarding app development and complex mini-sites on tabs) will take a little longer, so be patient, and remember to subscribe to the RSS feed so you’ll get all the latest posts.

Categories will be added as content demands, of course.

I really want this site to be a great resource for everyone (including myself, as a repository of stuff I know works), so I’m looking forward to your feedback!

Also keep your eyes peeled for the launch of FBMLWizard, a drag+drop Facebook fan page tab builder.  I’ll update you here when it’s ready.

Possibly related posts:

1. Introducing TehAwesome.Net While Snipe.Net covers lots of tech topics and reviews, I’ve...
2. Want to Set a Default Landing Tab on Your Facebook Fan Page? It’ll Cost You You’re gonna love this. And by love I mean be...
3. Extending Facebook Static FBML Tabs with Dynamic Content This tutorial walks you through how to use DynamicFBML to...

You’re gonna love this. And by love I mean be filled with rage. I started receiving emails from people today, frustrated that they could no longer set a specific tab as their default landing tab in Facebook. Everyone assumed it was a bug. It’s not.

UPDATE May 20, 10:45AM: Facebook has actually apologized and done a complete 180 in the last 12 hours and they have reversed this decision. I’m leaving the original post up for reference, but as of right now, they have reverted back to the original way it worked, where any page admin can set default tabs, regardless of the size of their fan base.

From their developer forums:

As of last night, we’ve removed the recently-added authentication requirement for setting custom landing tabs on Pages. The requirement was instituted as part of a Pages quality initiative, and we apologize for the inconvenience this caused to our developer and business community. We are re-investigating the situation, and will not make any further changes without first giving our community standard notice and lead-time.

Thanks for all your feedback,
Matt Trainer

The Facebook platform is known for being exceptionally buggy, so most “me too”ers assumed it was a bug and patiently awaited a bug fix confirmation from Facebook. The question went unanswered for a day, until finally a Facebook employee dropped this bombshell.

Hello all,

We apologize for not messaging this earlier. Facebook recently made a change requiring that Pages be authenticated before enabling the ability to set a landing tab beyond Wall or Info. To be eligible for authentication, a Page must have greater than 10k fans or the Page admin must work with their ads account manager. If you are already working with an account representative, please contact that representative to begin the authentication process. If you do not work with an account representative, you can use this contact form to inquire about working with an account representative.

Also, for advertisers who don’t have a representative or 10k fans, and want to run ads and land users on a specific tab, you can still do so with standard Facebook ads by making their Destination URL as the URL incl. your tab. Unfortunately, this currently will not work with “Fan” ads.

Thanks,
Matt Trainer

What this means is that Facebook Fan Page admins can no longer specify a default landing tab for their fan page UNLESS they have 10k or more fans, OR they “have an account manager”. Having an account manager sounds great, right? The thing is, you have to spend at least $10k in Facebook advertising before they’ll even talk to you, let alone give you an account manager. That contact form leads to the “how much money are you willing to spend with us” form, and if your answer is less than $10k, don’t expect them to help you.

So once again, the little guy gets screwed. It started in November with their charges to their contest/promotional guidelines, which were also rolled out quietly with little or no notification to developers or users, which dictated something very similar. Certain types of promotions now have to be approved by an account manager. Only you don’t get an account manager unless you spend upwards of $10k in media buys.

Note that it appears as though this is only effective moving forward. If you’ve already set a default tab on your Facebook Fan page, they’re not going to take it away from you. At least not at this point. But as of yesterday, if you hadn’t already set a default tab, you won’t be able to do so without meeting one of the 10k requirements mentioned above.

I’m not even going to talk about the recent Facebook privacy issues. This isn’t the post for it, and honestly, I don’t have the energy to open that gigantic can of worms right now. But with those recent changes on top of this, I have to ask WTF they are thinking over there. Fuck you, Facebook.

Possibly related posts:

1. Static FBML: Not Every Facebook Fan Page Needs An Application You don’t always need a custom application for your Facebook...
2. Google Style Page Numbering (with x per page and y page numbers displayed) With just a few modifications, we can create a piece...
3. Unclutter Your Facebook Feed: Set FB Lite As Your Default Whether you’re on Facebook for fun or for work, chances...

In a previous tutorial, you learned how to Extend Facebook Static FBML Tabs with Dynamic Content, and now we’re back to show you how to take it even further by creating sub-nav tab navigation within your Static FBML microsite using only DynamicFBML.

The previous tutorial, I walked you through how to use clicktohide and clicktoshow to enhance your Facebook Fan Page tab. By utilizing these built-in Facebook functions, we can get creative and make image galleries, slide shows, or micro-sites within a single Facebook Fan Page tab. This is especially handy if you’re trying to fit a lot of content into a single tab, but don’t want to have one long scrolling mess of a tab. While hand-written FBJS is always an option, Facebook makes it really easy to accomplish this with only the most basic coding skills.

(That said, if you haven’t read the first tutorial, it will probably be helpful for you to read that one first before continuing with this one – I assume you understand the concept of clicktohide and clicktoshow here.)

So what you’ll end up with is a single Facebook Fan Page tab that has a “main” navigation that switches content within that single tab, and an additional subnavigation menu that switches content within that one section of the tabbed content. It sounds more confusing than it actually is – click here for a demo.

This is what we created in the previous tutorial:

And this is what we’re going to create in this one:

Similar to the example in the first tutorial, we’re going to do all of this magic simply by using CSS, HTML and the clicktohide and clicktoshow functions. In fact, what we’re doing here isn’t that different at all from what we did the first time, but I get a metric-assload of emails asking me how to to it, so here it is.

<!-- Now set the main tab navigation -->
<a href="#" clicktoshow="nav1" clicktohide="nav2,nav3">Home</a>
<a href="#" clicktoshow="nav2" clicktohide="nav1,nav3">Demo Tab</a>
<a href="#" clicktoshow="nav3" clicktohide="nav1,nav2">Locations</a>
<br />
<br />

<!-- start the div for the first main nav tab - nav1 -->
<div id="nav1">
	<p>Home content</p>
</div>
<!-- end the div for the first main nav tab - nav1 -->

<!-- start the div for the second main nav tab - nav2 -->
<div id="nav2" style="display: none;">
	<h1>Example Tabbed Subnav in Microsite</h1>
	<hr />
	<a href="#" clicktoshow="tab2subnav1" clicktohide="tab2subnav2,tab2subnav3">Subnav One</a>
	<a href="#" clicktoshow="tab2subnav2" clicktohide="tab2subnav1,tab2subnav3">Subnav Two</a>
	<a href="#" clicktoshow="tab2subnav3" clicktohide="tab2subnav1,tab2subnav2">Subnav Three</a>
	<hr />
	<br />

	<!-- start the div for the first subnav tab - tab2subnav1 -->
	<div id="tab2subnav1">
		<p>Subnav one content</p>
	</div>
	<!-- end the div for the first subnav tab - tab2subnav1 -->

	<!-- start the div for the second subnav tab - tab2subnav2 -->
	<div id="tab2subnav2" style="display: none;">
		<p>Subnav two content</p>
	</div>
	<!-- end the div for the second subnav tab - tab2subnav2 -->

	<!-- start the div for the third subnav tab - tab2subnav3 -->
	<div id="tab2subnav3" style="display: none;">
		<p>Subnav three content</p>
	</div>
	<!-- end the div for the third subnav tab - tab2subnav3 -->
</div>
<!-- end the div for the second main nav tab - nav2 -->

<!-- start the div for the third main nav tab - nav3 -->
<div id="nav3" style="display: none;">
	<h1>Locations</h1>
	<p>Locations content</p>
</div>
<!-- end the div for the third main nav tab - nav3 -->

And that’s it. That’s the whole code snippet. For clarity, I have stripped out all of the extra styling, text and fancy button treatments. If you want the exact code used for the demo, scroll down further in the page – I’ve included that as well.

I’ve commented the code pretty liberally, but just to recap what we’ve done, we created the normal main microsite divs, nav1, nav2, and nav3. These are the “buckets” that contain the top-level “tabs”, same as we did in the first tutorial. What we’ve added is a second, smaller set of buckets and corresponding nav. We use the exact same method of clicktohide and clicktoshow – the only different is what we’ve name the smaller bucket divs, and where they live. The div structure works out to be something like this:

[nav1 div]
– nav 1 content
[/nav1 div]

[nav 2 div]
– [subnav 1 div]
– subnav 1 content
– [/subnav 1 div]

– [subnav 2 div]
– subnav 2 content
– [/subnav 2 div]

– [subnav 3 div]
– subnav 3 content
– [/subnav 3 div]

[nav3 div]
– nav 3 content
[/nav3 div]

As promised, here’s the exact code snippet, line by line, that was used to create the demo page.

<!-- let's set the style for those fancy buttons -->
<style type="text/css">
.awesome, .awesome:visited {
	background: #222 url(http://www.snipe.net/wp-content/uploads/2009/10/alert-overlay.png) repeat-x;
	display: inline-block;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
}

.awesome:hover {
background-color: #111; color: #fff;
}

.awesome:active {
top: 1px;
}

.awesome, .awesome:visited, .medium.awesome, .medium.awesome:visited {
font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
background-color: #630030;
}

.large.awesome, .large.awesome:visited {
font-size: 14px;
padding: 8px 14px 9px;
}

h1 {
color: #a9014b; font-size: 26px;
}

p {
font-size: 15px;
}
</style>

<!-- Now set the main tab navigation -->
<strong><a href="#" clicktoshow="nav1" clicktohide="nav2,nav3" class="large awesome">Home</a></strong>
<strong><a href="#" clicktoshow="nav2" clicktohide="nav1,nav3" class="large awesome">Demo Tab</a></strong>
<strong><a href="#" clicktoshow="nav3" clicktohide="nav1,nav2" class="large awesome">Locations</a></strong>
<br />
<br />

<!-- start the div for the first main nav tab - nav1 -->
<div id="nav1">
	<img src="http://www.snipe.net/wp-content/uploads/2009/10/alison-fixed1.jpg" align="right"/>
	<h1>Default Content </h1>
	<p>Click on the "Demo Tab" above  to see an example of
	multi-level tabbing in a purely FBML microsite.
	With a little practice and patience, you could
	recreate a fairly large website using this method.
	(The content of these subnavs are quotes from
	Monty Python and the Holy Grail, for your entertainment.)</p>
</div>
<!-- end the div for the first main nav tab - nav1 -->

<!-- start the div for the second main nav tab - nav2 -->
<div id="nav2" style="display: none;">
	<h1>Example Tabbed Subnav in Microsite</h1>
	<hr />
	<strong><a href="#" clicktoshow="tab2subnav1" clicktohide="tab2subnav2,tab2subnav3" class="medium awesome">Subnav One</a></strong>
	<strong><a href="#" clicktoshow="tab2subnav2" clicktohide="tab2subnav1,tab2subnav3" class="medium awesome">Subnav Two</a></strong>
	<strong><a href="#" clicktoshow="tab2subnav3" clicktohide="tab2subnav1,tab2subnav2" class="medium awesome">Subnav Three</a></strong>
	<hr />
	<br />

	<!-- start the div for the first subnav tab - tab2subnav1 -->
	<div id="tab2subnav1">
		<p style="color: red; text-weight: bold;">Hey, this
		is the content for <strong>Subnav One</strong>!
		You can put photos, text, even videos in here.</p>
		<p>Bravely bold Sir Robin rode forth from Camelot.
		He was not afraid to die, oh brave Sir Robin.
		He was not at all afraid to be killed in nasty ways,
		brave, brave, brave, brave Sir Robin.
		He was not in the least bit scared to be mashed
		into a pulp, or to have his eyes gouged out,
		and his elbows broken. To have his kneecaps
		split, and his body burned away, and his limbs
		all hacked and mangled, brave Sir Robin.
		His head smashed in and heart cut out, and his
		liver removed, and his bowels unplugged, and
		his nostrils raped and his bottom burned off and his penis... </p>
	</div>
	<!-- end the div for the first subnav tab - tab2subnav1 -->

	<!-- start the div for the second subnav tab - tab2subnav2 -->
	<div id="tab2subnav2" style="display: none;">
		<p style="color: blue; text-weight: bold;">Hey,
		this is the content for <strong>Subnav Two</strong>!
		You can put photos, text, even videos in here.</p>
		<p>When I first came here, this was all swamp. Everyone
		said I was daft to build a castle on a swamp,
		but I built in all the same, just to show them. It sank
		into the swamp. So I built a second one.
		That sank into the swamp. So I built a third.
		That burned down, fell over, then sank into
		the swamp. But the fourth one stayed up. And that's
		what you're going to get, Lad, the strongest castle in
		all of England. </p>
	</div>
	<!-- end the div for the second subnav tab - tab2subnav2 -->

	<!-- start the div for the third subnav tab - tab2subnav3 -->
	<div id="tab2subnav3" style="display: none;">
		<p style="color: green; text-weight: bold;">Hey,
		this is the content for <strong>Subnav Three</strong>!
		You can put photos, text, even videos in here.</p>
		<p>Follow. But. Follow only if ye be men of valour,
		for the entrance to this cave is guarded by a
		creature so foul, so cruel that no man yet has fought
		with it and lived. Bones of full fifty men
		lie strewn about its lair. So, brave knights, if you
		do doubt your courage or your strength,
		come no further, for death awaits you all with
		nasty, big, pointy teeth. </p>
	</div>
	<!-- end the div for the third subnav tab - tab2subnav3 -->
</div>
<!-- end the div for the second main nav tab - nav2 -->

<!-- start the div for the third main nav tab - nav3 -->
<div id="nav3" style="display: none;">
	<img src="http://www.snipe.net/wp-content/uploads/2009/10/alison-grr.jpg" align="right"/>
	<h1>Locations</h1>
	<p>This is the locations "page". You can put text, images, even video here.</p>
</div>
<!-- end the div for the third main nav tab - nav3 -->

The above is the exact code snippet I used to create that demo page, specifically. (In other words, please don’t email or comment asking me for the source. This is ALL there is, including the yummy button styling.)

As long as you properly nest your divs (and use valid HTML with no wonky or open tags), this will work every single time. The names of the divs don’t matter, as long as they match the clicktohide/clicktoshow div names you’re specifying in the nav.

If it doesn’t work when you try it, and you’re 100% sure you copy+pasted exactly from this tutorial, try again later. Sometimes Facebook has issues, and the only way to work around it is to wait until they’re not having issues.

I’d like to once again remind you that you’re not at all restricted to using the clicktohide and clicktoshow functions in the way I’ve outlined them here. My goal isn’t to show you the only things that are possible , but rather to get you familiar with the concepts so that you can use your own imagination and apply them in unique and exciting ways.

If you’ve done something cool with clcicktohide/clicktoshow (and let’s not forget clicktotoggle from the last tutorial), make sure you drop a link in the comments. I love to see what other people are working on. It makes my own raging Facebook development Hell a little easier to bear.

Possibly related posts:

1. Extending Facebook Static FBML Tabs with Dynamic Content This tutorial walks you through how to use DynamicFBML to...
2. Static FBML: Not Every Facebook Fan Page Needs An Application You don’t always need a custom application for your Facebook...
3. Creating a Multi-Level Listbox in PHP/mySQL This lets you create a nested multi-level category menu through...

Can you use Google Analytics on Facebook fan pages and fan page walls? You betcher sweet ass you can.

If you’ve ever created a Facebook fan page, you’ve probably realized that the “reporting” that Facebook provides is basically useless. Because Facebook limits the Javascript you can use on Fan Pages, you cannot implement your own analytics packages on fan pages. Or at least, that’s what they want you to believe.

For Facebook applications, there is an FBML tag that will allow you place your Google Analytics code on the canvas page – but this FBML will not work on fan pages, application tabs, or anywhere other than the canvas page.

Fortunately, implementing Google Analytics on your Facebook fan page is possible, with a little PHP trickery. The basic gist of the workaround is to include your Google Analytics code as an image instead of placing the javascript into the FBML code.

Rather than writing something from scratch, it makes more sense to direct you to a post on the Webdigi blog that offers a free set of PHP scripts that will let you do exactly that.

The long and short of what the guys over at Webdigi are doing with their scripts is simply to call a PHP script instead of an actual image file in the <img src> code. This is not unlike the “tracking pixels” that are often used in email newsletters, since Javascript is not an option there either. So the concept isn’t new, but it’s not common knowledge that it works on Facebook.

The PHP script they are calling contains the Google Analytics code, and accepts parameters so that you can re-use the script on multiple fan pages (or different pages in an application) simply by setting different parameters.

When your Static FBML tab, application tab or non-canvas app page loads, it loads that “image” as part of the page. That “image” then pings the PHP script, which pings Google Analytics. This could be adapted for other reporting systems as well, using the same concepts.

The guys do a nice job with their script, and they even offer a wizard that helps you figure out what you need to put where.

I had rigged up a script a few months ago, but I never really had the time to package it for the general public, make it easy to configure, and so on, so go ahead and check out their script package.

Using this method, you’ll even be able to set up funnels and goals for your Facebook fan page stats, and Webdigi offers a great breakdown on how to tell the difference between fan and non-fan activity on your fan pages in your reporting.

Enjoy!

Possibly related posts:

1. Static FBML: Not Every Facebook Fan Page Needs An Application You don’t always need a custom application for your Facebook...
2. No, No – Let Me Google That For You Have you ever had someone ask you the answer to...
3. Compare Website Stats Using Google Trends Google Trends has a newly-added ability to show unique visitor...

I’m a big fan of OpenID, and the concept of a unified login system, but the implemention of OpenID on many of the websites that use it is often miserable. This article can simplify your OpenID login experience.

NOTE: If you want to skip all my chatter and explanation and just get to the code, check out Jeff Atwood’s post on the StackOverflow blog. It’s much less verbose, but probably not ideal for people unfamiliar with OpenID.

What is OpenID?

OpenID is “a decentralized authentication protocol that makes it easy for people to sign up and access web accounts”. That means if you create an account on any website using OpenID (such as Google, Yahoo, Flickr, MySpace, AOL, WordPress.Com, LiveJournal, Get Satisfaction, and more recently Facebook, to name just a few), you can use that account to login to any website using OpenID. It attempts to simplify logging into websites by using one account, and therefore not having to create a new username and password set for every website on which you wish to create an account.

Many studies have shown that the average web user feels overwhelmed by the number of usernames and passwords they have to remember, which means they often end up using very simple paswords that are easy to remember, and often use the same password for multiple websites.

This is, of course, a big no-no. If one of the websites gets compromised and user login data is exposed, malicious parties now potentially have access to all of the websites for which the user has used the same password. So if my BigButtPorn.Com account gets hacked, and I use the same login for my bank, my banking login credentials are now compromised. Unifying a login makes user registrations easier, so people will arguably be more apt to use a strong password for that one OpenID account. (I should mention that I have no idea if BigButtPorn.Com exists, or if it uses OpenID. As such, the example above should not be considered an endorsement for BigButtPorn.Com, or any other kind of butt porn, for that matter.)

Incidentally, in this day and age, there is absolutely no reason for anyone to still be using the same password for ANY two websites. Thanks to applications like 1Password, hard-to-guess passwords are automatically generated and stored for easy access, and every popular web browser allows you to store passwords. Remembering passwords isn’t even something people should be concerned with.

How Does it Work?

If I have a Livejournal account where my journal address is snipeyhead.livejournal.com and I want to use my LiveJournal OpenID to login to a different website, I would enter snipeyhead.livejournal.com in the OpenID url field of the site:

(Alternatively, if the OpenID provider’s icon is listed, as LiveJournal’s is above, I could login without knowing my OpenID url. Most OpenID logins will give you the option of selecting which service you’d like to use, or manually entering your OpenID url.)

If this is the first time I’m using this OpenID account to login to this particular website, I’ll be taken to my OpenID provider’s website (in this example, Livejournal.Com) and I’ll be asked if I want to allow the website to use my OpenID account to authenticate. I will then confirm this, and be taken back to the original website I’m trying to login to.

Pretty simple, right? Unfortunately, this is often not as straightforward as it seems, not because of OpenID itself, but because of the way many websites implement their OpenID system.

Where it Gets Wonky

The way many websites implement OpenID can be utterly maddening, if you have more than one OpenID account – which you probably do.

I was recently on the UXExchange website and was nearly apoplectic with rage as I tried OpenID after OpenID account. I know I have an account there. I have had an account there since the day they launched. But I have NO idea which OpenID I created my account with.

After the 5th try, I gave up and realized I’d have to create a new account. This pissed me off for a few reasons, not the least of which being that in this particular community, prior community engagement (the number of questions you’ve posted and answered, etc) establish your rank. By creating a new account, I’m effectively seen by the community as a newbie, and I’m enough of a nerd that stuff like that matters to me.

Ironically, UXEchange is a usability and information architecture community. I know that I can email them to consolidate my accounts, and I probably will, but this experience really helped underline how easy it is to screw up the user interface for OpenID.

In short, the problem becomes remembering which out of the collection of OpenIDs you have is the one you’ve used to initially create an account with a particular website.

Making it a Little Easier

To use OpenID without losing your mind, you have a few options. The easier would be to decide that you will only ever use one specific OpenID to login to third-party websites, and leave it at that. The problem I have with that is that mainstream adoption of OpenID has happened over a very long period of time, so I may have started off with only LiveJournal as an OpenID account, but then gradually Google, Blogger, Myspace, etc added OpenID support, so I decided that I’d rather use one of the newer ones instead of my LiveJournal account. This is how things got fragmented and confusing for me, and I would assume other people as well.

Fortunately, there is a little known feature of OpenID called delegation that can help save your sanity. If you have your own website with it’s own domain name, you can delegate your own domain name to act as your OpenID.

I decided to start from scratch. I don’t know if I’ll always have my LiveJournal account, I don’t know how much I trust Google anymore, I hate MySpace, I don’t use Blogger, and so on. I created an account at myopenid.com, a very simple OpenID provider that is easy to remember and offers persona managament.

A 20-second registration later, I was set up with snipe.myopenid.com as my new OpenID identifier.

To enable my domain, snipe.net, to act as a delegate for MyOpenID.Com, I added the following to the header of Snipe.Net:

<link rel="openid.server" href="http://www.myopenid.com/server"  />
2.<link rel="openid.delegate" href="http://snipe.myopenid.com/" />
3.<link rel=”openid2.provider” href=”http://www.myopenid.com/server” />
4.<link rel=”openid2.local_id” href=”http://snipe.myopenid.com/” />

Now, instead of trying to remember which OpenID provider I used, I use ‘snipe.net’ as my OpenID manual url, and it automatically knows to use my account at MyOpenID to authenticate. Since I’m the only one that has control over Snipe.Net, I’m the only one that can delegate Snipe.Net as snipe.myopenid.com.

So that’s all there is to it. I have heard that delegating using Google and Yahoo is tricky, if not impossible, but I haven’t looked into it. I personally prefer to avoid letting either of those companies have too much of a reach over what I’m commenting on and where.

Possibly related posts:

1. New Facebook Phishing Attempts Looks like a new round of phishing attacks are well...
2. My forum domain banlist I keep my list of banned email addresses and domains...
3. Is IMAP/POP3 Gmail or Gtalk periodically rejecting your password? I have run into this many times: my Gtalk password...

Whether you’re on Facebook for fun or for work, chances are your newsfeed is crammed full of inane application notifications that make it hard to actually find the real content you actually want to see from your friends.

UPDATE: Sadly, in April 2010, Facebook shut down FB Lite so this article is now moot. It was a good run while it lasted.

Your Facebook friends are total tools with entirely too much free time on their hands. So are mine. If you want to continue to use Facebook but bypass all of the crap that fills your Facebook homepage newsfeed, you’re in luck.

Facebook Lite?

A few months ago, Facebook introduced Facebook Lite – a pared down version of Facebook for people who were frustrated with the ever-sluggish load time of the normal Facebook homepage. This lite version loads fewer javascript libraries and is blazing fast compared to to dismal experience that regular Facebook.

The speed increase is great – but there is an awesome added bonus that isn’t widely publicized:

Using Facebook Lite, you will never see another application notification again.

That’s right. Facebook Lite does not display application notifications. At all. Which is awesome-covered awesome with awesome filling.

To see it in action, just point your browser to http://lite.facebook.com.

But wait – there’s more.

Kiss Those Application Notifications Goodbye For Good

Even more awesome, there is a way to set Facebook Lite as your default view, so that every time you go to your Facebook homepage newsfeed, it loads the Lite version instead of the Clusterfuck version. Here’s how to do it:

1. Go to http://lite.facebook.com/settings/defaultsite/.
2. Select Facebook Lite from the radio boxes.
3. Click “Save”.
4. Rejoice.

Set Facebook Lite as your default in your settings

That’s all there is to it. Honest. You’re free. You’re welcome.

Granted, this trick won’t stop your friends from posting a thousand pictures of their cat (yeah, guilty) or drunkenly updating their status in horrifyingly graphic detail that makes you want to claw your eyes out – but I don’t think there’s an app for that yet.

Possibly related posts:

1. Want to Set a Default Landing Tab on Your Facebook Fan Page? It’ll Cost You You’re gonna love this. And by love I mean be...
2. Planning a Facebook Application: Part Two I know I promised you that we’d get into some...
3. Planning Your Facebook Application This is part one of a series – the technical...

Because it’s New Years Eve, and I’m kind of a morbid asshole, I thought I’d harsh your alcohol-induced buzz with some grim reality by asking the question: What happens to your online content when die?

Sure, there are online memorials through which your family can set up a memorial site that will be hosted until the end of time (or until the company hosting it goes out of business), but what about the online content you yourself have created? For some of you, “online content” might only mean your Facebook, FriendFeed, Twitter or (God forbid) Myspace accounts. For others who are more tech savvy and prolific, this could mean literally dozens of websites with hundreds or thousands of blog posts, tutorials, e-books (hah!), photos, slideshows, and so on.

Because I am not aging gracefully, and because what I would consider my life’s work lives almost entirely online in the ether, I think about this a lot. Probably more than is healthy, but that’s what booze is for.

This question is more complex than it seems, and becomes increasingly complicated if you have your own independent websites, as I’ll discuss later in this post.

Social Networking Sites

In the case of social networking sites, in most cases, your account will simply linger online with no new posts unless you have given a friend or family member your login information through which they could post a death notice and/or delete your account. In the case of MySpace, there are websites such as MyDeathSpace that allows you to memorialize a recently deceased friend or family member’s MySpace account.

The exception to this (so far) is Facebook. When you join the choir invisible, friends or family can fill out a form to report a profile as deceased, which requires knowledge of the person’s date of birth, email address used for the account, network, and full name. Once a profile has been set to ‘deceased’, friends may continue to post memorial notes on your wall, but you will not (or should not, anyway – I have found this to be buggy) show up in Facebook application invites, etc.

If you have a paid account of any kind, for example with Flickr or LiveJournal, your account will obviously revert to unpaid when the yearly renewal fee is not paid. Even so, unless you have provided instructions and your login information to someone still alive, the accounts will remain available and untouched unless a family member petitions to have them deleted.

Emails from Beyond the Grave

If you’re the kind of control freak that wants to have a say in who gets notified about your death and what that message says (no shame in it – I *am* that freak), services such as GreatGoodbye.Com or MyLastEmail will let you prepare a message (including photos and video) and recipients in advance. A code is generated that you give to a trusted friend or family member, and when you finally lay down for your eternal dirtnap, that person activates the code and the emails get sent.

I’m a little torn on this. While I want to make sure that I get a chance (even if posthumously) to tell the people I love how much I loved them, not all of my loved ones have email, and frankly, it still comes off a little creepy to me.

Of course, if you’re a passive-aggressive dick, you could use a service like this to get the final digs in on someone you weren’t very fond of. You will absolutely have the last word, although honestly, if that kind of thing is worth the cash to you, the world is probably better off without you.

Dead Man’s Switch

A digital dead man’s switch works exactly like the dead man’s switches in movies, only instead of blowing yourself and the hostages up if your finger comes off the button, your carefully crafted post-death plan is triggered.

As Tony Geis explains in an interesting article from NPR entitled Dead Man’s Switch: CC Me From The Other Side:

“I concocted the idea one day when I was almost hit by a car. A program running on a couple of my servers supervises my online presence in various ways. It notices if I post on Facebook, Twitter, my blog, etc., log into any of my servers, send an e-mail, etc. Things like that. If it becomes apparent that I haven’t been around in quite some time, it ‘unlocks’ and a trusted individual can activate it. When it is activated, various trusted individuals will be sent e-mails explaining the situation and be granted access to my accounts.”

Geis rigged his own system as an alternative to using a service like GreatGoodbye, but not everyone will have that level of technical skill, so perhaps a service like GreatGoodbye (or others) would be a good idea if only to email your selected, trusted contacts your login information and instructions in the event of your passing.

According to Forbes magazine, if you’re serious about keeping your online presence going you should appoint an executor, somebody who’ll handle your affairs when you’re gone. Leave him or her your logins and other key information, and if there’s stuff you’d rather the family didn’t see you can arrange for the executor to delete specific content from your computer or online accounts.

Speaking of deleting your social media profiles, website SuicideMachine helps you do just that. It was recently featured on Lifehacker.Com, so if it’s not responding quickly – or at all – that’s why. Just give it a little time and check back when the crushing force of the Lifehacker effect has subsided.

Incidentally, although we’re discussing the topic of actual IRL death it should be noted that SuicideMachine’s name refers to killing off on your social networking profiles. It’s not advocating suicide (that I know of) and isn’t positioned to be a tool to delete your profiles after you’ve passed on, but the combination of SuicideMachine and the Dead Man’s Switch might work in a will to make it easier for your family to delete your online presence if that is your final wish. It works with most of the popular social networks, and can really cut down the time it takes to nuke them all. Sadly, Facebook is being douchey and blocking their IP, so the Facebook integration aspect isn’t functioning right now.

Challenges

As I mentioned, I’ve thought about this a lot. While some of the solutions mentioned above are better than nothing, I think they overlook some less-obvious issues – or at least issues that come up when your online presence is a little more complicated.

Multiple-Personalities

In my case, I have a robust online “persona” on Twitter and other social networks (even this blog) that are very true to my personality. I’m snarky, occasionally funny and mean, and I see my interaction online as a bit of a performance art. I also, however, run a very serious non-profit organization that I founded 8 years ago. Clearly, the messaging I might wish to send to my Twitter friends would likely be different than the messaging I would send to my colleagues through my non-profit work. (Probably slightly less swearing. Probably.) In short, I maintain a professional appearance for the benefit of my organization, as one would expect of the President of any serious company. Trying to sort out the nuances of which group gets what messaging would be complicated and challenging, and the very last thing I would want would be to screw that up and send a message intended for my personal friends to my organization’s list. I can see it now: “See you in hell, bitches! I’ve brought the beer, you bring the hookers and blow!”

Real-Life Friends? Online Friends?

Another interesting challenge is that with social networks evolving to the point where they are used to connect with people you didn’t know before, the lines between “real life friends” and “online friends” becomes more and more blurred. Twitter is a great example of this. The followers on Twitter that I interact with frequently have become as much a part of my life (if not more so) as the “real life” friends I have known for decades but to whom I rarely manage to talk. I don’t even have most of their email addresses, and who knows if we’ll still be in touch by the time I actually kick the bucket. I certainly hope we will, but lives change, priorities change – the same things that make people spend less time with each other in real life get in the way of people spending time with their online friends.

Honestly, I wonder if the terms “online friends” and “real life friends” are even valid anymore. They’re friends. However, because we know each other through a venue that doesn’t provide email addresses, a simple email solution just won’t work if I want to include those friends in my final messages.

But because I know people from all of these different online communities and networks, many of whom are not in my address book, the solution here isn’t necessarily a technical one. Sure, I could create a Facebook/Twitter/MySpace application that allows a trusted family member to trigger your last wishes messaging to your friends in those communities, but what about the Godsmack forums, of which I have been a moderator for 8 years. Or the stone carving listserv I’m on, or the forums for my martial arts school? You get the picture. I would certainly want to include an announcement to them, but those systems don’t have an API that can be tapped into.

Parts of this process would still have to be very manual, which means putting that responsibility on someone I care about, just hours or days after I’ve died.

Passwords and Friends Change

The biggest challenge I see in the automated services solutions is that I change my password often, and use distinct passwords for just about every website I join. I also add new contacts to my address book, friends groups (and friends lists) weekly. Using the automated email workflow concept, I would have to manually update these contact lists every week for the rest of my life. Even as morbid as I am, I don’t want to be reminded of my own mortality that precisely every week for the rest of my life. Even setting website logins aside, the FTP account information for the dozens of websites I run or manage are frequently changed. Which brings me to the most difficult challenge for me, personally.

Non-Technical Friends and Family

As I mentioned, I’m a prolific (one might say habitual) website developer and writer. I can think of at least 10 websites I run that have content that requires constant curating, and probably 15 more that are static that I don’t want to disappear after I’m gone.

FTP login information could be granted to a trusted person by firing off an email with the login to my computer, and then instructions on how to login to my KeePass application that contains the usernames and passwords to my FTP and MySQL sites. But then what? I do not have any close friends or family that even know what FTP is, let alone how to handle creating a new post/page/whatever on each of the proprietary apps I’ve built. It certainly could be done, but that’s a metric assload of work to generate that much documentation, especially when you consider that I may well end up completely changing the software that powers these sites several times before I die. I don’t know about you, but I just don’t have that kind of time.

Moar Monies!

Naturally, hosting costs money. In order for my vast, craptacular works to live on beyond me, someone would have to be paying for it. I currently have it stated in my will that I wish for x amount of money to be allocated towards hosting fees to keep them alive for a specified amount of time.

Relevance and After Life Lifetime

This is less of a challenge than just something to consider while you’re making these types of plans. As much blood, sweat and tears as I’ve devoted to Snipe.Net over the past decade, will it really be relevant enough to keep alive 10 years from now? My tech tips, programing snippets and observations on social media will most likely not be relevant anymore. Keeping that in mind, if I died tomorrow, how long would be appropriate to keep this site alive? A few years maybe? Technology changes so quickly, it’s likely that anything I’ve written here will become obsolete within 6 months, let alone 10 years.

Privacy

In the example I gave above, I would be giving my laptop password to a trusted friend or family member (either informally, or formally by way of an executor), with instructions to access my KeePass file to unlock my other accounts. This also inherently means that the person I entrust with this information has access to all of my files, all of my past emails, all of my social networking private messages, and all of my pr0n. Uhm.. did I say pr0n? I meant banking information. Right.

So short of encrypting large sections of your drive, handing someone the keys to your hard drive is effectively handing them the keys to your entire life, including the bits you may not want to be made available to people you love. Speaking as someone whose step-father once asked her to help him cancel his porn account and remove the malware he got from a porn site, I can tell you there are parts of your private life that really, really, really should follow you to your grave.

Hmmm

As upcoming generations rely more and more on online services and communities and become closer to friends they only know from online who may have no connection to their “real life” friends, I think we’ll see more of this kind of thinking.

Perhaps more importantly, the generation of people whose entire life’s work is purely digital is starting to get older (like me), we will need a more organized, integrated way to handle our online legacies. The most significant, important things I have accomplished in my life so far will disappear if I don’t have a system in place – and right now, that system is kludgey at best, impossible to execute by the technically challenged people I love most at worst.

I do not have children (thank God), and do not want children. My digital creations, self-indulgent and rambling though they may be, are my legacy. They are the only thing I have that has a chance of living on beyond me.

As I’m writing this, I realize that there is currently no solution that does exactly what I need and want. Anyone with some VC capital want to start a company? I’ve already got a plan. Drop me an email if you’ve got some cash to blow.

Your Responsibility?

Is it weird to think about this? I don’t think so. I personally feel that just as it is responsible to have a will, it is responsible to leave your last wishes and instructions for your social networking profiles. Having had a few friends pass away in this digital age, I wish they had considered their social networking profiles in their last wishes. To your friends and family, it can be heartbreaking (and more than a little creepy) to see haunted by your profile on their friends list after you’ve passed. I lost a friend to suicide this time last year, and it took 4 months for Facebook to finally get the memorial status of his profile set up correctly. It was a painful daily reminder to say the very least. Not to mention that neglecting to make formal plans for your eventual death puts the burden of deciding what to do with your social networking accounts on the very people who are already grieving.

Happy New Year to you all. Stay safe, and consider adding a posthumous persona management plan to your resolutions list. What are your thoughts on this? Is it going too far? Not far enough? Do you already have a plan in place, or a pre-recorded “screw you, world!” video set to be published when you kick it? I’d love to hear about it in the comments.

Possibly related posts:

1. New Facebook Phishing Attempts Looks like a new round of phishing attacks are well...
2. My favorite blogging tools With all the social networks out there, how do you...
3. What Exactly is the Point of Twitter? Since this question has come up at least three times...

Last night, during a webcast, Facebook announced some upcoming significant changes to the Facebook platform. Most are good, a few may be frustrating, but here they are. These changes will start to be rolled out in November & December and will continue into the first and second quarter of 2010.

If you develop Facebook applications, I strongly encourage you to check out their new Facebook Developer Roadmap, which breaks down upcoming changes in detail and let’s you know when to expect these changes to roll out.

I for one am thrilled to see Facebook finally trying to work with developers to give them a clear idea of what to expect and when. As someone who has spent the past two years writing Facebook applications and being frustrated by surprise platform changes, this is a giant step in the right direction from my point of view. Previously, it was not uncommon to get only a day or two’s notice – or no notice at all – regarding critical application functionality. If you’re the developer for one application, that’s inconvenient and annoying at best, if you’re obligated to maintain a dozen or so applications it can be utterly traumatizing.

From the look of things, Facebook is trying to streamline the way applications communicate with users, and is adding some features specifically designed to improve the flow of turn-based gaming and make it easier for users to find games amid the sea of applications in the app directory.

Overall, these changes bring new features to the application developer’s toolbelt, but changes to the newsfeed and Stream API also mean that several of the ways you were previously able to send messages to a user’s newsfeed/stream (the one you just updated in April to comply with their last round of newsfeed changes) will no longer be supported.

To put a finer point on it, if you don’t feel like extending your current applications to take advantage of the new features, you will still need to update them to get them to function as they currently do. If you do not update your application to use the Stream API, your application will NO LONGER send any messages to your users’ stream. More on this down below.

So here’s a quick run-down of what to expect in the next few months – I’m covering the issues that will affect current applications first, and then we’ll get into the good stuff that talks about new features and functionality, so you know what you have to update to keep your existing functionality before worrying about extending it.

Big changes to the Stream, old API not supported, templates disappear, new format

As I mentioned above, if you don’t care enough (or your clients are not paying you enough) to update your current applications with the new functionality these updates bring, you’re still going to have to spend some time in the code just to get them not to break.

As of December 20, 2009, when Facebook.showFeedDialog and feed templates are discontinued, if your application hasn’t been updated to use Stream.publish, Facebook.streamPublish, or FB.Connect.streamPublish, your application will no longer be able to send newsfeed messages.

These Stream API functions will be the only way to send messages to users’ streams and they are available right now, so I encourage you to start making the switch now so you have plenty of time to test and troubleshoot any issues that come up.

But wait – there’s more!

Stream stories will be rendered slightly differently, with only one image and few lines of text. Only the first image and first few lines of text will be rendered by default. A user can choose to expose the rest of the images and text by clicking a “See More” link.

Only one action link will be rendered, and it must be 25 characters long or less. “Formatting”-style characters (like “|”, “[", "]“, and others) will not be rendered.

Key Policy Change: In order to encourage intentional behavior, you will no longer be able to automatically pop up a Feed form for a user unless that user has explicitly indicated that he or she wishes to share this information. According to Facebook, “a user should never be surprised by a Feed form”. You can continue to render Feed forms through FB.Connect.streamPublish and Facebook.streamPublish.

In the Stream Roadmap page, they outline when it is appropriate to open a feed form:

• When the user has clicked a button that says “Share this”.
• When a user has indicated via your user interface that they want to share. For example, if a user wrote a review within your application, and they checked a box that said “Share with friends” next to your “Publish this review” button. If you pre-checked a “Share with friends” box and they unchecked it, a Feed form should not pop up.

Perhaps more importantly, they also outline when you should NOT prompt the user with a feed form (and therefore NOT allow your user to post the action to their stream):

• When a user takes an action that is a normal part of using your application, for example, achieving a new high score.
• When you present a user with a result or new information, for example, completing a quiz.

These last two will directly impact how a LOT of Facebook apps and games currently function. While it will no doubt have an adverse impact on monthly active users for the applications that currently trigger stream entries on these actions, it is most likely a response of Facebook users complaining about the tremendous influx of stupid quizzes that have been flooding their newsfeeds for the past several months.

Hopefully, the other changes detailed below will offset the impact of apps not appearing in the stream as often and will more than compensate for any loss in virality.

Check out the Stream Roadmap page on the Facebook Developers site for full details.

No more Profile boxes or Boxes tab

That’s right. Poof. Going forward (in the short term) application tabs will be the only way applications can integrate into Profiles. We will be removing profile boxes, application info sections, and the Boxes tab. Facebook says they are exploring additional ways to enable developers to integrate into Profiles.

Please note that it does NOT appear that Facebook will be moving application content currently in Profile boxes or the Boxes tab into Profile tabs for you. From the Profile Roadmap page on the Facebook Developer’s Wiki:

Where will users’ profile boxes go?
Profile boxes will not exist in the near future. Application tabs will be the only way developers can integrate into the profile. If integrations on the profile are an important part of your application, we encourage you to focus development and transition to application tabs.

(Timing: Late 2009/Early 2010)

So it looks like if you don’t make this change to your application yourself and you rely on Profile boxes or Boxes tab boxes for your application to work, your app will effectively just disappear from user profiles when this change goes live.

Application tabs will shrink from 760 pixels wide (today) to 510 pixels 520 pixels wide to accommodate a slightly revised design. Boxes, info sections, and the Boxes tab will be removed in the near future. This kind of sucks, in my opinion, but I assume they’re doing it to accommodate a new design with either larger ads or some sort of right-rail navigation. Still, that’s a 250 240 pixel loss of real estate. Bummer.

Update as of Dec 15, 2009: According to a recently updated roadmap page, they will be shrinking the tabs down to 520 instead of 510. This, along with other profile changes, is set to roll out early 2010 by their last estimate.

Slight Application Canvas page layout change. In order to make it clearer to users when they are using an application created by a third party developer, Facebook is going to slightly modify how the top-navigation is rendered on canvas pages:

Looks like they’re still tinkering with ideas on the new layout of Application Canvas pages, but overall this shouldn’t impact most applications too much. They encourage developers to periodically check the Canvas Roadmap page for updated designs.

Now then – we’ve covered all of the stuff that impacts your current applications as they are now. Let’s look ahead to some of the great new functionality ahead.

Email

Developers will be able to ask users to share their primary email addresses. This is a big deal because it was previously verboten to collect a user’s email address without specifically asking them to type it into a form and submit it. (Timing: Nov 2009)

New Application Counter (woot!)

The application counter is one of my favorite improvements laid out in this roadmap and is just one of many steps Facebook is taking to position itself as a gaming platform.

You will have the opportunity to increment your count to indicate to a user that they should take an action in your application, for example, take their turn in a game, or see a comment from another user on content they created within that application.

The count can be incremented by your application, and when a user clicks through to the application, the count will be reset to zero.

As we continue to see an influx applications leveraging Facebook as a platform for RPG and turn-based gaming, it seems Facebook is getting behind the idea and beginning to provide specific features to encourage growth in this area. (Timing: November/December 2009)

Games/Applications Dashboards

In fact, apps that are games will be separated by category from apps that are… well, applications. Plus, users have access to two different Dashboards, one for Games and one for Applications.

The Games dashboard will have a number of features that encourage users to find games their friends and playing, and to stay active in games they’ve started, including:

Recent games: Facebook will prominently display games that a user has recently played, showing the application icon and application name. Clicking on a game will take the user to the game’s canvas page.

Game News: There will be a text field next to each game on the dashboard where developers can set Game News. This area is free form and targetable by user, e.g. “You are ranked 17th among your friends. Austin’s score is the next highest at 28,400. Can you beat him?” or, “Your pumpkins are wilting – water them soon!”

Your friends are playing: Facebook will display some of the games that your friends are playing along with information about relevant activities in the game.

According to Facebook, an app cannot appear in both the Games directory and the Applications directory, and they’ll be reviewing Games listed in the Games directory to make sure they belong there.

All non-game applications will have similar functionality (your recent applications, application news messages, and applications your friends are using) in the Application Dashboard.

Application Notifications

Facebook is removing application-to-user notifications and user-to-user notifications. Instead, they encourage you to use other channels to communicate directly with your users, and to enable them to communicate with each other about your application.

Communication between you and your users:

They encourage you to use Email (once the user has opted to share their email address with you) for things like product announcements, newsletters, or billing and transactional communication.

If you want to notify users about an action they should take with your application (like taking their turn in a game), incrementing the Application Counter will be a good way to notify them.

The application news in the Application Dashboard will be a great way to share a brief message with a user while they’re exploring the Dashboards. You’ll be able to target these on a per-user basis.

Communication between your users and their friends:

The stream is the most powerful way to enable users to share their experiences with all of their friends.

The new Share flow will give your users the ability to send messages directly to their friends’ Inboxes, with attachments predetermined by you. This will be the best way to encourage one-to-one and one-to-few messages between users, and is intended to replace requests.

Users will still be able to invite their friends to check out your application.

The estimated timing on this is approximately 30 days after you are able to start requesting a user’s email address. (Latest estimate: November/December 2009)

Open Graph API: Incredible potential, or not at all?

The info on Facebook’s Developer page for this is a little vague at best. They state:

The Open Graph API will allow any page on the Web to have all the features of a Facebook Page. Once implemented, developers can include a number of Facebook Widgets, like the Fan Box, or leverage any API, which enable the transformation of any Web page so it functions similar to a Facebook Page.

For example, AwesomeTees might decide that strategically they would like to locate their brand identity at www.awesometees.com. AwesomeTees will install the Fan Box widget, which will allow any Facebook user to “Become a Fan” of AwesomeTees, thereby establishing an official connection to AwesomeTees. The user will then have AwesomeTees listed in their list of connections on their profile as Pages are represented today.

This isn’t that different than how it currently works, so that’s not really news. What is interesting is this one line n their description, further down:

Additionally, any content that AwesomeTees publishes on AwesomeTees.com will show up in the stream on Facebook like it normally would.

Wait, say what? It sounds like they’re saying that news updates that would normally appear on a website, and would have to be manually cross-posted to a brand’s Facebook fan page will somehow automagically appear. I would have to assume they will require some sort of XML or JSON standardized format that website news announcements will have to be published in, but there’s little detail out on this just yet. This feature is a ways off though, with initial versions not expected until the second quarter of 2010.

And finally – Verification goes away as a brand, becomes universal for all apps

According to the Principles, Policies and Verification roadmap, Facebook is doing away with paid Verification and is extending it out to all applications.

On December 1st, 2009 we’ll retire the Verification brand, as we scale what was a voluntary program into a universal requirement. There is no longer a submission process or fee, and there won’t be distribution boosts as the product will move towards more intentional user sharing. Starting today, we will suspend the processing of Verification submissions. All apps must meet Verification Checklist expectations and will be subject to review at any time.

So this means while you no longer have to shell out big bucks for your app to be verified, it also means that Facebook will probably be more aggressive about making sure all developer applications do meet their verification criteria, and will yank your app with ir without notice if it feels like your app isn’t up to snuff.

Full Timeline

To give you a little more perspective, here is the timeline of the upcoming Platform changes, based on Facebook’s Developer Roadmap and originally compiled by InsideFacebook.Com:

Late October 2009

• Simplified policies posted, verification program ended, and “extending verification standards to all applications”
• Platform Live Status tool launching, which will show “updates on platform stability and load”

November 2009

• New email permission API (developers can ask users to share their email address)
• Access point to invites will be moved “to either a filter in Inbox or surfaced in the Application and Games Dashboards”
• User-to-user Inbox APIs will be launched
• Stream story formatting changes (1 image shown by default, few lines of text, 1 action link)
• New “add bookmark” button

November/December 2009

• Notifications API (both app-to-user and user-to-user) will be removed (note: Facebook says this will happen “30 days after email permission is available”)
• Feed forms cannot be popped open without “explicit user intent” (note: this is a new Facebook policy)
• Application bookmarks moving from the bottom menu bar to the left side of the home page
• Counter API launching (counts can appear on home page application bookmarks)
• Applications and Games dashboards launching
• New application branding on canvas pages launching

December 2009

• All stream publishing APIs beside Stream.publish, Facebook.streamPublish, and FB.Connect.streamPublish will no longer be supported (December 20)
• Revamped developer site launching

Late 2009 / Early 2010

• Requests API will be removed (note: Facebook says this will happen “30 days after launching new Inbox sharing”
• Profile boxes will be removed (application tabs will be the only way to integrate into the profile page at that point)
• Improved analytics and APIs launching

Early 2010

• Open Graph API launching

Conclusion

So it feels like Facebook might finally, really be getting their shit together. This is arguably one of the biggest rounds of changes to the platform that we’ve seen in quite some time, and for the first time, they’re actually giving developers a head’s up and being very transparent about timing and impact.

All in all, the vast majority of these changes are great news for application developers. We’re getting tons of new features, new integration points and opportunities for viral engagement. The trade-off in what we’re losing seems to be well worth it, if all of these improvements come to fruition.

Possibly related posts:

1. %$#^%$* Facebook Application Tabs So this is new. And by new I mean painfully...
2. Changes to Facebook’s Newsfeed/Wall With the most recent API changes, specifically the one that...
3. Planning Your Facebook Application This is part one of a series – the technical...

This tutorial walks you through how to use DynamicFBML to do simple content replacement that will allow you to fit more content into your tabs. You can create image or video galleries, or even an entire micro-site inside your Static FBML tab without a lot of complicated scripting.

If you’re not sure what Static FBML is, check out my previous tutorial that shows you how powerful the Static FBML application can be, and how you can create very compelling, highly branded Facebook Fan page tabs without the hassle of building a custom Facebook application.

At its most basic, the functionality we’re discussing is simply one or more text or image links that, when clicked, cause content in a set space to change. Some potential uses:

• Dynamic image gallery where the user clicks on a thumbnail to see a larger version of the image
• Video gallery that allows you to include thumbnails on the video that loads the selected video into a single player space. This can be particularly helpful in tightly designed Static FBML pages where you have limited space to display a lot of content.
• Or even using your Static FBML tab as a mini-site, replacing the entire tab’s content with new content to simulate multiple pages

We’re going to explore a few examples in this article, but it’s basically the same code regardless of how you apply it. First, let’s look at creating a micro-site within a Facebook Static FBML tab – see a live demo of the tab we’re going to create here.

Notice the navigation within the tab itself (Home, Specials, Locations, About). Clicking on them displays new content in the entire tab without actually reloading the page. This is an example of Facebook’s DynamicFBML, and you won’t believe how easy it is to implement. Seriously, you won’t.

So, okay… maybe that tab isn’t the fanciest thing you’ve ever seen, but it gives you a clear idea of how this works. How plain or sophisticated the design is depends entirely on you and how comfy you are in a graphics program.

If you dig the cool-looking button CSS in the test page, you can learn how to get that effect by visiting ZurbBlog’s post on Super Awesome Buttons with CSS3 and RGBA.

But here’s the great part: the code needed to create that tab is basically this:

<!-- navigation elements -->
<a href="#" clicktoshow="nav1" clicktohide="nav2,nav3,nav4">Home</a>
<a href="#" clicktoshow="nav2" clicktohide="nav1,nav3,nav4">Specials</a>
<a href="#" clicktoshow="nav3" clicktohide="nav1,nav2,nav4">Locations</a>
<a href="#" clicktoshow="nav4" clicktohide="nav1,nav2,nav3">About</a>

<!-- Content to display when user clicks on the Home tab -->
<div id="nav1">
	Homepage text
</div>

<!-- Content to display when user clicks on the Specials tab -->
<div id="nav2" style="display: none;">
	Specials text
</div>

<!-- Content to display when user clicks on the Locations tab -->
<div id="nav3" style="display: none;">
	Locations text
</div>

<!-- Content to display when user clicks on the About tab -->
<div id="nav4" style="display: none;">
	About text
</div>

Seriously. That’s it. That’s ALL there is to it. Naturally, I stripped out the extraneous text, images and styles from my demo for simplicity’s sake, but that’s honestly it.

This is arguably the one thing that is exactly as easy as it appears to be with regard to developing anything for Facebook.

This code is fairly straightforward, but let’s take a look at what’s happening here.

In the first part, we’re setting our links. For the micro-site, these are our navigation links. Everything here looks like pretty standard HTML except for the extra “clicktoshow” and “clicktohide” elements. (Note: The links do not have to be set before the content divs – you’ll set them wherever they make sense in your design. You’ll see an example of this further down the article in the image gallery sample.)

<!-- navigation elements -->
<a href="#" clicktoshow="nav1" clicktohide="nav2,nav3,nav4">Home</a>
<a href="#" clicktoshow="nav2" clicktohide="nav1,nav3,nav4">Specials</a>
<a href="#" clicktoshow="nav3" clicktohide="nav1,nav2,nav4">Locations</a>
<a href="#" clicktoshow="nav4" clicktohide="nav1,nav2,nav3">About</a>

The clicktoshow element allows you to specify the id’s of the elements you wish to show when the link is clicked. Conversely, the clicktohide element allows you to specify the ids of the elements you wish to hide when the link is clicked.

In our navigation elements, since the div that contains the homepage text is set as nav1 in our HTML, we want the clicktoshow for the Home link to be nav1 (since we want that div to show when we click on it.) Likewise, since we’re completely replacing whatever div is currently visible with the nav1 div contents, we want to specify everything that isn’t nav1 in the clicktohide.

Combining divs in hide/show

What’s particularly fun about the clicktoshow and clicktohide (other than their sheer ease of use) is the fact that unlike a more complicated true JavaScript version, showing and hiding two or more divs at the same time on the same click is simply a matter of specifying them in the clicktohide or clicktoshow parameters.

<!-- set up our text links -->
<a href="#" clicktoshow="nav1" clicktohide="nav2,nav3">Oh</a>
<a href="#" clicktoshow="nav2" clicktohide="nav1,nav3">Hai</a>
<a href="#" clicktoshow="nav1,nav2" clicktohide="nav3">Oh Hai</a>
<a href="#" clicktoshow="nav1,nav2,nav3">Oh Hai SRSLY!</a>

<!-- Content to display when user clicks on the Home tab -->
<div id="nav1">
	Oh
</div>

<!-- Content to display when user clicks on the Specials tab -->
<div id="nav2" style="display: none;">
	Hai
</div>

<!-- Content to display when user clicks on the Locations tab -->
<div id="nav3" style="display: none;">
	SRSYLY!
</div>

In the snippet above, we’re using only three divs with four nav elements. By specifying multiple ids in the clicktoshow parameter, we can show multiple divs at once, so when you click on “Oh Hai SRSLY!”, you’re looking at nav1, nav2 and nav3 all being shown at once. Piece of pie.

Example Image Gallery

One more example that will hopefully get your creative juices going – let’s look at how to do an image gallery using only clicktoshow and clicktohide.

In this gallery, we have a set of thumbnails with one large space set aside in our design where the fullsize image will display. You can see a simple demo of this gallery here.

Now take a look at the sourcecode below. Notice that we’re using the exact same code as we used in the other examples - we’ve just changed the names of the divs so they make more sense semantically in a gallery.

<!-- set the divs for the fullsize images -->
<div id="image1">
	<img src="http://www.snipe.net/wp-content/uploads/2009/10/full-1.jpg"/>
</div>

<div id="image2" style="display: none;">
	<img src="http://www.snipe.net/wp-content/uploads/2009/10/full-2.jpg"/>
</div>

<div id="image3" style="display: none;">
	<img src="http://www.snipe.net/wp-content/uploads/2009/10/full-3.jpg"/>
</div>

<div id="image4" style="display: none;">
	<img src="http://www.snipe.net/wp-content/uploads/2009/10/full-4.jpg"/><br />
</div>

<!-- set up our thumbnails -->
<a href="#" clicktoshow="image1" clicktohide="image2,image3,image4">
	<img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-1.jpg"/>
</a>

<a href="#" clicktoshow="image2" clicktohide="image1,image3,image4">
	<img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-2.jpg"/>
</a>

<a href="#" clicktoshow="image3" clicktohide="image1,image2,image4">
	<img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-3.jpg"/>
</a>

<a href="#" clicktoshow="image4" clicktohide="image1,image2,image3">
	<img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-4.jpg/>
</a>

By the way – if you dig the images used in that sample gallery, be sure to check out the Great Pumpkin Roundup post that shows examples of some of the most amazing pumpkin carving you’ve ever seen in your whole life.

In a project for vitamin water, I needed to create what appeared to be a dynamic video player, using only the default Facebook media player, which doesn’t support options like having a playlist where people can click on a gallery of thumbnails and load the video into a single player. See below:

The code used to pull this off is almost identical to the image gallery example above. No foolin’.

But wait – there’s more!

An additional DynamicFBML function that you may find useful is Clicktotoggle, which is very similar to Clicktoshow and Clicktohide, except instead of turning visibility on and off by clicking on on different links, you toggle visibility on and off by clicking the same link.

Your takeaway

While I certainly hope that the code presented here will be useful to you, the concept of what you can do using clicktoshow and clicktohide is more important. You’re not limited to creating a micro-site or an image gallery. Get creative and have some fun with this. Not many people are being adventurous in their Static FBML tabs yet, so you have an opportunity to really wow your users with your newfound skills.

Additional Resources

• Facebook Developers Wiki – DynamicFBML/Visibility
• Facebook Developers Wiki – Clicktoshow
• Facebook Developers Wiki – Clicktohide
• Facebook Developers Wiki – Clicktotoggle

Possibly related posts:

1. Taking Your Static FBML Microsite to the Next Level In a previous tutorial, you learned how to Extend Facebook...
2. Static FBML: Not Every Facebook Fan Page Needs An Application You don’t always need a custom application for your Facebook...
3. %$#^%$* Facebook Application Tabs So this is new. And by new I mean painfully...

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.

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.

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.

Possibly related posts:

1. Extending Facebook Static FBML Tabs with Dynamic Content This tutorial walks you through how to use DynamicFBML to...
2. Taking Your Static FBML Microsite to the Next Level In a previous tutorial, you learned how to Extend Facebook...
3. %$#^%$* Facebook Application Tabs So this is new. And by new I mean painfully...