For the past several weeks I’ve been discussing the steps for creating a landing page, or “welcome page” on Facebook. I’ve broken it down into two parts – the creative component, which I covered last week and the week before, and the technical component, which I’m going to cover this week. The technical component consists of three parts:
1) The HTML formatting of the welcome page. I’ll discuss this today
2) The Facebook app. I’ll discuss that tomorrow
3) Setting Facebook settings so they utilize the app. I’ll discuss that on Friday.
See the previous posting for an idea of what our current Facebook Welcome page looks like for Outskirts Press, or click here to go to our Facebook page and you will see our Welcome page if you haven’t already liked us. That graphic is actually a composite of 6 graphics, put back together again with HTML. The previous postings have explained the reasoning for that. So, here’s the actual HTML:
<table width=”520″ cellpadding=”0″ cellspacing=”0″> <tr> <td colspan=”2″><img src=”TOP IMAGE HOTLINK” width=”520″ height=”125″></td> </tr> <tr> <td width=”75″ rowspan=”4″ valign=”top”><img src=”SIDE IMAGE HOTLINK” width=”75″ height=”350″></td> <td><img src=”YEAR IMAGE HOTLINK” width=”446″ height=”100″></td> </tr> <tr> <td><img src=”JAN IMAGE HOTLINK” width=”446″ height=”100″></td> </tr> <tr> <td><img src=”FEB IMAGE HOTLINK” width=”446″ height=”100″></td> </tr> <tr> <td><img src=”BOTTOM IMAGE HOTLINK” width=”446″ height=”50″></td> </tr> </table>
You’ll notice two things when looking at this HTML table coding. The first is that the width parameter is set for 520 pixels across. That is the optimal width for a Welcome page graphic for Facebook. Or even if you’re planning on incorporating both text and graphics, and even a form, the entire width of all your content should not exceed 520 pixels. The Welcome app uses an “iframe” tag, and once the content starts to exceed 520 pixels across, your users may start to see vertical scrolling bars (not optimal or aesthetically pleasing).
The second thing you’ll notice is that the actual image hotlinks have been removed, although I bolded their location so you can easily replace them with your own graphics. The width and height parameters of each graphic remain. Simply hotlink those images to their location on your company’s server, and Facebook will pull them into the Welcome page as it loads the HTML. Voila! Graphic Facebook Welcome page.
Tomorrow we’ll talk about how to add the Facebook app to your profile or company page to make a Welcome page for your HTML…. stay tuned.
President of Outskirts Press 