FanPage Custom Tab Tutorial

Facebook recently changed how to create Custom Tabs for our Fan Pages.  Here is a tutorial that will work as of todays date 02/18/2012.

This is an ADVANCED Tutorial

  1.  Go to Facebook Developers Site  If this is the first time using the Developers site you will need to verify your account.  Just follow the steps and answer the questions Facebook asks.
  2. Click on Apps in  the top Menu bar
  3. Go to the Create New App button (Upper Right)
  4. Fill in the App Display Name and check I Agree
  5. Click Continue and enter in the Captcha form on the next screen then Submit.
  6. Here is a screen shot of the next screen and the areas of interest for creating a Custom Tab.  Click the generic Icons to upload a jpg image of the dimensions indicated.  The only other area of interest is selecting Page Tab.
  7. Expand the Page Tab section and fill in the blanks.  The Page Tab Name is what will show in your list of Tabs on your Fanpage.  The Page Tab URL is where the content you are wanting to display is stored.  The Secure Page Tab URL is the https version of your content location.  Facebook now requires content brought into Facebook be stored on a secured server.  This means your domain must have a Security Certificate OR the content needs to be stored somewhere secured.  Creating this content is beyond the scope of this tutorial. Click Save Changes.
  8. Now for the confusing part.  As of Feb 1st 2012 Facebook no longer has the link to connect your Custom Tab to your Fanpage.  Put this link:  https://www.facebook.com/dialog/pagetab?app_id=YourAppId&display=popup&next=http://www.facebook.com/connect/login_success.html in your browser (in a new window or tab) and replace YourAppId with your app ID number then go to that page.  You will see a selection box to choose your Fanpage (it will show all pages you are an Admin of).  Select the correct page and click Add Page Tab near the bottom of the screen.  Here is a screen shot of the link above for my Custom Tab.
  9. Once you click Add Page Tab you will get a white page that reads Success.  You can close that window – the Custom Tab has been added the the App section of the chosen page.
  10. Go to the Fanpage you have added the Custom Tab too and Edit Page.
  11. Once in the Edit screen look to the menu on the Left.  Go to Apps. If you want to change the Tab Lable this is where you would access that.  Otherwise this step is not needed.
  12. You will now see the Custom Tab in your FanPage Tabs List.
  13. You are done – click the tab to make sure it displays your content.  Remember there is only 520 px wide allowed.  If the content is wider there will be a horizontal scroll bar.  Also remember if it is on a non-secure server it will not display at all.  If you are not versed in HTML or do not have a program to create the page for you then that may be something you need to outsource to someone that can create it.  One other note: If all steps are followed and the content still does not show (produces a 405 error) then rename your page to a .php instead of .html or .htm  This is fixed the problem for me several times. 

Leave a Reply

Your email address will not be published. Required fields are marked *