Facebook Friday: How to Make a Custom Timeline Tab

Custom Timeline Tab
I’m often asked how to make a custom timeline tab so I thought I’d share how to do it. The great part about making custom tabs is that you can drive traffic to your website Facebook page like you would your website. I won’t go into all the details of marketing your Facebook page you can find much better articles about that from Lisa Mason. If you’re looking to set up a custom timeline tab you’ll need to first set up a few things before you can start to develop the page itself.

Every person with a Facebook account can have a developers account. How do you see your developer account? Go to http://developers.facebook.com/ From here you’ll be able to click on any of the links and see your account.

The first time you do it might be a little confusing but just refer to this article and it should help you get through everything without a hitch. Remember, if you get stuck you can always leave a comment and ask a question.

Custom Timeline Tab Template

Before we actually get in to Facebook and start making our application we need to set up a template. We don’t have to do it but I find that having a template for things is just always a good idea. I mean who wants to have to redo the same thing each time you build a project? Take the following code and post it into your favorite editor.

Directly after the title you will find the link to the style sheet. I label mine style.css and I keep it inside the main folder that I keep the custom timeline tab html files. If you choose you can put the style.css inside of any other set of folders just make sure you change the link to something like href=”css/style.css”. You will also want to make sure that style.css is the name of your personal stylesheet.

This portion of the code will set the actual size of the custom timeline tab itself. If this code isn’t in your html your content will be cut off and people won’t be able to see the whole thing when the iframe pulls the information. I keep the default settings at 810 width and 950 height. For longer custom timeline tabs you’ll want to adjust the height but the width should stay the same. One small thing to note is that the actual visible width is only 790 pixels wide. Facebook adds a 10 pixel padding on each side of the iframe.

Our next section contains the content. This is straight forward. All of the content that you’re building for your custom timeline tab goes here.

Lastly and most importantly is the application ID. I label this “my_id” so I can easily find it when building my custom timeline tabs. Where do you get this number from? Well after we make our application we will be given the application ID and this is where we insert it. It’s very important that we do not forget this step! Now let’s go to our developer page and create our application.

Custom Timeline Tab Application

Once we have our template set up we’re ready to make our application. From the toolbar on the top click on the Apps link. This will take you to your apps home page. Next click on the +Create New App button in the top right. A new window will pop up and you’ll want to input your app name. It’s good practice to create unique sounding application names. This way you won’t get them mixed up. You can use any combination of letters and numbers. Once you have your application name picked out you will need to put in a captcha.

Facebook Application Toolbar

Congratulations you have your first application created! In the first box at the top you will see two large numbers:

Facebook Naming Application

    1. App ID
    2. App Secret

Facebook Application ID

Before you do anything else copy and paste your App ID and insert it in your html document where you have the placeholder ‘my_id’. Make sure that you do not delete the two single quotes! The id must go in-between both quotes. Head back to your developer page and go to the bottom set of boxes. Select the option “Page Tab”. To get your custom timeline tab to work you need to link to the html document we just made. Upload all of your files via FTP to your web server. Once you’ve done this grab the link to your html document and insert it into the three boxes under the “Page Tab” option. These are the three boxes:

    1. Page Tab URL
    2. Secure Page Tab URL
    3. Page Tab Edit URL

Facebook Page Tab

Under the option “Page Tab Name” you can name it anything you want. This name will be what displays as the tab name itself once you’ve uploaded it onto your fan page. To back up a moment I want to point out that the three urls above have a specific purpose. For basic custom timeline tabs you’ll just use the same url for all three. However, if you’re developing a more in depth tab that pulls secure information and/or you want to allow for another person to edit the page content like a CMS you’ll want to make additional pages and add these to Secure Page Tab URL and/or Page Tab Edit URL. This tutorial won’t cover how to make these more advanced features and I don’t know of any good sites that will teach you how so I’ll have to write one up later! We’re almost done! The last thing we need to do now is save changes to our application and then add it to our page. Remember how I said to use a template for things? You’re going to want to take this next piece and add it to a text editor like notepad and save it as a template. You will need to take the following link and insert your values. Change the app_id= to your app id. Then change next= to the URL of your custom timeline tab. This is the same link you inserted into the three boxes above. From here you’ll be taken to a page that that allows you to pick the page you want to add the application to.

 

Sometimes you will get an error like the following:

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.

If this happens you need to make sure that you’ve added http:// to both the next = section as well as adding the http:// to the three sections inside of the “Page Tab” application section.

We now have our own custom timeline tab! If you’re interested in learning more about your timeline fan page you can check out this infographic I made that shows some of the features that come with timeline.

Do you have any questions? Are you having trouble getting your custom timeline tab working? Leave me a  comment and I’m more than happy to help.

  • http://www.professionalcontentcreation.com/ Rebecca Livermore

    Wow, what a comprehensive post. Thanks so much for going into so much detail and explaining it so clearly. I appreciate the time it must have taken to write this and all of the hard work that no doubt went into it. Nicely done!

    • http://www.timothybrand.com/ Timothy Brand

      Thanks! I thought I’d write one up because I just couldn’t find one that explained it from start to finish.

  • writerlisamason

    Fantastic tutorial. I get asked so often how to do this as well so now I have a great link to share. Thanks!

    • http://www.timothybrand.com/ Timothy Brand

      Thank you for reading :) I hope it helps.

  • Theresa Leschmann

    I am completely overwhelmed by this but I don’t know html or anything else technical.I probably should have a customized tab on my timeline but I haven’t figured out exactly what I want. Thanks for the tutorial. I’ve bookmarked it for when I’m ready.

  • CreeksideCS

    Great job explaining this @timothybrand:disqus ! The only thing I change/do differently is I don’t set the Page Tab Edit URL. For a basic Tab one doesn’t need it necessarily.

    I do love your resize js code there. I may need to snag it for my next tab work. I’ve just been using CSS to control the size but I like yours a lot better.

    • http://www.timothybrand.com/ Timothy Brand

      I’m glad you enjoyed it :) The reason I add the url to the Page Tab Edit section is because sometimes Facebook goes Hulk and gets mad that you didn’t and your page bugs out. The only fix I’ve found is to just add the url too that box.