Facebook business pages just went through quite a change with the release of the new page design that includes the addition of Timeline. But that also means your old way of customizing page tabs -- the tabs you could use to pull in your own custom content alongside the standard tabs like "Photos" and "Likes" -- has changed. These tabs are important for your social media marketing, because they let you create a much richer user experience on Facebook and control the content that your followers see when they visit your page.
So, with the new layout, how do you create your own custom Facebook tabs? Turns out it's not as difficult as you might think. Just follow these 6 simple steps to creating custom Facebook page tabs.
Wait, Where Do Tabs Exist on the New Facebook Page Layout?
Before we get started, let's make sure we're all on the same page about where tabs now exist since the layout is still new to many. Tabs now exist under your cover photo in a section of your page called 'Views & Apps,' which can be expanded by clicking on the blue arrow on the far right. You can take a look at Coca-Cola's Facebook page for a great example of a company that effectively uses custom tabs (make sure to expand the tab area by clicking the blue dropdown arrow if you're checking them out).
Alright, now that we've got that out of the way, let's start customizing!
Step 1: Log In as a Facebook Developer
Visit https://developers.facebook.com/apps. You'll be able to log in with your normal Facebook credentials.
Step 2: Create and Name Your New App
Click "Create a New App" from the top left-hand corner. You'll need to provide a "Display Name," which is what your "app," or tab, will be called. You'll also need to create a "namespace," which is basically just a unique ID for your app.
You now also have the option to host your app for free with Heroku, a great choice for a serious app developer. For the average marketer, however, it's probably not necessary.
Step 3: Choose an Image and Update Basic Info for the App
Choose an image and icon for your custom tab. Remember, this is going to display at the top of your Facebook page, so think about it like a call-to-action. Choose an image that will get your visitors clicking!
Update your basic info with domain name and category. You can also upload a custom image for your app by clicking "edit icon."
Step 4: Create the Content That Will Display Within the App's Tab
Now create a web page outside of Facebook. This is what will display inside your custom Facebook tab. To ensure the page's content displays correctly on Facebook, make sure that the width of your web page is either set to 100%, 520px or 810px. Make sure all images, videos, etc. that you include on your page are less than either 520px or 810px, depending on how wide you chose to make the content of your tab.
Since you're now using the new Facebook business page layout, I recommend making the content of your tab 810px; the old layout before Facebook's business page redesign was much narrower at 520px.
Think of your Facebook tab like an iFrame that loads inside Facebook -- you can display pretty much whatever content you'd like inside your custom Facebook tab. As a marketer concerned with lead generation, for example, you could leverage the Facebook tab as a way to drive leads, making it essentially a landing page with a form -- thought you'll likely need a developer to help you build that functionality.
Step 5: Tell Facebook What Content You Want to Display on Your Custom Tab
Go back to your app settings in developers.facebook.com, scroll down to the "Select how your app integrates with Facebook" section, and choose "Page Tab." Name your tab whatever you'd like; then copy the URL of the page you just created in step 4, and paste that URL into "Page Tab URL."
To make sure everyone can see your new Facebook page tab, you'll also need to provide a secure URL. This should be the same URL you provided for the page tab, but with "https://" instead of "http://" at the front. If your website does not support https, your app will still work for anyone who has secure browsing disabled in their Facebook settings, but you should look into getting an SSL certificate.
Save the changes you've made to the app.
Step 6: Add Your Tab to Your Facebook Page
This step can be a bit tricky, so read carefully. In order to install your new page tab on your business page, you need to visit a link with several custom URL parameters. The link is:
http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
You'll need to replace the parts I've bolded in the URL above -- "YOUR_APP_ID" and "YOUR_URL" with some information that Facebook provides for your app, your "App ID/API Key" and your "Site URL."
Your custom Facebook tab should now be included with your standard tabs like Photos, Events, etc. If you'd like to re-order the tabs on your page, hover over it in the 'Views & Apps' part of your page we discussed earlier in this post, click the pencil button, and replace that tab with another from your list of available choices where it reads "Swap position with." If you're thinking about your custom tab as a call-to-action on your Facebook page, you'll want to make sure it's visible above the tab fold. On HubSpot's Facebook page below, you can see how our social media team has done this for our 'Inbound' event tab as well as our 'Free Ebook' tab.
Bonus Step for HubSpot Customers
If you're a HubSpot customer, there is an even easier way to create custom tabs. HubSpot has an app in our App Marketplace that streamlines and simplifies the process of creating Facebook tabs with knowledge of code required -- the Facebook Tab Customizer. While Facebook's new design no longer allows you to create a designated lead generating welcome page like you might have done before with the Facebook Welcome App, you can use the Facebook Tab Customizer App (or follow the steps in this blog post) to create landing pages that serve the same purpose!
For more detailed documentation and support from Facebook about creating custom Facebook page tabs, you can reference the official Facebook tutorial here.
Have you created your own custom tab for your Facebook business page? Share examples of your custom tabs in the comments!
Image credit: John-Morgan
Inbound Marketing Blog Feed
kevscoffee 7:09 PM on September 29, 2011
Thank you! I will downld and read it
Paul Preble 11:32 AM on September 30, 2011
So do you recommend having a seperate business page to develop on or use your personal page?
http://catalyst13.speech4u.hop.clickbank.net
dış cephe mantolama 2:23 AM on October 02, 2011
Well done Thank you for everything you have been too.
dkurischenko 12:42 AM on October 03, 2011
Ordnung
Jeff Ente 12:50 PM on October 03, 2011
Very good suggestion about people looking into SSL certificates so that they can offer an https:// version of their page. In fact, Facebook is now making it mandatory! See http://developers.facebook.com/blog/post/497/
Ty 4:44 PM on October 03, 2011
Great, easy-to-understand and e-z to follow tutorial.. thank you for sharing.. QUICK QUESTION: If we wanted to add MULTIPLE TABS to ONE Page, does it mean we would have to create MUTLIPLE APPS? in other words, does each app translate into a different tab on a specific page? thank you,
Ty
mac 2:34 AM on October 07, 2011
thank you for the create tutorial
Jan 12:49 PM on October 13, 2011
I am trying to add a tab to my FB page, that will link to my website.
I have followed these instructions to try to set that up, but there is nothing on the page when the tab is clicked.
Any suggestions?
Iz 10:27 AM on October 14, 2011
Great tutorial. For some reason, I don't have the option Add To My Page. Only to add it as my favorite. Does anyone know if I'm missing something? Any suggestions would be great. Thanks.
Marty 1:25 PM on October 14, 2011
I created two Page Tab Apps and used your (Step 6: Add Your Tab to Your Facebook Page) instructions...the first page tab link is listed on left, but the second is not. I double-checked the app settings (appID# and the URL's)...all OK...any other ideas?
Jan 2:26 PM on October 14, 2011
Marty,
I have been wrestling with this for a few days now, and am totally frustrated. But I just discovered the iframe app - https://www.facebook.com/iframe.apps - which looks like my answer.
Jan
Marty 10:42 PM on October 14, 2011
Thanks for the response Jan.
I don't like the idea of giving them access to login to my pages or my personal info. Besides, if their app can make it work, then ours should too!
Jon Freeman 1:22 PM on April 18, 2012
Fantastic article and information as usual. That URL at the end was VERY hard to find. I've been doing this recently for my newly timeline'd customers and it works very well.
If anyone is interested in assistance, especially with Micro-sites/apps, please look me up.
QR Codes & Mobile Sites is my primary focus but I'm glad to offer advice and help on other topics like this.
Helena Hill 1:36 PM on April 18, 2012
Great article! Makes what can seem like the un-achievable into easy-to-follow steps for those who aren't so confident in this area. We're starting to see some great Facebook pages out there!
WayneLifestyle 2:37 PM on April 18, 2012
I know that facebook business page is very important for business. Custom tabs are also important for facebook business page. So, this post is very informative to me about making custom tabs for facebook. Thanks for this nice post.
Pat Palingo 2:50 PM on April 18, 2012
This has been very helpful. Does anyone else run into this error though?
Error
You have specified an App Domain but have not specified a Site URL or a Mobile Web URL
I can't figure out where those items would go?
Jon Freeman 3:20 PM on April 18, 2012
Hi Pat -
Just put in http://www.facebook.com in that link/variable. It will allow it and you don't have to have one specified.
Hope that helps, let me know.
-Jon Freeman
Barcode4.com
Don Cotogno 1:59 AM on April 19, 2012
In Step 6 YOUR_URL, can't find it. It is not listed in the summary. I must be missing a parameter in the App set up. Help.
Stewart Turner 7:24 AM on April 19, 2012
I found this very useful after stressing over creating custom tabs previously.
I'm still stuck on one issue. Having multiple twitter accounts active on one Facebook page.
Has anyone done this by creating their own tabs for up to 4 twitter accounts?
Andrew Pitre 10:19 AM on April 19, 2012
@Don this is the base URL that you need to use:
http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
You'll want to replace the YOUR_APP_ID with the unique number that Facebook generates for your app. In settings it's labeled as "App ID/API Key."
You'll want to replace YOUR_URL with the URL that you provided as your "Site url." You can also find that in settings.
Let me know if that answers your question.
Kat 12:21 PM on April 19, 2012
Hello,
Thank you so much for the article, it has been extremely useful.
Unfortunately, whenever I try to share this article on LinkedIn, it creates an article for Backyard Sheds finehomebuilding.com. Can you please help?
Thanks!
Andrew Pitre 1:17 PM on April 19, 2012
@Kat Ummmmmm, yeah, you're right. I'm not too happy about that. I think that there is a potential issue on LinkedIn's end with the sharing. Try again in a little bit and see if it works.
Thanks for letting us know.
Kristina 2:35 PM on April 19, 2012
I was also getting the error about not providing a site URL so I tried using http://www.facebook.com but I'm getting another error message that says that is not a valid domain. Help!
Jon Freeman 2:59 PM on April 19, 2012
Hey everyone, I just grabbed this URL from my notes and it works no matter what your site's domain name setting is (from my experience).
Remember to replace APP-ID with your app's ID.
http://www.facebook.com/dialog/pagetab?app_id=YOUR-APP-ID&next=http://www.facebook.com
Enjoy!
D 3:04 PM on April 19, 2012
I've gotten through adding the tab to my page. You don't need to designate an App Domain but you do need to select Web Site Integration Tab and designate the base URL where the Web Page you want displayed is stored.
I am now getting a 405 - Method Not Allowed messaage when I attempt to use the app by opening the Tab.
Jon Freeman 3:06 PM on April 19, 2012
Hey D - what's the URL you're trying to send them to in the page tab? Feel free to send it over and I can try it - maybe something to do with the IFRAME on the content?
If you're using IE browser you can sometimes get more detailed error messages by going to Tools->Internet Options->Advanced->Unchecking "Show Friendly HTTP Error Messages".
Tiffany 6:30 PM on April 19, 2012
Jon, I am having the same problem as D with the 405 - Method Not Allowed message. Can you help? facebook.com/tiffanystaplesfitnessmodel and www.tiffanystaples.com Thanks so much!
Jon Freeman 6:41 PM on April 19, 2012
Ok, good news and bad news. The good news is I found your problem Tiffany.
The address you put in for the secure tab location (https://) requires SSL.
Now for the bad news, your site doesn't appear to be a secure site.
Normally with low cost hosting companies this is common. SSL requires buying a certificate and usually getting a dedicated internet "IP" address.
Barcode4 has an SSL certificate (along with dedicated cloud servers). I'm happy to host a redirect page somewhere off my domain which will allow your users to click through to the blog.
Here's an example of how that works with one of my customers Facebook pages.
https://www.facebook.com/BloodyMaryMix
Check out the "shop our store" link here and landing page. Because their store was wider than the 810px limit of Facebook we made a simple landing page with click through to the store.
Because you don't have SSL I could host a simple landing page and click through for you on Barcode4 if that would help.
Regards,
Jon
Tiffany Staples 7:09 PM on April 19, 2012
Jon - if you would do that for me, that would be AMAZING!! I am using blogger, so I guess that's where the low cost hosting site comes in. Do you have to have a secure site to do that from? What if I just put in http:// instead of https:// ??
Thanks so much! Please let me know what you need on my end!
Don Cotogno 8:11 PM on April 19, 2012
Hi, I solved (at least with mine) the 405 Method Not Allowed message. I stripped my Web Page down to nothing and started adding. It is the HEAD Tag. For some reason when displaying the Web Page within the Facebook App you can't have a Head Tag.
Jon Freeman 10:47 PM on April 19, 2012
Hey Don - A head tag should be allowed, I use it on many of my integrations. You probably have an "http://" resource referenced in either a script or CSS link that is killing it. HTTPS, especially inside iframes is very sensitive about all resources being called securely.
Jon Freeman 11:01 PM on April 19, 2012
Hi Tiffany,
I didn't have your email address so I have to reply here. I setup a secure gateway page for you on my domain which you can link your facebook button to.
Set your "secure" page tab location to be:
https://barcode4.com/friends/tiffanystaplesblog/index.php?fbk=1
You can leave the normal page tab location directly to your blog or change it to the same as above with just "http:" if you want it in a new page rather than windowed inside facebook.
Hope that helps!
-Jon
Don Cotogno 2:34 AM on April 20, 2012
Well it looks like I jumped the gun. It isn't the Head Tag at all. Now here are the symptoms, very weird. If I edit and save the html file the tab displays it just fine, ONCE! Every other time it fails with the 405 Error. I edit and save again, display fine, once, then the 405 error. What could this be? BTW the html file is as follows:
This is a test page
Vasko 5:22 AM on April 20, 2012
Great article Andrew!
Step by step post that could help even those how are not advanced Facebook and web users.
Lighina VB 8:48 AM on April 20, 2012
excellent post and best services, thank you
LittleUK 9:50 AM on April 20, 2012
Hi. Thank you for this. It's great. I dont quite understand how it all works but I now have a test app. However. When I click on the app it says site unavailable and I get this "Error 501 (net::ERR_INSECURE_RESPONSE): Unknown error". Can you help. Page is https://www.facebook.com/JDSmithSons
Thank you
LUK
Mike Dowd 2:06 PM on April 20, 2012
I usually have between 6 and 8 active tabs depending on the different promotiosn that are running etc. To me it is not realistic that someone will click the drop down arrow to display all 6 or 8 active tabs which leaves them seeing photos and 3 tabs. I would like a way to force the facebook page to display up to XX number of tabs as I am afraid a lot of my content is not being seen. Anyone know of a solution?
Jon Freeman 4:32 PM on April 20, 2012
Hey Don - if you visit the secure URL directly does it come up? Depending on your facebook settings, if you require secure mode it will try to use that one first. Feel free to email me and I can help you diagnose the issue.
Don Cotogno 6:09 PM on April 20, 2012
Jon, All URLs (Secure and Non-secure) work fine stand alone). What is your email rather than use postings here.
michaelbrandonw 12:07 AM on April 23, 2012
Great breakdown. However, I do have a newbi question. As for the tabs, I only want to display say, 4 images from my photos that visitors can click on and read a description. I know the default photo tab opens up to albums, but do I have to go through the whole app building process just to have 4 photo images in my photo strip/tabs? Or am I all backwards in this function? I've read you can have your 4 recent photo uploads appear in the strip, but read else where you need to create a tab through building an app and then change the tabs default image.This seems like a lot just to have 4 different images appear under your cover photo. I appreciate any help on the matter. thx.
Shan 12:46 AM on April 24, 2012
Hi this is a great article. I have made an app for a landing page that works but when I try to make one that I want to direct to a blogger page, that displays my service, I get the error message. Is blogger unsafe or not trusted?
Thank You
Shan
Jessica 11:10 AM on April 25, 2012
Thanks for the great article! Just to confirm, are we no longer able to have Facebook redirect to a specific tab after a user 'likes' the business page? Before the switch to timeline we had FB marketing ads generating pretty good traffic to our FB page and getting a good amount of likes. But part of the ad was to get a free sample of something so the user had to fill out a form so we could collect their address and info. Now we are still generating the traffic and likes, but there is a disconnect with the user as to how to get the free sample (even though our FB tab icon directs them). Any advice?
Shanna 12:18 PM on April 25, 2012
The "AppDomain" didn't work for me so I left it blank. Was able to proceed further but now I can't figure out the "page tab url" section. I had someone else do my website so I don't know many answers to these questions. Can you help?
Lena 2:09 PM on April 25, 2012
Hi, thank you for a great step-by step tabmaking article.
When I am trying to add the page tab (in number 6), I get the error "this application does not support your profile". What does it mean? Can I connect the page to my profile in some ways, did I miss something?
Thank you
Lena
Tiffany Gaines 7:38 PM on April 25, 2012
Hey Andrew, awesome article! I was able to get my custom tab set-up correctly but when I tested clicking on the tab to open the site I want to direct users to (http://support.voxer.com) I get a security notice that warns the possibility of an untrusted site. Any tips for how I could remedy the situation? Thanks!
Tiffany Gaines 8:13 PM on April 25, 2012
Hi Andrew,
Nevermind, I got my issue resolved on my own. I just needed to enable SSL on the site I was trying to direct users to.
Cheers,
Tiffany
Tim 8:11 PM on November 28, 2012
For those who want to engage your Facebook fans easily, check out this simple tool called Tint (http://tintup.com) .
It lets you aggregate any social feed (even social feeds you don’t own) and lets you embed it into your Facebook page, giving your fans dynamic content to engage with.
Check out how this Facebook Page did it with inspirational quotes by aggregating from ‘StartupQuotes’: https://www.facebook.com/teamtint/app_394630527280041