How can I add custom pages to a Facebook fan page?

Jelena May 7, 2011

Thank you Angela and Justin for posting the Facebook marketing guidebook.

My main question, and it wasn’t highlighted in the guide, is how to customize the left side options? Like on the MakeUseOf fan page, you have custom pages, i.e. Giveaways codes, ALL MakeUseOf Guides etc.

Can you post or add something to guide how to create custom pages? I need to create and grow a fan page for my company, any help is much appreciated.
Many thanks,

  1. - Jeff
    December 29, 2011 at 6:57 pm

    Jonathan's post really helped. I had already read through all these steps, but thought I was missing something. But now I see that I wasn't :)

    I wanted to add that is that all external URLs need to be https. If your domain does not have https set up, then your pages will not show up within your tabs or canvas.

  2. Sam Sotiropoulos
    June 17, 2011 at 1:21 am

    Hello All,

    First off, let me thank Jonathan for the excellent instructions and Angela's clarification. I have successfully set up an app/page. Yay! HOWEVER, when I try to view the tab on my given FB Page as another FB user I get the following error message: 

    SSL connection error
    Unable to make a secure connection to the server. This may be a problem with the server, or it may be requiring a client authentication certificate that you don't have.
    Error 107 (net::ERR_SSL_PROTOCOL_ERROR): SSL protocol error.

    What went wrong? Any help would be greatly appreciated?

    Thanks In Advance,


    • Angela Alcorn
      June 17, 2011 at 8:34 am

      It sounds like the user viewing the page has HTTPS set up in their preferences, whereas FBML doesn't support HTTPS. Try changing the settings (Account > Account Settings > Account Security) back to HTTP and see if it works.

      • Sam Sotiropoulos
        June 17, 2011 at 4:00 pm

        Angela, you were correct! But, what to do in the case where people do have https set up in their FB prefs? Is there a workaround? Are you aware of any such thing?

  3. Tolu
    May 13, 2011 at 2:41 pm

    Thanks Angela. 

  4. Tolu
    May 13, 2011 at 1:37 pm

    Hi. Have followed the instructions above and managed to set up the custom page. Issue I am having is how do I remove the wordpress headers and nav? 

    • Angela Alcorn
      May 13, 2011 at 2:16 pm

      If you're talking about the grey admin bar, that will only be seen by people logged in to WordPress and you can get rid of it in your admin settings. Go to Users > Your Profile, find the "show Admin Bar" section then uncheck the box for "when viewing site".

      If you mean navigation links to home and other pages, it will be in the WordPress theme you've chosen. Search around until you find a theme without the navigation at the top. Side navigation can be turned off by removing the widgets. 

      You could also consider paying to be able to edit the theme or changing your Facebook app to use a site you host elsewhere (some other free website service).

  5. Angela Alcorn
    May 8, 2011 at 6:18 am

    Jonathan's answer has covered the basics and more.

    At the moment, most Facebook page admins use the application FBML to create custom pages. The FBML application was described in the guide when I explained how to create a custom landing page. You can easily repeat this process for as many extra custom pages as you need.

    However, this leaves you entirely reliant on the FBML application remaining functional. If you want to ensure permanency, Jonathon's process will let you create your own application with your exact set-up.

  6. Jonathan Mould
    May 7, 2011 at 1:33 pm

    Up to now FBML has been used for custom tabs but I think it is being deprecated. I don't know if anyone else does this but I have found that Facebook applications are handy for creating custom tabs. If you're not familiar, applications show another webpage but within Facebook.
    So, create your content using a free hosting site ( I've used Since this is for a tab you will need to limit the width to 520px and, in my opinion, using a white background looks best. Once you have your content ready make a note of the address and head over to . This is how to set up the app.
    1. Click on "My Apps" in the top banner.
    2. Click on "Set up new App"
    3. Enter a name for the application. (This is not what will appear on your page)
    4. Continue through the terms and captcha.
    5. The screen that you see next looks quite daunting but each field is explained along the right hand side :)
    6. Once you have entered the basic information click on "Facebook Intergration".
    7. Again, it is all explained on the page but the key field we need is "Canvas URL". This is where you enter the address of your webpage.
    8. set "iframe size" to auto-resize
    9.Scroll down to the "page tabs" section and enter the tab name and URL. This URL will be the same as the canvas URL.
    10. Facebook requires a secure URL for the canvas and tab. Just change the start of the address from http to https.
    11.Now go to back to the developers page and click on my apps. You will see your app on the right hand side. Click on its name.
    12. Click on Application profile page.
    13. On the left hand side click on add to my page. Then click on your page name.
    14. Now go to your fan page settings and click on Apps.
    15. You will see your app listed. Click on edit settings and add tab. (You can also change the name of the tab here)
    16. Your tab is now set up.
    Long process but you do get all the functionality of html. Hope this works for you.

Ads by Google