WELCOME– some thoughts on a Fan-gate APP for Facebook

I’ve been scouring for APPS for WordPress pages to do what I want – that is, give me a “fan-gate” and not ruin it with advertising – and let me use multiple apps per page.

Well, there are APPS out there that do most of it but not exactly what I was after – so I wrote my own.

But first – some explanations:

What’s a Facebook profile?

That’s the bit you get for free when you signed up with Facebook. Let’s ignore the Facebook TIMELINE which was supposed to appear some time ago – looks like litigation’s putting the kybosh on that for now. Mine’s all set up to go – but no-one can see it!! But I digress…




You’ll notice the above already looks a bit personalised – and it is – how did I managed to get multiple images and text on the left? I didn’t. 

Some time ago, Facebook changed the rules to allow images as wide as 180px by something like 520px high as your profile picture. What you see above is simply one large image. Now you have to be careful as your little avatar image has to come from that so you’ll see in my case I’ve made sure that the top part of that image is me.

The avatar (your little image you see in your posts) is then just the top bit of the image I’ve used on the left.

There are 3 columns in all Facebook pages – the left you have some control over as you can see, in your profile you’ve little control over the middle column other than it’s full of your messages on your WALL – and of course you can show your photos etc.  the right side is reserved for Facebook ads which are often terminally annoying.

What’s a Facebook PAGE?

Isn’t that my profile?  No! A profile is simply your personal profile, it’s very hard to make that into anything else – and you can’t easily add to it or personalise it.  But anyone can create a Facebook PAGE and this is more suited to for example businesses of if you are a personality – or you have a cause etc.

Given that you create a PAGE – which looks pretty much like a profile at first… you can start to customise it. One of my pages is called:


From now on I’ll not show the THIRD column as you’ve no control over it…


Notice that once again I’ve used a large image on the left – and you’ll see the little avatar there on the posts… notice also that I’ve uploaded several normal size images up there but selected the one larger one to be the profile image. So, on your WALL you not only control the LEFT column but you can control the imagery at the TOP as well. Nice.

But there is SO much more. in a PAGE it is not necessarily the WALL that is the first thing people see – you can easily go in and tell the page to start up with a DIFFERENT TAB (the TABS are the items you see on the left above – wall, info, photos etc.

Notice there is a TAB above called WELCOME.


As they say in the movies “I made that” – it’s an APP written in a language called PHP with a little icon I designed –WD for Willow Design… I designed the App way back in September but I’ve updated the blog since then.

This APP is designed to let  me whatever content I want in the MIDDLE section of your page – and importantly to show different content to some who LIKES me to someone who has yet to press that LIKE button. 

Why bother? Well once someone LIKES you their Facebook pages show whatever you have to say on your WALL – which might be about you, your company, it might be something you have to offer or some community event.  Very important.

Ok, so let’s see the page from the perspective of someone who is new to this page.. Remember I’ve set my page to START UP with the WELCOME App, not the WALL.



As you can see you don’t get much until you press the LIKE button. That centre column is simply an image I put together – and if you want to make something similar…. get Photoshop or the free GIMP package – and PowerPoint and a few other tools and start pasting images and text together – it’s easy enough with a little practice.

So – if someone presses the LIKE button – if they are already logged into their FACEBOOK account, job’s done – if not, they’re asked to log in – if they’re not a member of Facebook they’re asked to sign up – if not.. well, is there anyone left who ISN’T part of Facebook?

Ok, so here, more or less is the LIKED version


What you’re looking at above is not some HTML but a complete embedded website in Facebook. The APP lets me point to another website and I made one up specially to fit into the 520px wide limitation of Facebook and with short pages.  By updating that website – I end up updating Facebook.

So how does the APP do that? Well, what you don’t see above is the ADMIN button which I have when I’m logged into my Facebook account – and on my own pages (I have several). Here’s the ADMIN view.


Several things going on here. I’ve designed the APP to show 2 windows – one for people who LIKE and one for people who DON’T yet like my page. In the second (lower one) I’ve put in some simple HTML web page code to show an image – in the FIRST one – ignore the text, look at the URL box – I’ve simply pointed to a specially made website – which is special only in that it does not have a fancy header – and it is limited to 520px wide. That’s it. The user sees either the top or bottom version depending on whether they’ve clicked the LIKE button or not.

I’m not ready to roll this APP out yet, I want to get some more security into it and make sure it’ll scaled out for general use – also I want to add a few more features to it and some help. But as you can see – it works.

Below are some more LIKED and YET-TO BE LIKED pages I’ve put together – hope they give you some ideas. Again these are admin views hence the “edit” options but are otherwise pretty much what the end user sees.




The way I’ve written the APP I can make several available so that for example one could have a Welcome APP, then a payment APP – you can do the lot with one APP if you have a special website to point to – but then not everyone has that.

Here’s an example where  I’ve renamed the tab and two versions of the APP are in use on a page with different icons.. see below the PHOTOs built-in APP



If you’re interested in any of this – get in touch… details are on the sites for which I’ve included addresses!


Peter Scargill – Willow Design – www.willowdesign.info  – www.scargill.net