How I Tricked Out my Facebook Page

Posted by Gabe on December 10, 2009 under Facebook, Social Media | 17 Comments to Read

A lot of people have been asking me how I did this, so here goes.  I fully admit I am just getting started with this sort of thing and hope to learn (and share) how to enhance both my Facebook page and my blog functionality.

I try to learn from the best.  I will say that my friend John Haydon got me started with all this stuff. The idea is that you want your FB page to stand out from others.

Let’s start with the avatar.  As you can see, mine is a bit different. Facebook will let you display one that is maximum 200 pixels wide and 600 pixels in length.  I did two things to be different. I took advantage of that size, and also made it appear that the top part has an invisible background.  To do that, I copied the color of the Facebook background and used that as the background of my image.  This piece is 51 pixels high.  The color in RGB (red, green and blue) is 237, 239, and 244 respectively or #edeff4 in hex or html color.  (This assumes you have some experience working with colors in Photoshop or a similar graphics program.)  Below that there is one line that is 1 pixel high and its color is 188, 221, 236 or #bcddec.  The only caveat with that is that the same avatar (or at least a portion thereof) is used to preface each update you have so there has to be a portion of your picture that works for this too.  To select the crop area, click on the main image once you have it installed, select “Change Profile Picture” then drag the image to adjust the Thumbnail version.  Make sure you save your changes.  Most people recommend a 200×200 image so that the representation is the same in both areas.

Next is the Navigation bar to the left. I call it on my page “Other Stuff”. Rather that reinvent the wheel I will point you to where I first learned how to do this and that is from the aforementioned John Haydon. His post “How to Add an Interactive Sidebar” was extremely helpful to me.  This is an instructional video that you will want to bookmark.  (NB: John is a rocker so beware of a bit of music to start the video.)  I started by doing almost exactly what John did.  Later I wanted a bit more pizazz so I used images rather than simple links.  This is all a function of the embedded HTML.  The one thing to note here is the name of the application used here is called “Static FBML”.  This inherently means that you cannot use Javascript, PHP or anything else to make it more dynamic.  I would have changed the pictures when the mouse hovers over them like I do on my regular web site if I had that capability.

In a lot of my research I discovered that many people recommend a different “landing page” for fan pages.  That is, when people who are not fans go to your page they are treated with something totally different than just a disjointed conversation on your wall.  So I created my “Welcome!” page.  It gets added to Facebook exactly the same way that we did with John’s navigation bar, with the single difference that towards the end you do not remove it from the Tabs, you remove it from the Boxes.  Then you can simply drag the tab laterally to wherever you want it in the food chain. To set your default landing page, from your Fan page go to Edit Page, then Settings. Edit Wall Settings and change the “Default Landing Tab for Everyone Else” to your new page.  You are done.

As far as the HTML is concerned, I created a page 540 pixels wide.  Again, you cannot have too many bells and whistles because by definition it is “Static FBML”, but you can brand it to make it look like yours.  Feel free to ask questions in the comments section and I will gladly answer them if I am able.  Good luck!

P.S. Here is another gem for Fan page people. If you have at least 25 fans you can get your own “Vanity URL” (i.e. http://facebook.com/KidsAreHeroes).  This number was reduced from originally 1000 then 100.  It is SO MUCH easier to promote when you have your own url.  To get one simply visit http://www.facebook.com/username/.

UPDATE 12/15/09: Just when you think you are ahead of the game… I just discovered that Facebook is planning a series of “improvements” to their site in the next few weeks.  One of which is that they are removing the “Boxes” concept.  What that basically means is if you create a Navigation Bar as described above, it will vanish when they implement those changes.  The avatar and landing page concepts are still valid. Watch my blog for a replacement method once this happens. Dontcha just love progress??