Sunday, April 28, 2013

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.  




27 comments:

  1. Thank you soooo much for posting this!! I probably will be updating my buttons tonight instead of going to bed early!!! :)

    Katie :)
    (KTP on TPT)

    ReplyDelete
  2. Dani, I already suspected you were amazing when you helped the Moore community by raising thousands of dollars. Then you helped Teresa and me get the Moore teacher donation going (and you donated!). So now I see you have this blogpost- which is exactly what I need. It is official. You are officially, unequivocally AMAZING!
    Thank you so much! :)
    Darlene
    meatballsinthemiddle

    ReplyDelete
  3. Hi! Thank you so much for this post! I have a quick request...I have linked my facebook to my blog and to my pinterest but I don't know how to link it to TPT. Can you help?

    ReplyDelete
  4. Laken, do you have an email address where I can contact you? If you're referring to making a tab on your Facebook to TPT like I have on my Facebook page (www.facebook.com/crayonboxlearning) You'd create it the same way as the tutorial (making a new tab), and instead of uploading an image, you'd click the selection to URL and put the URL you are redirecting to. So that when visitors click on the tab, the window opens up into your TPT store. If you have questions, please email me at crayonboxlearning@gmail.com and I can help you.

    Dani
    Crayonbox Learning!

    ReplyDelete
  5. Thank you so much for posting this! I have been pulling my hair out the last few days trying to figure this out. You made it much easier!!!

    Primary Classrooms are Oceans of Fun

    ReplyDelete
  6. This sounds great but I am new to this and need a little more help understanding this. If I am going to offer a freebie and it is a paid TPT item, how do I do this without the fan being charged a fee? Do I save it to a different URL and if so where and how do you do that? Thanks for any help you can give. Again this is awesome and I would love to try it out.

    ReplyDelete
    Replies
    1. Hi Stella, what you would do is upload your freebie to an external source such as Google Docs (or a URL if you have one), and then link the download to your Fan Gate. The directions for where you would put the URL is included in the tutorial above.

      If you need more individual help, you can email me at crayonboxlearning@gmail.com and I will be happy to help.

      Delete
    2. Thank you for your help :)!

      Delete
  7. DANI-
    PLEASE HELP!
    I followed your tutorial (after I attempted the shortstack and was told by others it required permission to access the freebie even after liking the page) and I don't think I did it right bc when you click it all you see is the image of the cover of my freebie! The shortstack one is link 1 and woobox is link 2- both have the same cover image. I am a newbie at this and failing miserably!!
    Thanks!
    Jenn
    https://www.facebook.com/CrayonsCutiesCommonCore

    ReplyDelete
    Replies
    1. Jenn - I am answering you here, because you didn't include an email address. I checked both of your tabs. The Short Stack version works, the reason why you're getting the permissions denied isn't because of the App. It is because your file on Google Docs is set to private instead of anyone with a link. You can change this by logging into Google Docs,click the box next to the file and right mouse click. The box comes up, in the middle where it says Private, click change, and then select "anyone with a link" which is the middle selection. Save. This will allow anyone with the link to download it. Second issue with the Woo Box freebie tab: It is not configured correctly. I would suggest deleting that app and starting over with the tutorial. You've missed a step, most likely have the images in the wrong order. You don't really need both Short Stack and Woo Box. I prefer Woo Box myself because it has more options and is free. If you still need help, you can email me directly at crayonboxlearning@gmail.com -Danielle-

      Delete
  8. Thanks Daneille for this tutorial.
    I have created the page tab App , however my app is visible to everyone even those who come on that link without logging in ... Can you help me out here, I dont want users watch the page without logging in facebook?

    ReplyDelete
  9. Great tutorials!!! Thanks a million-- this saved me so much time.

    ReplyDelete
  10. Hi Danielle-
    I am at the point where I have to convert to WooBox and although I am trying to follow this tutorial, I cannot figure it out. How do I make an image appear, and if they like my page, they get an image that will link them to the freebie and link to another spot (similar to the frenzies). I uploaded the images I need to photobucket and have urls and htmls for them but am still so confused. Can you help? jennrussell1@msn.com
    Thanks!

    ReplyDelete
  11. Hi Danielle,
    I'm such a newbie and this will probably be a silly question, but how do you make an image exactly 111 x 74 pixels?
    Thanks!
    Elyse
    elyserycroft@hotmail.com

    ReplyDelete
  12. hello Danielle,
    I 'm wondering why link to another page inside HTML fangate tab work only with my opera browser (another non facebook page opens normally, "inside facebook"), but i have tried to click on link useing google chrome, and it works only with >right click>open link in another tab.
    I'm concerned that fans of that page have the same problem and they would not be able to open link...

    BTW great tutorial and sorry if question is not clear, because I'm bad at english:)

    ReplyDelete
  13. Thanks so much for this tutorial!!!

    ReplyDelete
  14. Thank you for posting this amazing tutorial! This is just what I was looking for! How do I create an image for the tabs that is exactly 111x74 pixels? This is probably a silly question but I'm not coming up with an answer in my head! :) aolson@frazee.k12.mn.us Thanks so much, Danielle!

    Mrs. Olson’s Lucky Little Learners

    ReplyDelete
  15. Thank you so much for sharing! I have been looking and looking online to see how I can make my own tabs! So glad a friend sent me your way! :)

    http://firstgradeshashay.blogspot.com/

    ReplyDelete
  16. What an AMAZING tutorial!! Everyone time I see a question about Facebook freebies or tabs I direct them to this tutorial.

    ReplyDelete
  17. Thank you, thank you, thank you!!!! I was thinking I had to pay on woobox after looking at an older post. Now I have it figured out!!!
    Kelly
    MyFabulousClass

    ReplyDelete
  18. Danielle,

    This is very helpful! I am very grateful you took the time to post this because FB never seems to make anything easy or straightforward. Ha!

    I do have one question though. It seems like your FB page no longer has the tabs as the top but are listed in the left-sidebar under "Apps" instead. Other FB pages (like Coca-Cola) still have the tabs at the top. Do you know why that is? Another FB change?

    Jenny

    ReplyDelete
  19. Danielle, thank so much for this awesome post! It is so informative!!
    Can you tell me how to make an image exactly 111 x 74 pixels?
    I thought I had it, but it just won't work.... :(
    Thank you!!!

    Jill
    ABCs and Polkadots

    ReplyDelete

Thank you for your comment! I love to hear from you!