Create a Facebook page that shows a different version to those that “like” it

By David Pratt / Tags: facebook / No Comments / Published: 17-09-10

Continuing on the Facebook theme from by previous post about how to create a Facebook photo album and insert photos into it using PHP, I thought I’d share another Facebook technique that I’ve used a few times recently. That is, one of showing one version of a Facebook fan/tab page to those people who “like” it, and another to those who are yet to “like” it. I won’t talk about why you would want to do this here, I’ll just show you how…

Assuming that you have installed the Facebook static FBML application on your fan page, and you are on the page where you enter your source code, drop in the following (but obviously replace yourdomain with your own server address):

<link rel="stylesheet" type="text/css" href="http://yourdomain.com/stylesheet.css?v=1.1" />
<div id="wrapper">
	<fb:visible-to-connection>
		<img src="http://yourdomain.com/thanks.jpg" alt="Thanks!" width="520" height="400" />
		<fb:else>
			<div id="non-like"><img src="http://yourdomain.com/please-like-this.jpg" alt="Like!" width="520" height="400" /></div>
		</fb:else>
	</fb:visible-to-connection>
</div>

Include the following CSS in your stylesheet:

#wrapper{position:relative;}
#non-like{position:absolute; top:0; left:0;}

You can flesh out the above example to make a richer example, but it should be enough to get you started. When you are developing the page, remember that if you make changes to your stylesheet while you are working on the page, increment the stylesheet version number otherwise your changes won’t be picked up in Facebook due to their aggressive caching policy! The other gotcha is if your mark-up isn’t valid – if that is the case then the mark-up in between the will probably not render. Oh, and if you are the admin of the page then it won’t work properly either, so be sure to test the page with a Facebook login that doesn’t have admin privileges for the fan page you are editing.

Here’s an example… don’t be shy in liking it! ;-)