The Software Development Blog | AndPlus

Creating Custom Facebook Tabs

Written by Brian Geary | Mar 21, 2012 4:00:00 AM

With the new Facebook pages for businesses things have been a little difficult to figure out. Features that were simple to integrate with the old business pages are missing from the new timeline business pages. One of those features that I loved to use was the default landing tab for your Facebook home page. It allowed you to set a custom page that users would see as soon as they looked you up on Facebook. It was great for posting promotions, calls to action and asking fans to like your page.

With a little investigation I found a way to recreate the default landing tab on business pages, it's not simple, but as long as you follow these directions you should have one up and running in a short period of time.

Create the Content

The first thing that you want to do is create the content you want on your tab. I don't want to go into detail about the actual coding on this but what you want to do is create and HTML page that is about 800 pixels wide and not much taller than it is wide. You can create this content with HTML, PHP, CSS, or whatever your favorite web based language is. If you need help creating content, feel free to contact AndPlus creating custom tabs and adding Facebook integration. For this guide lets just say we save this webpage as http://www.mywebsite.com/facebook/tab.html.

Create a Tab Image

This tab image will the image that shows pup on the tab. It will look similar to your Photos tab. You can create a custom image for this tab and pin it to your timeline so it always shows up directly below your banner image. The image must be 111 x 74 pixels and should entice fans to click on the tab to see what it's all about. In order to set this image you must go to your Facebook page. Go to the tab that you want to be your custom tab. Rollover it until the edit pencil pops up in the top right corner of the tab, click that and go down to edit settings. A new window will pop up and click on "Custom Tab Image" and then follow the instructions on the screen.

Create an App

Now that you have the basic framework laid out for your new custom tab, its time to create the tab page itself. I know creating an app sounds scary but this is really the easiest part. You ' need to know anything about developing apps, its really just filling in the blanks and following these instructions. First, click on this link https://developers.facebook.com/apps. This will direct you to Facebooks web page to create new apps.

Fist enter a name for your App. Anything will do. I would name it something relative to the page like "Landing page March 2012" or something. The name space is not needed since we are just creating this app for a Page Tab. Click continue, and complete the CAPTCHA security check.

On the Basic Settings page for your newly create app, no further information is needed under Basic Info, so click on the Page Tab selection at the bottom.

For Page Tab Name, enter the name you would like to appear below the custom tab image on your Facebook Page.

For Page Tab URL, enter the URL where the content exists on your server. Our example above was http://www.mywebsite.com/facebook/tab.html.

For Secure Page Tab URL, enter the same as the Page Tab URL.

You can leave Page Tab Edit URL blank, choose Wide (810px) for the Page Tab Width and click Save Changes.

And your done! This is something that used to be a lot easier with Facebook apps like iFrame, but an app like iFrame is not available for the new Facebook business pages with timeline. As well as following this guide, you can also check the official Facebook Tab Tutorial page for more information. http://developers.facebook.com/docs/appsonfacebook/pagetabs/

Here at AndPlus we are pros at social integration with your Facebook page and your website. Contact us if you are looking to create custom tabs that interact between your website and your Facebook page.