Welcome to part three of "Design and Code an Integrated Facebook App." At this point, I'm assuming that you have created the HTML and CSS for your app. If not, then refer to the first entry in this series. In this part, we're going to take our app to the next level!
Advertisement Advertisement Advertisement Advertisement Advertisement Oct 7, 2011 • 14 min read
Welcome to part three of "Design and Code an Integrated Facebook App." At this point, I'm assuming that you have created the HTML and CSS for your app. If not, then refer to the first entry in this series. In this part, we're going to take our app to the next level!
In this lesson, we'll take care of:
So stick with me, make yourself a cup of tea, and happy coding!
Before we begin with converting our HTML to PHP, we need to make a few of our HTML objects functional. We can do this quite easily using the jQuery library. If you haven't started using the jQuery library yet, then now is definitely an excellent time to start. It's a great introduction to Javascript and truthfully isn't too difficult to use. In fact, you can create some great effects with only a few lines of code. In our blog app, we're going to use jQuery for two things. Firstly, we're going to use it for our live filter search, and secondly, for our page tabs to allow our users to have a smooth experience as they transition from page to page.
If you remember from the previous tutorial, we included a JavaScript file into our HTML document header. Now it's time to create that file. So jump into your favourite code editor, and call the file ' myjava.js '. We begin by creating the document ready. This tells jQuery to load everything inside it once the DOM is ready to be manipulated.
Facebook app tabs" width="700px" height="408px" />
Facebook app tabs" width="650px" height="379px" /> 
Facebook app tabs" width="380px" height="225px" />
When the DOM is ready, we hide all the tabs. We then fade each page in when the corresponding tab is clicked on or made 'active.' We also remove the active class from the tabs and hide all of the other pages content.
var tabContent = $('.tab_content'), //Define the tab as a variable
tabs = $('ul.tabs li'); //Define the tabs li as a variable
tabContent.hide(); //On page load hide all the contents of all tabs
tabs.eq(0).addClass("active").show(); //Default to the first tab
tabContent.eq(0).show(); //Show the default tabs content
//When the user clicks on the tab
tabs.click(function(e)
var li = $(this), //define this li as a variable
activeTab = li.find('a'); //Get the href's attribute value (class) and fade in the corresponding tabs content
tabs.removeClass("active"); //Remove the active class
li.addClass("active"); //Add the active tab to the selected tab
tabContent.hide(); //Hide all other tab content
activeTab.fadeIn(); //Fade the tab in
e.preventDefault();
The next item we will use jQuery for is our filter search. This will allow our users to filter their search results in real time as they type. This is done by taking the live value of the form field and filtering it with anything that matches within our 'posts' div s. The filter will then show the 'posts' div that contain the value and hide any that don't.
//Filter Search
$(".search").keyup(function ()
var $this = $(this),
filter = $this.val(),
count = 0;
$(".post").each(function ()
var $this = $(this);
if ($this.text().search(new RegExp(filter, "i")) 0)
$this.hide();
> else
$this.show();
$("#filter-count").text(count);
Now it's time to bring this static file to life and begin pulling in data from Facebook and Feedburner. Now is probably a good time to rename your file from index.html to index.php and download the PHP SDK. You can download the latest copy of Facebook's PHP SDK from:
Now we now need to setup our Facebook app canvas page. Although this has been covered before, Facebook has recently updated its app setup page; so it's important to go through the new setup. Firstly, upload the index.php to your own web hosting account. Ive uploaded mine to a subfolder eg. www.yourdomain.com/tut When finished, you can setup your app by visiting https://developers.facebook.com/apps.
At this point, click on the 'create new app' button in the top right corner. Enter the name of your app and you will then be taken to the setup page. Facebook allows you to create many variations of apps - from desktop to mobile. In our case, we need to choose the 'App on Facebook'. There are five essential fields that you need to fill in in order for your app to work. They are highlighted in the image above. Once this has been done, if you go to apps.facebook.com, followed by whatever you entered into the 'app namespace.' In my case, this was 'webdesigntuts' so my app domain is: http://apps.facebook.com/webdesigntuts/
When you go to your url, you should see your index file within the canvas space on Facebook.
After bringing the app into Facebook, it's now time to pull in data from the Facebook graph API and allow people to login in and out of our app.
In the directory for our app, add a new folder and call it ' fb ' Open the SDK folder that you downloaded from GitHub. In it, you should find a couple of examples: the src and some tests. Take the contents from the src folder and drag it into your fb folder. This is the bit we need in order to connect to Facebook. In our index.php file, add the code below starting with including the Facebook SDK from our ' fb ' folder, and add your unique app id and secret key. In the code below, you can see how this should be setup. We're essentially connecting to Facebook and retrieving the user id of the person who is using our app. If the user has been authenticated, then we are generating a variable for the logout url or if they haven't, we are generating one for the login url.
