Facebook Tutorial # 2 - Woobox Fangate and Custom Tabs

Woobox has several different Apps to choose from. I started with the App for HTML Fan Gate. This will allow me to give away a Fan Only Freebie each week.  Only the people that LIKE my Facebook page will be able to see the freebie.  (If you go to my Facebook page, and click on the FREE tab, you will see how the landing page looks.)

If you do NOT want to learn about Woobox, you can scroll down to just the portion about the custom tabs.

To set up an App on Woobox, you first start out by logging in using your Facebook log in.  If your business (TPT) page is different than your main account (some TPT sellers use their main FB account for their business, while others like me created a separate page for the store) you can still set up your App for the Fan Gate.  I'll share the difference later in this tutorial.

Note:  Woo Box changed their format at the end of October 2014.  This tutorial is being updated with a few new screenshots.  The process is still the same,  it just looks a little different than it did before.

After you have logged in to Woobox, you will want to click in the upper menu (as seen in the above screen shot) where it says static tab.  When the new page opens, you will click where it says "Create New Tab"

If you already have tabs (like I do) to re-configure them, you click on Edit tab.

To configure your tab, you will need to follow a few simple steps.

The first section is the PAGE SOURCE.  This is for the first image for your fan gate.  This particular section highlights HTML.  This is a little advanced, but it is used when you want to make an image map.  An image map is a clickable image.   You'll see in the upper right corner 4 choices; URL, Redirect, Image, or HTML. The URL section is in place of the HTML pictured.  You'd type in the URL path for the image you want to use.  The Redirect, is if you are redirecting the image to another URL.  IMAGE is when you upload the image you want to use onto Woo Box.  and HTML (as seen below) has coding which tells the App what image, link, etc.

This next screen show shows what the page will look like when the URL is selected rather than the HTML.

Below, where it says FAN GATE PAGE SOURCE - is where you will put the URL, or upload the image that fans see.  You have the option to choose URL, Image, and HTML.  Note, there is a selection for OFF. If you click OFF there,  anyone will be able to see your freebie.  So you want to make sure that you have either a URL, or image uploaded there.

Once you have configured your tab, be sure to SAVE.  

After you are finished saving,  the tab is then installed.  To view it, there is a link on the left hand side that says View Facebook Tab.  The page will redirect to your Facebook page.  Please note:  If you are using your main account to create the tabs, you won't have to do anything else to reach the settings page on Facebook.  If you are using a separate business FB page, then  you'll see a request at the top of the page that asks you to change names.  At this point after I click to switch from Crayonbox Learning to my name, Danielle Westvang I usually go back to my FB page and log in again.  It's pretty simple.

How that you have the tabs made,  it's time to make it look cute! :)

Custom Tabs

(update 7/10/14 - This is for the older version of Facebook.   Scroll down to see the tutorial for the new version)

This is a screenshot of how my FB page looks today.  As you can see there are 3 custom tabs for TPT, Free, and Pins.   

To the right of the last custom pin (where the purple arrow is) there is a little pull down icon. Click on that.  It will bring down the 2nd row of button spaces and also the edit button as shown in the next screen shot.

 You will want to click on the little edit button in the upper right corner of the tab you would like to customize.  You will see a scroll menu that comes up when you have clicked on the edit menu.

Scroll down to where it says EDIT SETTINGS:

After you click the Edit settings, a little box will come up that looks like this:

In the box that says Custom Tab Name: That is where you type in what you want to call your button. On mine it says Fan Freebies.  Above that where it says "Custom Tab Image" you will click on the link next to it marked change.

If this is your first time changing the image, it will be a generic FB image at first.

The size of the image you need is 111 x 74 pixels. It HAS to be exact for it to work.  It will not upload and save if you have it too wide or too tall.

You will choose the file you want to upload and save.   

You can complete the process for how ever many App tabs you have.  This tutorial may seem long, but to actually complete the steps takes just a few minutes.   After you have installed your Apps and changed the images,  then you will want to log into your Facebook page/account and see how they look.  If for some reason they did not load correctly or look different then you can go back through and repeat the steps.

Even if you use different Apps for the HTML Fan Gate,  changing the images will work the same.

NEW FACEBOOK PAGE LAYOUT

If your Facebook page layout has not changed, it will soon enough.  Facebook has changed the look of the page so that the tabs are on the left menu instead of underneath the cover.  The screen shots below explain how to edit those tabs.  (You will still install the Woo Box App the same as above)

This is what the new page layout looks like.  As you can see, just below the header are links not tabs.  Click on the MORE to see the pull down menu (as seen in picture below).

From the pull down menu, select the tab that you would like to edit.

You'll change out your images just like you would on the old page format. (Above)

This screen shot shows the bottom of the settings page  You can change the tab image, and title of the tab where the green arrow indicates.  The tab dimensions 111 x 74 are still the same.

Update 7/6/13 - If you would like to know how to host your fan freebies on Google Docs, I have written a new tutorial to explain the process {HERE}.

I hope that this tutorial helps.  If you have any questions,  feel free to email me and I will do my best to help you.


2/15/14 -  I have updated this page to include a link to Erica Bohrer's new "Getting Started on TPT" link up.  She has written a really thorough how-to post for new and veteran TPT sellers alike.  Click on the link below to stop by and visit her Blog.