Cooking the Facebooks

By now I hope you’ve noticed that my Cooking with Apples blog has a Facebook page, but if you’ve not, do please check it out and don’t forget to click the “like” button. I’m new to the whole fabled Book of Faces thing, with the only previous social networking I’ve done being on twitter, but it had been pointed out to me by a number of followers that my quirky, geeky, T-shirt designs would potentially reach a far greater audience with a Facebook presence, so I decided to give it a whirl.

First impressions count, and I wanted my landing page to stand out as much as possible given the constraints of the Facebook chrome and layout – I thought if I can’t create an impactful web presence for one of my own projects, I’m in the wrong profession….

Coming late to Facebook means I’ve missed a lot of fun with FBML – Facebook’s own markup language for programming page content – but that’s not a bad thing, because it means I can create my landing page using standard HTML, CSS and Javascript. I planned to explore Facebook application development, but my landing page needs at this stage were fairly straightforward, so I opted to concentrate on the page design, and then simply insert this into my Facebook page using the pre-existing Static HTML: iFrame Tabs app.

My research had let me to conclude that the maximum size for a Facebook profile picture is 180 x 540px and that page content should be 520px wide. Facebook changed their page layout earlier this year, and around the time there were a number of clever people who utilised the new format to create some funky profile pages where the design extended off the profile picture and into the wall photos. I wanted to do something similar and use both the profile image and page content to create one unified design.

I didn’t bother with fancy templates and opted for the good old fashioned ‘screen grab’ trick. With this opened in Photoshop along with two further fresh blank documents – one 180 x 540px and the other 520 x 520px – both precisely positioned over it, I was ready to work on the design which had to do two things: the first call to action was of course to get visitors to “like” my page; and the second was to direct visitors to my T-shirt collections on redbubble.

Once the design was completed, having included some buttons on my page that needed interactivity, I exported my web-optimised images and used Dreamweaver to add the image maps and create the required HTML page code, before uploading the graphics to my web server. With my page images online and my profile picture uploaded to Facebook, the next step was to inject the HTML into my page using the Static HTML iFrame Tabs app, which is so simple it’s ridiculous – perhaps that’s why >25m people use it….

Once the app was added and activated (by visiting the tab) all I had to do was paste my HTML code into the appropriate box and hit save. Told you it was simple! I made sure I had checked the box for no scrollbars, although I had already ensured my content was 520px wide and added CSS styling to ensure the page didn’t bleed, and it didn’t.

I was happy with how everything looked, so pasted the same HTML into the optional ‘fans only’ box within the iFrame app, and with a tweaked image URL – so that fans see a slightly different version of the graphic – my new landing page all was good to go!

All it needs now is, er, a few more fans 🙂

View my Quirky, Geeky, Designer Tees page on Facebook


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s