Creating a Custom Facebook Page


As marketers and communicators, we go to where the audiences are online to deliver and receive messages. Today, that is Facebook. With over 500 million users and a daily usage that surpasses that of Google, using Facebook as a communications channel by any large business or institution is essential.

Branding a Facebook page is not as easy as setting up an account. By default, a fan page opens on the Facebook wall feed. From an engagement perspective, this is the best option as it presents no barrier to immediately communication between you and your fans. From a marketing or branding perspective, however, it presents a challenge, as their is no real estate for evergreen or promotional material that you might want to stay sticky at a top level for a few weeks or months. The only option would be to continually post about such an event or campaign, which would quickly be seen as spammy by your audiences and hurt your overall social reputation.

Custom Fan Landing Pages

Creating a custom fan Landing Page gives the page owner a flexible way of creating an attractive entrance page for their Facebook presence. The Coca-Cola page is a good example of what can be done with such a page:

Coca Cola Page

Rather than opening on the Wall page, the Coca-Cola page opens on a Custom Facebook page called Home. This page has multiple calls to action:

  • Like many Facebook custom pages, the top banner calls attention to the Like button and contains a Call to Action to click the button.
  • A large Photo and associated text fro a primary point of focus that directs audiences to a current campaign. In this case, the article links to an associated Facebook application
  • Links for following Coca-cola on related social media sites
  • Links to fan-supplied photos and videos about the product
  • Links to lists of products and a question and answer service
  • A link to unique-Facebook content about the history of the Facebook page (which was originally created by a pair of fans of the soft drink that Coca-Cola eventually took control over, but incorporated the creators in their online marketing (a very smart move rather than coming down from above with draconian threats of suing and copyright infringement) 

The Pros

Custom Facebook landing pages:

  • Can introduce campaigns and promotions from the rest of your online presence into Facebook
  • Provide entry points to Facebook or website applications
  • Allow a business or organization to put their best face forward in terms of branding and visuals to potential fans and consumers, thereby increasing the likelihood they are to like the page

The Cons

  • Put  a barrier between engaging with other fans when coming to the page
  • Require additional planning for content, updates, and strategies
  • Require additional programming and design support

Creating a Custom Facebook Page

Originally, custom Facebook pages were created using a programming language called FBML, Facebook Markup Language. Pages were created by users and then hosted by Facebook. Images, Videos, and other materials were hosted on another website and called into the Facebook page.

Earlier this year, Facebook announced that FBML was being deprecated in favor of having developers build custom pages the Developer Application. This new method requires you to create a local HTML page that is then imported into Facebook using an iframe.

Creating a Custom Facebook Landing Page

You’ll need to create a web page using your standard web development tools. This page and any accompanying files would need to be then uploaded to your web server so it can be accessed by Facebook.

The iframe has a set width of 520 pixels and 800 pixels in height. Your content can be longer than this, but be aware this will create a scroll bar to the right and you’ll need to accommodate for that in your design (leave 20 pixels available for the scroll bar on the right).

Integrating Your Web Page into a Facebook App

Creating an Application

  1. Login into Facebook
  2. Go to Facebook Developers and go to Apps in the top menu and add this app to your Facebook Profile
  3. Cick on the button that says “Create a new App”. Will you need to give your application a name visible to the public (Name) and a name for the Open Graph measuring tool (App Namespace). You’ll have to complete a Captca as well to verify you are a human.Give your app a name and also add an icon since it will show up in your Facebook page.
  4. Upload a custom icon to show next to your page. The icon will be rendered as 16 x 16 pixels, so think along the lines of a favicon.
  5. At the bottom of this page, select the Page Tab option under Select how your app integrates with Facebook
  6. Enter the Name of Page Tab (the name that will appear in the left hand menu on Facebook)
  7. Use the URL of the web page on your server for each of the remaining fields. Be sure to use https: for the secure page tab url instead of http:
App Set-Up

Adding the App to a Facebook Fan Page

To add the landing page to your site, you’ll need to do the following:

  1. Open a  new browser window
  2. Go to the following address, replacing YOUR_APP_ID with the app id number that has been created for your page tab (taken from the ) and YOUR_URL with the web address of your local page:
  3. This page will give a dialog box that will ask you to specify what page you are an administrator of that the tab should be added to.

Adding App to a Page

What Does Web Services Have in the Works?

As you may have noted above, the dimensions of a custom Facebook landing page are smaller than those of the new UF&Shands WordPress theme, Apollo. In order to build a page properly, a unit would need to build a custom HTML solution for the space and host it external of their WordPress instance, which would require both programming and design support, as well as the help of IT staff to host and maintain.

After the launch of the UF&SHands website, Web Services will be looking at specialized WordPress templates for smaller goal-specific web sites. One of those in discussion is a Facebook optimized template for Landing Pages, basically a redesign of the current home page design to strip the navigation menus and other elements but retain the titles and branding.

This template would allow content authors to continue to use the tools they have learned for WordPress to maintain and update landing pages easily and with minimal IT support.

Stay tuned for more information on this template and other templates in the near future.  And if you have suggestions or ideas for this or other templates, please contact us – we’d love to hear from you!

About the Author


Jeffrey Stevens

Jeff Stevens is the Assistant Web Manager for UF Health Web Services. He focuses on user experience, information architecture, content strategy, and usability.

Read all articles by Jeffrey Stevens