Social Media03.29.12

The Delicate Makings of Your Own Facebook Timeline Tab

Dark
Light
Facebook Timeline coming to your neighborhood, March 2012.
Facebook Timeline coming to your neighborhood, March 2012–whether you like it or not.

There’s no doubt about the importance of Facebook to our daily and professional lives. Without it, a lot of us would be more productive… I mean, we’d have one less avenue to advertise ourselves and our businesses in a unique and social way. With the release of the new Facebook Timelines for fan pages (which will have an enforced turnover tomorrow), all of our fan pages are in for a huge facelift.

Don’t Be Afraid of Change

dontbeafraidofchangeI’ve always tried to be open to the changes all of our favorite websites go through. It always amuses me when everybody explodes over the inclusion (or exclusion) of a feature, only to forget what they were upset about a few days later. It’s not a big deal, and we all need to anticipate and accept the changes as they come–especially with a site that offers much of its services for free. The addition of Timeline to brand pages is a huge deal. It offers outstanding customization for your brand, making you look professional, which in turn gets business.

Cool beans.

Freshen Up Your Tabs

Delicious and refreshing--just what your company needs.
Delicious and refreshing–just what your company needs.

The biggest appeal, I always found, was the custom tabs Facebook allows you to make for your pages. With Timeline, tabs just got a little bit better, mainly because they get uninterrupted space on your page–essentially becoming a microsite inside Facebook.

Here’s some things you’ll need to keep in mind for the change over:

  • Bigger canvas area (810px, but 780px because of margins)
  • Discontinuing the ability to set a landing tab for people who are not fans
  • Custom thumbnails for your tabs
  • All apps (meaning your custom tab) have their own URL, so you can set your links on your website (or elsewhere) to land on whatever Facebook tab you want

Some of those are good. Some of them are bad. But we all gotta adapt, right?

Yeah, yeah… So how the heck do I make a tab?!

future_personAs I said to not be afraid of change, it certainly can be frustrating. Every time I go back to make a custom tab, I have to spend an indecent amount of time figuring out how to do it again. I’m going to be as thorough as I can so you can tell how it matches to your current version of Facebook, as I’ve found that posts about custom tabs become stale very quickly. So, if you’re from the future, you might as well ignore this, but at least I can help my people now. So, let’s make tabs like it’s March 29, 2012.

  1. Make Yourself a Developer
    picture1Even if you don’t consider yourself one, just play pretend. Navigate to https://developers.facebook.com/apps and allow Facebook Developer to gain access to your basic information.
  2. Create a New App
    picture2
    Click the “+ Create New App” button on the right hand side. A modal will appear asking for an app name and app namespace. Name either of these however you want, as long as they’re available. You can change them both later.Facebook as also partnered with Heroku to offer free hosting of your apps. That’s super cool, and you can click the “learn more” link to see if it’s viable option for you. My example will be focusing on those that can host themselves.
  3. Create a Tab
    picture3
    All right! We have our app. Let’s make a tab. Click the Page Tab and fill out the correct information.
    picture4The Page Tab Name will appear in the tab navigation under your cover image and on the dropdown navigation when you view a tab page. The page URL points to where ever you have your page hosted. Keep in mind, you MUST have a secure host (a URL that starts with https://), or your pages won’t appear when Facebook is viewed under a secure connection.

You can also select the width of your page. When designing, be aware of the scrollbar within the canvas area.

You can further customize your tab by clicking “Advanced” in the left sidebar under “Settings.” Here, you can further change your canvas settings by adjusting the width and height.

  • Add Your New App to Your Page
    This has been streamlined and made simpler, as long as you can easily find the solution. To add your new app to your Facebook page, copy and paste this into your address bar.
    https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

 

So it should look something like this:

screen-shot-2012-03-21-at-124455-pm
You’ll come to a page that asks what page you’d like to add it to. Select and then click “Add Page Tab.”screen-shot-2012-03-21-at-124716-pm

BAM. Now you got yourself a new page tab!

  • Change the Thumbnail of Your Page
    screen-shot-2012-03-21-at-125048-pmOn your Timeline, click the down arrow to the side of the your favorite bar. This allows you to do a few things with your tabs: remove it from your favorite bar, edit the settings (the name and thumbnail), link to the page (to pseudo-fangate) and uninstall the app. To change the picture of the page tab, and to further brand your Timeline, click edit settings. You can then add a 111×74 image to represent your new tab.

 

In Conclusion, We Did It!

We did it. We’re ready to brave the Timeline storm and make our fan pages totally awesome. There’s still more you can do to further customize your pages, and there’s myriad ideas to make a creative experience for your potential customers to enjoy. The purpose of this article was to help make the addition of your tabs as pain free and as straight forward as possible, while leaving the fun parts of designing and developing to you. So have at it, and impress the world!