I’ve got something really awesome to share with you today, if you’re using Facebook for your business (which you really should be) then you’re going to love it. Facebook Tab Builder is a completely free tool that lets you add images, text, videos, opt in codes or any HTML, drag it around an empty canvas, then get the code to use for your fan page. It’s a really easy solution for your fan page tabs and saves you spending lots of money on a tab builder system.

Click here to visit the Facebook Tab Builder

Walkthrough

Features

I’ve tried to get as many features added as I can, if you think anything is missing then leave a comment below with your ideas.

Drag and Drop

Obviously the most notable feature, once you’ve added any media you’re free to drag it around the canvas and drop it where you want.

Add different media types

Using the toolbar on the right you can add images, videos, text (with lists and other styling options), opt in forms and other html content (just paste it in the opt in forms box and untick “Auto Style Forms”).

Pre-Designed images

There’s a few pre-made images for you to choose from because I know not all of you, well most of you aren’t, designers. Again, if there’s any graphics you think will be helpful to lots of people to have pre-designed, then leave a comment below and I’ll try to get it added.

Auto style opt in forms

You’re not all design geeks, so this option allows you to instantly style your opt in forms without having to manually do it with your email marketing platform.  There may be some text you’ll want to change in the code they provide you, e.g. the submit button has value=”submit” so it just says submit, change this to something like value=”Get Instant Access”.

How to Install

To install the code generated from the Facebook Tab Builder, we’re going to use a Facebook app called Static HTML.

1. Access it here: https://www.facebook.com/add.php?api_key=190322544333196&pages
2. On that page, scroll through the list of your pages and click the one you would like to add a custom tab to
3. A blue button will appear below “Add Static HTML: iframe tabs”, click this
4. You’ll now be redirected back to your pages timeline, below the cover photo on the right there will be a box that says “Welcome”, if you don’t see that box, click the arrow pointing down on the right
5. You’ll be taken to a page to edit your welcome tab code, just paste in your code from the Tab Builder
6. To see what the tab looks like for your visitors, hit the “Preview” button, on the right above the text boxes

Custom tab icon

The tab doesn’t look great from the timeline now and probably isn’t going to get many clicks, that’s why you want to customise the tab icon. Here’s how to do that:

1. From your timeline, if you’ve not got the admin panel open, click the “Admin Panel” button at the top right
2.  Now click the “Manage” drop down, then “Edit Page”
3. From the navigation list click “Apps”, then you’ll see Static HTML: iframe tabs
4. Then click “Edit Settings” and “Change” in the window that pops up (next to “Custom Tab Image”)
5. You’ll now be on this page:

Just click “Change” and then browse for your new icon. Your icon should be 111px x 74px.

Help & Support

How wide should my images be?

The maximum width of anything in a timeline tab is 810px, so make sure everything is suitably sized.

Where can I access the Facebook Tab Builder?

You can access it here: http://www.darylrosser.com/builder/

If you have any other questions or problems then leave a comment below, I’ll try to respond to all of them. Remember this is only the beta version, so we’re still open to adding features and will fixing any bugs that occur.

Enjoy the tool!