HOW TO: Design & Program a Facebook Landing Page for Your Business

JG Visual Facebook Landing Page

We are incredibly excited for JG Visual’s own Jonathan Goldford.  Technology blog Mashable just published Jonathan’s article HOW TO: Design & Program a Facebook Landing Page for Your Business.  To put our excitement into perspective, Mashable is ranked the 3rd most popular blog in the world by Technorati and was listed as one of the best blogs of 2009 by Time Magazine.  We’re very proud of Jonathan’s hard work on this article and hope it is very helpful to those looking to design or program a custom Facebook landing page.  You can read an excerpt from Jonathan’s article below and can find the full article by clicking the link below.

Right now Facebook Pages and custom landing pages are bigger than bottled water was on December 31, 1999. Michael Jackson, Lady Gaga, Starbucks, and the TV show House each have more than fifteen million “Likes” and are growing rapidly.

While there are an enormous number of articles that talk vaguely about how to create a custom landing page, very few discuss the nuances of actually designing and programming one. Here we will discuss the subtleties of designing a Facebook landing page and FBML programming. To make this discussion more concrete, we’ll use the creation of our own JG Visual landing page as an example.

Designing Your Company’s Facebook Page

Actually designing a Facebook Page is very similar to designing any website, except for a few considerations:

  • Design for a 520px Width — Facebook Pages must fit within a width of 520px. Since we can’t use a body tag in our Facebook Page, we’re going build our entire page in a container div set to a width of 520px.
  • Design for Any Height — We can make our Facebook Page any height, but we have to remember that most people interact above the fold and at the time of writing this, our Facebook landing page will start 135px from the top if the person viewing is logged in. If they aren’t logged in to Facebook, that increases to roughly 250px from the top of the page to allow space to log in or sign up.
  • Account for the Width of the Company’s Name -– Since we’re interested in creating a call to action for our Like button, we must take into account our company’s name. The Like button appears just right of the company name at the top of the landing page. If we’re going to point to the Like button, we need to figure out the pixel width from the left of our landing page to the start of our Facebook Like button.

To read the entire article as it originally appeared on Mashable, please click here.

Tags: ,
David Hartstein is the storyteller and measurement guy at Wired Impact where he routinely reads and writes about nonprofits and web geekery. He used to teach elementary school and often walks around barefoot. You can catch up with David on Twitter at @davharts.

Leave a Comment

Your email address will not be published. Required fields are marked *