Adding Custom Tabs on New Facebook Timeline Business Pages

facebook Tabs on new Timeline Pages

Updated April 2014

Facebook pages for businesses and brands offer a real opportunity to provide customised content to your users, linked to from the “custom tabs” just underneath your page cover image.  You can add pretty much anything you want here – if you know how!

Creating Custom tabs (pages) on Facebook should be simple.  Unfortunately it’s not!  It’s not overly difficult – just very “clunky”, and the hardest part is actually having the content available on your own website in advance of integrating it with Facebook.

 

For hands on practical advice and training –
consider our new “Embrace the Space” Social Media Masterclass!

 

Follow these 8 steps to create your own custom Facebook Tabs:

1) have the content (a web file) ready and available on your own website.  This must be available “securely” (via SSL) and normally (without the SSL).  Eg: https://nsdesign.net/facebook/test.htmlhttp://nsdesign.net/facebook/test.html

2) Login to Facebook, and go to http://developers.facebook.com

3) Click the “Apps” link in the top menu, and select the  “Create a New App” link

4) Give the Application a “Display Name” (the name that appears at the top of the page – eg “Our Online Bookings”) and Choose a Category (“Apps for Pages”) then click “Create App” and complete the Security Check.

5) Click the “Settings” section of your new App, and take a note of the “App ID” (at the top of the page) eg: 351733947744248 (you’ll need this at point 7).  Provide a contact Email, and then click on the “+ Add Platform” option, and choose “Page Tab”

6) On the “Page Tab” section, provide the following:

“Page Tab Name” – eg: “Welcome to our Bookings Page”
“Page Tab URL” – eg: http://nsdesign.net/facebook/test.html
“Secure Page Tab URL” – eg: https://nsdesign.net/facebook/test.html
Leave the “Page Admin Control” and “Wide Page Tab” options to YES.
Also consider changing the Page Tab Image (although you can do this later when it’s live on your page (optimum size is 111px x 74px).

Save changes.
Lastly click the “Status & Review” section of your App, and make it Live – change to YES.

7) Now we need to “add” the app, TO your facebook page.  This is tricky!
You need to visit this URL in a web browser (but change the [parameters] for the actual content):

https://www.facebook.com/dialog/pagetab?app_id=[app_id]&next=[Page_Tab_URL]

For example – it should look something like this:
https://www.facebook.com/dialog/pagetab?app_id=351733947744248&next=http://nsdesign.net/facebook/test.html

It will ask you to select a Page you want this to add to, and you’re almost done!

8 ) Switch to your Business Facebook Page that you want to feature the Custom Tab (use the pulldown triangle at the top right).
Depending on whether your business page is on the OLD or NEW layout (all business pages are soon due to change to a brand new layout), follow the correct option below:

OLD Page Layout:
You’ll see the new tab under the cover image (you may need to click the dropdown to the right of the tabs).  You can then re-order the tabs by “swapping position” with another tab, and also change the tab image and name.

NEW Page Layout:
You’ll see the new tab under the cover image in the main navigation (it might be under the “more” pulldown). You’ll also see it listed in the “Apps” section down the left of the page.  You cannot re-order these tabs (it’s supposedly coming soon) but you can change the name (and customise the image) by visiting the “Apps” section of the Page “Settings”.

And you’re done!  Custom Content added as a “tab” in Facebook.  It could be your booking system, a subscribe form, ecommerce pages, or anything else you can create a webpage for.

 

Looking for a simpler Life?

Apps to help you add custom tab content!
https://apps.facebook.com/static_html_plus/

Some Other resources to help you add custom content (a mixture of FREE and PAID Facebook Content):
http://woobox.com/
https://decor.io/
https://www.pageyourself.com/

Some recommended Apps “out the box”
https://apps.facebook.com/youtube-app/
https://apps.facebook.com/twitter-tab-app/
https://apps.facebook.com/pinterest-tab/

Share this on social media...

13 Responses to “Adding Custom Tabs on New Facebook Timeline Business Pages”

  1. Tim Dawson

    I fully agree it’s a horrendously clunky process. But it seems that if you’re a Business page, you cannot create an App at all, you have to be a personal user. I tried many times to go to the ‘developers’ page, but always got returned to the Admin for my Page. So I’ve tried going via my personal account, and now that won’t authenticate because (I suspect) there’s a clash between my truly personal account and the ‘personal’ account behind my business page. Does that make any sense ?

    In trying to sort this out I’ve had to send a scan of my passort to Facebook. Worse than the Gestapo. I now await their mercy.

    When all that’s done I’m going to need to set up an SSL (according to what you say above). That will be new territory for me. But you’re hosting my site, so I’m sure you’ll help if I get stuck.

  2. Gary

    It’s fine to create the app as a “personal user” and then later on (point 7 above) you then “add” it to whatever business page you want. But only of course if the “personal account” is the one that did indeed create (or manages) the buisness pages!.. We can help add SSL for you later on if you require it!

  3. Tim Dawson

    The Facebook police have allowed me in, I can now create an App. I’m a little surprised at the need for a secure site, as it will rule out the huge majority of private Facebook account holders. Perhaps it’s meant to do just that. And prevent hacking, of course. There are probably better thnigs I can do on the Holiday Mull Facebook page before going further down this route, although it does seem to leave the page a bit bare at the top.

  4. Gary

    SSL is not required… you can leave it blank.. but i’d strongly recommend you include it.. Otherwise the many (and growing volume of) facebook users who choose to access facebook using SSL won’t see any of your apps.

  5. Larry Mason

    In order for someone to view the tabs I added the user must turn off SECURE Browsing in the facebook profile. Am I doing something wrong? my page is Larry Mason Real Estate Broker
    Thanks

  6. Gary

    Larry, sounds like your content isn’t available via SSL and you therefore haven’t given the ‘secure’ urls to Facebook when creating the app. I’d strongly suggest getting an SSL certificate for your website (assuming your Facebook content is hosted on your site) and then giving Facebook the secure versions too. Then anyone on Facebook – those browsing with, or without SSL turned on in Facebook settings will see your content.

  7. Denise Donnelly

    Well thank you very much – your a star now have an App that will (when I create the content) get users visiting my website and display special offers!!
    One Tip it took me a while to figure out that I had to put my app ID and URL in section 7 – I kept getting an error it may just be me having a blonde moment but it could be a bit clearer to help others.

    Thanks very much again !!

  8. Gary

    Glad you got there in the end Denise… I realise it’s not the most intuitive, and Facebook will probably change the process soon (like they tend to do – not always for the better!!)

  9. Sam

    Hi Gary,

    I’m in the process of setting this up for my page. Can you just go over the URLs with me?

    Canvas URL – is this the URL of the directory my page (that will display the tabs content) will appear under?

    Do you know how I can obtain an SSL certificate (for free, if possible?! As the page I’m creating the app for is none profit, so I don’t really want to have to pay dozens for one!) I haven’t the foggiest clue, SSL isn’t something I have dealt with before but I know it is becoming increasingly common in websites and social media.

    Thanks,

    Sam

  10. Gary

    Hi Sam – yes – if my content (for example) can be seen online here: http://nsdesign.net/facebook/test.html then my “Canvas URL” is the same without the filename (ie: just the directory) – http://nsdesign.net/facebook/

    As for SSL – speak to whoever is hosting your site, and see what costs they can charge for a dedicated SSL. Or they may even have a “shared SSL” which might be perfect for you.. Be aware of free SSL – they’re often not supported in all browsers. Email us direct if you still need help – I’ll do a discounted price given your “non profit”.

  11. Goldy

    Hi,
    Very helpful post an comments!

    I have a question about creating a custom tab linking to another facebook page, or to a video on youtube. Is there any way do do that (I copied the page url but it didn’t work)

    Thanks!

    • Gary

      Hi – I’m pretty sure the only way to do it is to build the actual page yourself, and then simply link to the other facebook page (or redirect there). For the YouTube video – just embed it on the custom page you’re creating – should work fine for you.