Introducing the Facebook Custom Tab Generator

featured-image Design & Development

R.J. LaCount Apr 20 2012

Custom tabs on Facebook Pages allow us to display our own HTML content inside Facebook Pages by embedding code in iframes. This is done by creating a Facebook app and providing a few parameters (like the URL where our custom HTML page is located). Here’s an example of a custom tab:

Custom Tab Example

Add a Custom Tab to your Facebook Page

Have you tried to add a Custom Tab Application to your Facebook Page lately? It seems impossible with the Facebook Timeline changes.

Before Timeline, every app used an App Profile Page. This was a confusing process because every Facebook Custom Tab forced Facebook to create these App Profile Pages, which were unique URLs inside Facebook that no one visited. Since Facebook didn’t want thousands of App Profile Pages, they removed the process.

Unfortunately, this also removed a convenient button on App Profile Pages that allowed us to add our apps as a custom tab on any Page we admin.

Facebook’s solution to add apps to Pages is to visit this URL, replacing the all-caps values with your app’s info:

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_CANVAS_URL

App Info Screenshot showing values for YOUR_APP_ID and YOUR_CANVAS_URL

At this custom URL you’ll get a drop-down list of all the pages you admin and you can add your app to any of them.

So, that works. Why do I need the Custom Tab Generator?

Because simple tools are awesome. A couple big input fields are much easier to deal with than remembering a complicated URL or changing sections of a bookmark every time you want to use it. So here it is:

Button for Custom Tab Generator

Inspired by YouTube Time, the Facebook Custom Tab Generator takes the two values you enter and generates a window set at the custom URL to add your app to any Page where you are the admin. That’s it.

This:

Working Screenshot for Custom Tab Generator

Will generate this:

Add Page Tab Dialog Box

I originally created the tool for myself; In fact, I’ve already used it several times from the time I built it and the time this post went live. I’m excited to share it with you now, and hopefully it is as useful to you as it will be for me.

If you like the Facebook Custom Tab Generator, a share would be much appreciated. Let us know what you think in the comments below!

tags : FacebookFacebook PagesFacebook Timeline

4 Comments

  1. richie

    Great tool! Keep it Simple Stupid (no offence;-))

  2. R.J. This is a real time saver. We will definitely put this to good use. It is amazing how simple you can make a annoying process. Thanks for hooking us up.

  3. Simple but effective tool RJ, gonna save me a ton of time, thanks

  4. This is such an amazing tool. I just don’t understand what the Canvas URL is, though?

Comments are closed.