Contact Us
  • How to Create a Facebook App for your Timeline Page Tab

    In order to create a custom Page Tab for your Facebook Timeline Page, you need to first create a Facebook application. Here’s how:

    Creating your Facebook App

    Go to the Facebook Developers app page.

    If this is your first time creating a Facebook app, you are required to “verifify” your account:

    Starting this week [June 2, 2010], we are requiring every developer to verify his or her Facebook account to create new applications. This is the same quick process that users go through when they want to do things like upload large videos.

    We’re taking this step to preserve the integrity of Facebook Platform, ensuring that every application is associated with a valid and real Facebook account.

    You can verify your account by either confirming your mobile phone or adding a credit card to your account. Facebook will not charge your credit card if you add it to your account.

    If this is the first time you’ve installed the Developer Application, you will see the Request for Permission dialog.

    After the Developer App is installed, it’s time to create your Page Tab App.

    1. Click on the “+ Create New App” button in the upper-right corner:

      Create a New Facebook App

    2. In the pop-up dialog, enter the name of your App (you’ll see if it’s valid or not, right next to the box, in green):
      Give your App a Name
    3. After clicking “Continue”, you’ll be presented with the “Security Check” characters. Enter them and click “OK”.

    Entering the “Basic” values for your App

    Once past the Security Check, you’re presented with the Basic Settings for your Page Tab App, and this is the only screen where you need to do anything.

    Facebook App Basic Settings

    Your Facebook App ID

    Below the name of your App, you’ll see the “App ID.” This value will be required when you’re setting up your Page Tab to integrate with Facebook’s Open Graph, most commonly for the Social Plugins, as well as loading the JavaScript SDK and preventing scrollbars on your tab.

    Besides the “App Display Name”, the only other value you need to enter in this section is your email address.

    Integrate your App as a “Page Tab”

    Under “Select how your app integrates with Facebook”, you want to click on “Page Tab”:

    How your App Integrates with Facebook

    Page Tab Values

    Now you enter the specifics of where your Page Tab:

    1. Page Tab Name: This is the name that will display below the Page Tab Image (aka “Custom Tab Image”) on your Page:
      Facebook Page Tab Name
    2. Page Tab URL: This is the full URL to your Page Tab’s index page. It can end in .php, .html, or .htm, and it doesn’t have to be named “index”;
    3. Secure Page Tab URL: This is the same URL but using HTTPS. A secure URL is now required for Facebook Page Tabs. This means you must host your Page Tab’s index page, and all files referenced in it (images, stylesheets, JavaScripts), on a domain that has an SSL Security Certificate. See this post about HTTPS and Facebook. See also my article on inexpensive SSL options.
    4. Page Tab Edit URL: Not applicable here;
    5. Page Tab Image: This is the image that will represent your Page Tab below your Cover Photo (see the green “About HyperArts” Page Tab Image, above). Make sure your Page Tab Image’s dimensions are 111 x 74px. To upload your Page Tab Image (aka “Custom Tab Image”), click the “Change” link (circled above). You can change this at any time via your Page admin area;
    6. Page Tab Width: You will want to select “Wide (810px)” — this is the width for Timeline for Pages custom tabs.

    Once you’ve filled in the above options, click the “Save Changes” button, and you’re done!

    Adding your Page Tab App to your Page

    To add your new Page Tab App to your Page, you’ll need to enter this URL in your browser:

    http://www.facebook.com/dialog/pagetab?app_id=YOUR-APP-ID&next=http://www.facebook.com

    Make sure you enter your App ID where indicated in the URL. The “next” value is where you (or anyone) will be redirected after successfully adding the App to their Page.

    Additional Resources

    Comments

    1. Thanks for sharing another perfectly succinct post, Tim! I’ve already bookmarked it.

    2. Jodi Stammer says:

      THANKS GUYS!

    3. Hi, I was wondering how I can create an App that you can add to a profile? I’ve seen some older apps that just pull up another timeline”, but others like Foursquare have a custom timeline view… Is there a special “timeline application” I don’t know about?

      Thanks!

    4. Hi Tim,  I used to have an app but it seems that I cannot access it anymore. I am not quite sure why. I have a business page at http://www.Facebook.com/Practicons. I have emailed Facebook for their help, but have not had any luck. Do we have to have a personal profile to be able to make an app for a business page? ~ Razmik

      • Yes, I believe you can’t add apps to business/brand pages that aren’t associated with a Personal Profile.

      •  Hi Razmik ~ I was just looking at your page and noticed that there’s a comma — instead of a period — in your tagline on the cover photo. It says “Advocate. Elevate, (comma) Market.” . . . . I wasn’t sure if you had noticed this, so I thought I’d tell you. :)

    5. Awesome Tutorial simple, easy and up-to date  Thanks! any post which integrate with FB API’s

    6. Hey Tim… fabulous post… thank you.

      Question…

      I just added the “Invite Your Friends Button for Pages” app to a client FB page. Then I realized that unless a visitor ALREADY has that app installed, they can’t see the custom ‘share’ button I’ve created. This greatly limits our ability to get shared by our fans.

      Soooo . . . can I create my OWN custom “share” app that will show up for anybody who visits the page?

      Here’s the page I’m working on: https://www.facebook.com/YourUnstoppableLife

      Thx in advance for your advice.  :)

    7. Colin Jeffrey says:

      Thank you very much for this

    8. I did this and put in a custom Google map for directions as the page tab URL (because Bing doesn’t work in Ireland…) but when I did the last stage of adding the Page Tab App I just got 

      API Error Code: 191
      API Error Description: The specified URL is not owned by the application
      Error Message: redirect_uri is not owned by the application.
      What I put in was: 

      http://www.facebook.com/dialog/pagetab?app_id=212651525505669&next=http://www.facebook.com/dunslandI presume this is facebook trying to stop you using Google maps? I could just use a picture of the map if I hosted it in Dropbox or even as a facebook photograph itself instead?

      • Yes, you can’t make just any Web page your app’s index page. It has to be a Page on the domain specified in the first section. You might try making your own index page and include an iframed Google Map.

        • Can you explain “make your own index page” in any more detail? I already tried referencing either a dropbox image (from the public folder so SSL hosted) or an image uploaded to the facebook page and both times got the 191 error…? Thanks Tim… All I want is to be able to show a specific image when someone clicks the tab so they can see the map. I don’t need for them to be able to interact with Google maps directly…

    9. I think I paid $17 for a PDF about this. I also think I just learnt more from this post for nothing.

      Great stuff,

      Thanks Tim.

    10. Being a non computer kinda guy will I be able to link my business shopping cart to facebook with this? Can someone without ANY experience be successful at it?

    11. Sergey Landar says:

      Thank you! I made all like you told, but now i see horizontal and vertical scroll on my Facebook page. You can see example there: http://www.facebook.com/uniquefreetemplates/app_368436909867607 . But i use template width 810px. Could  you explain why it happen? Because as i know new size for Facebook page is width: 810px, height: unlimited. Thanks.

      • A quick look at your tab tells me 2 things:

        1) The index page isn’t on a secure server. Using Firefox, I get a security warning and can’t view the tab because I’ve opted for “secure browsing” in my Facebook settings. Read this tutorial on Facebook’s security requirement and what users see if they’re browsing securely on Facebook.

        2) You haven’t put in the code that prevents scrollbars. Read this tutorial on getting rid of scollbars.

        • Laurie Jones says:

           It appears that you can no longer set your canvas height for a page tab.   If you cannot configure your page tab to a “settable” height, how can you change the height for the iframe?

    12. omkar naik says:

      HI may I know how do I add a youtube link from my channel to a new page tab that I want to create… Is that possible. 
      I have tried to do it but its just not happening. Can u suggest something??

    13. Just add it to your index page as you would any Web page, using YouTube embed feature.

    14. You’ll have to embed that image in a .html or .php file. If this doesn’t mean anything to you, then creating your own Facebook Page Tab app by hand may be beyond your abilities.

    15. Thanks for sharing. You make the Facebook documentation look so bad. They can blow $1 billion on Instagram but can’t do their documentation as good as you can.

    16. may i know how to do this 
      https://www.facebook.com/MissJeanneOFFICIAL. i just want to make one for my page. thanks.

    17. Thanks for this!  One question though.  How can I have the page tab menu appear at the top of my App?  If  I access my app through the bookmark on my profile page it doesnt have the page tab menu at the top.

      • I’m afraid I don’t understand your question, Dana. What is the “Page Tab menu”?
        If you’re talking about a Page Tab App — which is the subject of this article — then what’s at the “top” of your App’s index page is whatever you code there.

    18. This was a great tutorial – the most helpful one I’ve found on the topic – thank you.  When I get it all setup though, my tab page ends up blank.  I can see both the tab url and secure tab url if I put them in my browser, but when I go to the tab, it’s just a blank page.  Any ideas on why it won’t display…

      • One cause could be if, in your App Settings, you put an “http://” URL in the “Secure Tab URL” box. Or if the URL you entered for the tab is incorrect. If you specify a non-secure (http) URL instead of a secure URL (https://) for the Secure Tab URL, the content won’t be displayed in the tab. And that “https://” URL *must* be to a domain that has an SSL Security Certificate.

        •  It seems to have had something to do with using the hosts shared ssl – we couldn’t get it to work on that, even though we could clearly see both pages when bringing them up in the browser.  We purchased SSL and the pages work fine – but sort of a bummer that they can’t use the shared SSL since the only thing they need SSL for are these facebook pages. 

    19. rgibson69 says:

      Tim, thank you so much for this post. You’ve demystified this whole process. I’m doing a page for my wife’s small business and couldn’t afford the monthly fees some companies are charging to do a simple page.
      I assume when creating the page to host on my server I just have to stick to either the 520 or 810px wide format? Are there any other design specs and if so can you can point me to where they would be listed?

      Thanks
      Rob

      • The index page of your tab app — the iframed page where the content lives — MUST be hosted under a domain that has an SSL Security Certificate. We have a recent article on what happens when you DON’T do that, and a couple on articles on this blog about the HTTPS security requirement for hosting your Page Tab index page.

    20. It appears that the pesky scrollbars are back. The advanced settings options have changed. “Settable” is no longer an option, just “Fluid” or “Fixed at ____ px” I’ve been changing settings, adding scripts, removing scripts, and so on for over an hour. Can’t get the darn things to go away! Help?

      • Courtney, Those “Fixed” and “Fluid” settings, under “Advanced”, are ONLY for canvas applications, not for Page Tabs.
        You just need to set the width, the Basic settings, to either 520px or 810px.
        Then follow the directions in Jason’s post about getting rid of the scrollbars.
        Make sure you insert the code to load the JavaScript SDK and to remove the scrollbars right after the opening <body> tag.

        • Most of my page tabs were created before “Page Tab” was even an option in creating a new app. LOL We did, in fact, use the information from that blog post last year to update and remove all of the scroll bars. As of a few days ago, they are all back. The change didn’t coincide with any changes FB made, that I know of. We’ll keep working to figure it out. Or, create new Page tabs “apps” for all of them and start from the beginning (what a mess that will be) :)

    21. Thank you so much for this clear tutorial!! I saved so much money and time doing this! you have my “like” on your FB page. :)

    22. thank your for your help but i have a problem .
      my site is n’t a secure one so i cant use these methode right???
      if yes what is the alternative methode to make an app so visitors can go to my site from my page ?????
      thanks for your help

    23. I can seem to follow the link to add the app to my page, any suggestions?

    24. You have to find a way to host your application’s index page securely, or be okay with having your tab hidden from the millions who use Facebook secure browsing.

    25. I can’t make it any clearer than it is in this article.

    26.  Thank you very much for sharing this tutorial. Can u tell me how to add two different pages in same tab for non-fans and fans.
      Thanks in advance

    27. HI…

      I want to use PHP or JS to adding app to page tabs, do not show dialog.

      can be?

      I don’t let user choose fan page.

      but I can’t find any information for this….

      help me…Thanks.
       

    28. There’s a tutorial about fan-gating on this blog.

    29. You mean now showing the “allow” dialog? I doubt it.

    30. I ran into this problem It looks fixable.

      http://stackoverflow.com/questions/8107911/facebook-site-url 

    31. I followed the instructions to add a new tab for a Fan page and it worked, but only when I view it while logged in as the admin of the page. It comes up blank when I try to access the page as a “Fan”. What did I do wrong? 

      • Is the tab’s index page hosted on a server with an SSL Certificate, and the “Secure Tab URL” specified in your app settings? If your tab isn’t hosted securely and you, logged into Facebook as a user opting for “secure browsing” the tab will appear empty if no Secure Tab URL is specified.
        Otherwise, what’s the URL of your Facebook tab?

        • The SSL situation is probably the issue, you’re right. But now we’re getting a page error on the tab page. Here’s the URL of the tab in question: 
          http://www.facebook.com/TheEckardTeam/app_453327118017718. We’re trying to link it here: https://www.thebrickhousedigital.com/mefb/ 

          • Well, first you should get an SSL certificate for your hosting server!

            As for the “HTTP verb” error I see on your tab, in this post we state:

            “If your server returns an error when Facebook tries to load the HTML page into the iFrame, you may need to change the file extension from .html to .php or .aspx (depending on the server platform you are using). When Facebook loads the iFrame, they do a POST to the index page in order to pass some data to your application and it looks like some servers are set up to not allow a POST to a file with the .html extension. “

    32. Thank you – a great article!  I am however struggling with the final step – I have been able to add the app and the redirect URL with no problem, but once added as a tab in my Facebook page, and opening the page, it will not redirect to the URL I specified (as suggested above). Clicking on the page will not redirect either. Help? Much appreciated!

    33. I can add the page tab to pages I admin but not to my personal page… help?

    34. Matt Williams says:

      I created an app per this article (good stuff!). But after installing the app to my page, all I get is a blank page. I’m using a secure url – not sure what else to try. Here is the page with the app: http://www.facebook.com/detroitgp/app_135086329956680
      And here is what should be showing: https://www.detroitgp.com/ticket_contest/index.cfm

      Can the FB app show a .cfm page?
      Could it be hiding because of FB security settings for my account?
      Is there a forum or somewhere for this type of help so your blog doesn’t have to be it?

    35. Tim – awesome!  Thank you for a great tutorial.  One question I can’t find the answer to anywhere – does the https and http url have to be the same?  We’re running into an issue with trying to do two different urls.  Short version – the site with the secure server forces SSL, so we’re trying to work off a different domain for the non-secure url.

    36. Hi Tim,

      Thanks for providing an update to page tabs for the new timeline. My problem is that I am admin of a couple of pages and when I try to add the app to a page that I’m admin on, I don’t get that page as an option in the drop down menu.

    37. If you’re using IIS to host your facebook tab content, use the .aspx extension on your html file instead of htm or html.  Otherwise you’ll get a 405 unauthorized access issue even though you specified an ssl url.

    38. Laurie, Actually you can still specify a height (and width) for your custom tab.

      Go to your developer page on Facebook and, in your app settings, go to:

      Settings > Advanced > Canvas Settings

      You should see where you can set width and height.

      However, you might as well just leave it at “Fluid” and also use FB.Canvas.setAutoGrow and/or FB.Canvas.setSize in your iFrame index page:

      window.fbAsyncInit = function() {
      FB.Canvas.setAutoGrow ();
      }

      function sizeChangeCallback() {
      FB.Canvas.setSize({ width: 810, height: 1400 });
      }

    39. This may be a silly question but: how can I preview my Page Tab app before linking it to my company Page?

    40. How do you change the default preview image that appears when a user shares your app? When I try to share the app using the smart URL http://a.pgtb.me/c2SC (so that the link will work on mobile, as opposed to the long Facebook URL: http://www.facebook.com/budgetutah/app_429690153732356) the default thumbnail image and only option is the page’s profile picture. How do I change it to be the app icon? I already uploaded four sizes into the App Settings dashboard: 111×74, 75×75, and 128×128. The app has an icon loaded properly but it isn’t showing when I try to share the app when posting on my wall. Thanks.

    41. Hello there, thank you for the post. I have used your link to add a page tab add to my page but since today I get an unusual error saying:

      Sorry, something went wrong.We’re working on getting this fixed as soon as we can.Go BackAny idea on why this is happening and any possible solution would be appreciated.Thank you in advanced

    42. I’ve problem whith
      API Error Code: 191
      API Error Description: The specified URL is not owned by the application
      Error Message: redirect_uri is not owned by the application.

    43. Katie Molinare says:

      I have added the app to my page but when I click on it, I get an error message saying it is too busy to direct me? What do I do now?
       

    44. I have a URL that I want to add to the Tab/Apps section – how do I add a ‘button’ for my users to click on so they can visit that external website from my FB page? My page is here http://facebook.com/LetsGoMs – I have PHOTOS, LIKES, TOP FANS and I want a URL link added. Thanks!

    45. hi
      i wanted to ask how can i a
      dd a facebook app to a client page without creating the app on my personal account. i cant create the app on the client account because he has a business account(page).
      thanks !!

    46. after entering security check info, i am asked to verify email, then i hit continue and it loops me back to security check. can’t seem to get out of that loop… advice?

    47. after creating new app, entering security check, i hit continue and i am asked to verify email, once this has been verified, it loops me back to security check… can’t seem to get out of that loop… advice?

    48. Eric Gaston says:

      I added the app – excellent tutorial! But…how do I edit it? It said that Heroku was going to setup an account but I got no email and login or find how to edit what actually appears when I click the Page Tab button on my page. Am I looking the wrong place?

    49. When I attempt to go to the link which has my app ID, it comes up with an error:
      This application does not support integration with your profile.

      What is the solution to this?

      • Well, you do know you can’t Page Apps to your personal profile, right?
        If that’s not the problem, then I’m not sure what is.

        • Where do you indicate the Page where you want the app to appear?

          • Did you read the entire article. Look under “Adding your Page Tab App to your Page” …. That URL *should* display a pulldown list of the page’s for which you’re the admin. You just select one.
            If you don’t see a pulldown list of pages, then either you didn’t create the URL correctly, you’re not logged in as the user who admins any pages, or you just aren’t the admin for any pages.

    50. What if...? says:

      I am not sure that you received my post, so i post it again.
      I found this article quite interesting, but i have a problem…
      When i click on “+Create New App” and next fill the App Name and check on the checkbox, then on the screen appears a message:

      “App creation failed
      Your account must be verified before you can take this action. Please verify your account by adding your mobile phone or credit card.”

      Can i bypass giving my personal information or i definitely must send it to Facebook?

    51. What if...? says:

      Have you made a Facebook application on Heroku?

    52. I’m getting this error message:

      Method Not AllowedThe requested method GET is not allowed for the URL /index.html.

      Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

      Any ideas?

    53. Settings
      Log out
      Admin Panel
      Edit pageBuild AudienceHelpHide
      Admin Panel

      THIS IS WHAT I CAN SEE ONLY. ALL OF WHAT YOU ARE DISCUSSING HERE IS OUT OF MY PAGE. PLEASE ADVISE.

    54. I keep getting this error message:

      App creation failed

      Please use your personal account to create this app. To use a different name for testing, create the app with your personal account and then create a test account.

      If you received this message in error, please submit an appeal.

      I’m adding tabs to a page that I created. Also, created 7 tabs already, went to add the 8th, and got this message? Any ideas?

    55. DanceGirlFriday says:

      Thanks for this great post. I’ve followed your steps and set up my app, then got my app to load on a fan page, complete with custom tab graphic. However, I have a problem with the redirection which happens when users click the tab. Basically I am trying to redirect users to the ‘video’ tab of another related FB fan page (as we have several, for different dance venues). I don’t want to have to re-upload all the videos multiple times for all the different venue fan pages, so creating a custom tab seemed the only solution. Note: When you tag the videos to each venue, they do appear in the ‘photos of you’ folder for that venue but NOT in the videos folder, where we want them to be so they can be directly accessed from the top of the page. Anyway, I have tried using the url link of the correct video tab I want to jump to, but all that happens is the user jumps tot he (empty) video folder of the current page, and the back button will then not work. What am I doing wrong. Help!!

    56. I have created the app. I can see it on my page. When I click on it, it is displaying the information that I want to show to everyone however, I have used my sister’s Facebook and It is not showing when she visits my page. What would you suggest me to do? Thank you so much for the great tips though

    57. José Terius says:

      Hi tim, the page tab URL can end in .aspx ??? thanx

      • The .aspx extension should be OK. If you get the “Error 405 – HTTP verb” error (or something similar) you may have to see if your hosting server is set up to allow a POST to a file with the .aspx extenion.
        When Facebook loads the iFrame, they do a POST to the index page in order to pass some data to your application.

    58. Hi Tim,

      I have an app with the width set to be fluid and when I link direct to the app it works and fills the screen or sits central.

      The problem I have is when linking to the same app from the tab in my favourites on my page the app gets put inside the restricted 760px canvas window… how do I get it to still sit in a fluid canvas?

      Thanks

      Neek

      • You’re at the whim of Facebook. Many mobile devices default to the mobile version of Facebook anyway and you can’t then see your tab.
        You can make your canvas page responsive, but you can’t control the Facebook frame.

        • Yeah I thought so… my canvas page is responsive and works fine on mobile devices and looks fine on desktop, you just get the tablet version when the tab is clicked. thanks for your response!

          N

    59. Hi Tim,

      We have successfully created the Page tab and assigned it to the page we want it to appear on. The direct link to the app on Facebook works as expected, however when we add the Page tab and then click the item from our page, we are directed to the canvas page but our app does not appear (basically the area for the app is blank). One thing we thought might be causing the issue is that Facebook still needs to approve our app, however it is live through the direct link and available in search so we are unsure if that is the cause. Please advise.

      Thanks!
      Vanessa

    Speak Your Mind

    *