Home
Username:
Password:
Facebook Application Development Tutorials

Making it Facebook: Dashboard & Tabs / Adding Facebook Tabs




Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com’s entire library of video tutorials.


Learn More

Subtitles of the Movie

You've seen how we can construct the Dashboard up here, now I'm going to make it look even more like a real Facebook Application as I add tabs over here. Now let's take a look and see how I do this. This is a very, very common thing that you're going to want to do. You'll use the standard Facebook tabs and your App is becoming more and more like a real Facebook Application and of course, these links are all dead. If you click here you'll find a file missing, but after we've finished the next segment of constructing these tabs we're going to come back and then explore creating those files, but the next step now is to create the tabs. So let's close this window and come down here and I will show you how we do that. What I've got is this FBML Construct. It's an element called tabs, here's the opening tag, closing tag and within it there are these three tab items which you saw. Now I'm outside of the PHP code, which is up here. This is FBML like HTML it is simply emitted back up to Facebook which then interprets it and puts it into the window. But one of the things that you can do with PHP is to place it not just in its own chunk, but within a line of code so that, for example here, I have a tab item which is going to have the title Browse Picks and I need a href for it and I need the prefix, which is the canvas page URL and then the suffix will be browse picks.php. Now the Canvas page was specified when we set up the Application but I now need it within my code. I need to know where to go to find the Browse Picks file and that's why I separately created the config.php file, one of the reasons why I created config.php, with a variable which I can access here called canvas page. Now I had commented it out but now I need it and the canvas page is going to be apps.facebook.com/jfbirds/so when I pick it up here this code is going to be http://then I take this PHP code which will become this code and append browse picks.php to it. So, I need the Canvas page variable here. I will be using it throughout my Application and I can get to it because I've required it up here. So I've got config.php in there. Now why did I put this here? I put it in config.php because I will need it as you can expect I many, many of the files in my Application. It also means, as I've said before, that if you are switching this code and running it in a different environment all you have to do is change the Canvas Page and all of the rest of the code will work properly. So I've got config.php, I've enabled this line of code and I've got this code here with PHP Code within my FBML and now all I do is run it and I will move this up here a little bit and come back and pick up Safari and redo the Application and let's just briefly compare what you're seeing in the Facebook Application with the code that you're seeing here. This was the Dashboard code that's up here and now, see, you have Browse Picks, My Picks and Friends Picks, the title's here and the names of the files here. If you click on these they're not going to be enabled, or they will be enabled, but they won't be able to go through to a file because these files don't exist yet, but that's how I create an Application that is starting to function like a real Facebook Application. Now, you may wonder why I didn't put these tabs into the Dashboard because I'm going to use them in many places. I'll want this same combination of the Dashboard and these three tabs and the reason I didn't put the tabs into Dashboard is that as I am using these tabs I'm going to want to have the appropriate tab highlighted when I am on that one. Right now I'm not on any of them but I'm going to want to select one of the three tabs depending on where I am so it won't be exactly the same, so this code is going to be outside of the Dashboard structure.

Tutorial Information

Course: Facebook Application Development
Author: Jesse Feiler
SKU: 34058
ISBN: 1-935320-81-5
Release Date: 2009-11-23
Duration: 7.5 hrs / 92 lessons
Work Files: Yes
Captions: Available on CD and Online University
Compatibility: Vista/XP/2000, OS X, Linux
QuickTime 7, Flash 8

VTC Sign up & Benefits

  • Unlimited Access
  • 98,729 Video Tutorials (23,265 free)
  • Video Available as Flash or QuickTime
  • Over 1026 Courses
  • $30 for One Month Access
  • Multi-User Discounts Available