The
Facebook JavaScript SDK, the one we will be using for our app, enables us to access all of the features of the Graph API via JavaScript, and it provides a rich set of features like authentication and sharing. In this tutorial I’ll show you how to use this SDK in your site. I’ll show you how to add some features to an application we built-in my previous tutorials, the distance finder (
part1 of the tutorial,
part2). As you might remember, we’ve also added twitter @anywhere features to the app (
the tutorial), now it’s time to add Facebook as well!
What are we going to build?
We already have a distance finder, an app the uses the google maps api to find the distance and route between two locations. The results of the search can be shared on twitter. In this tutorial, I’ll show you how to share your results on Facebook!
You can check out the demo
here, and also download the
source code.
Prerequisites
To be able to use the Facebook JavaScript SDK, we will need an application ID. To get one, we have to register a new app. We can do this
here. We will need to fill in the following info correctly to be able to use our new app:
- in the ‘website’ tab, at ‘site url’ we must write the url where the app will be stored
- in the ‘facebook integration’ tab, we must fill in ‘Canvas URL’, also our app’s url
A Facebook page will be generated for our app,
here it is. We can personalize that by adding a description, a photo, etc.
When a user will post on his wall from an app, Facebook will write the name of the app which was used to post that message. When someone clicks on that link, they will be sent to the app’s page.
Our app’s page will also have a ‘Like’ button, if people click it, we will know who liked our app. I will also show you how to add a similar like button on the site, a button that will be connected to our app’s Facebook page.
Changes to the previous version of our app
In this tutorial I will only explain the Facebook related changes we made to our app. If you have questions regarding the rest of the code, check out the previous tutorials or drop me a message.
Including the script
To use the JavaScript Facebook SDK, we will first have to load the SDK in our site. We will do this asynchronously so it does not block loading other elements of our site. We have to add the following code after the tag:
<div id="fb-root"></div>
<script type="text/<span class="><!--mce:0--></script>
window.fbAsyncInit = function() {
FB.init({appId: 'ADD_APP_ID_HERE', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
Don’t forget to fill in the API key!
What are we going to do with the script?
We are going to give our users to possibility to login to Facebook directly from our app and post their search results there.
We will first add a Facebook login button. Here’s the code from Facebook to add such a button:
<fb:login-button autologoutlink='true' perms='email,user_birthday,status_update,publish_stream'></fb:login-button>
We will then have to register the login and logout events and also add a function to check if the user is logged in (when someone visits our site). We will add the following lines to the fbAsyncInit function:
FB.Event.subscribe('auth.login', function(response) {
login();
});
FB.Event.subscribe('auth.logout', function(response) {
logout();
});
FB.getLoginStatus(function(response) {
if (response.session) {
greet();
}
});
We have added an event for when a user logs in the Facebook from our app, when they do, the login() function will be called.
When the user logs out, we’ll call the logout() function.
We’ve also added a function for checking the user status: getLoginStatus(). This will be called when the SDK is loaded, to check if the user is already logged in their Facebook account. The text on the Facebook button we added will change from “Login” to “Facebook logout” according to the user’s status. The greet() function will be called when the user is already logged in. Let’s see how the login (), logout() and greet() functions look like:
function login(){
FB.api('/me', function(response) {
alert('You have successfully logged in, '+response.name+"!");
});
}
function logout(){
alert('You have successfully logged out!');
}
function greet(){
FB.api('/me', function(response) {
alert('Welcome, '+response.name+"!");
});
}
The login function saves the user’s name from the response it got from facebook and displays a message on the screen. The logout and greet button are also just used to show messages on the screen.
After adding these, our user will be able to log in to their facebook account directly from our app! If the user is logged in their facebook account when they visit our app, they will be greeted.
Now let’s see how to help them share their search results!
Adding the share box
We will add a comment box similar to the one added for twitter, next to that one.
In the continueShowRoute() function we will add some more code, to also add a facebook comment box to our ‘share’ div:
var twitter = "<div class='comments' style='display: inline-block;'></div>";
var facebook = "";
document.getElementById("share").innerHTML = twitter+" "+facebook;
As you remember, we used the share_twitter() function to create the link to share and show the comment box with the message. We will be adding there the code to also show the facebook box.
var code = "<span style="font-size: large;">Share with your facebook friends!</span>";
code += "
<input id="status" size="60" type="text" value=" My search on <span class="hiddenSpellError" pre="on ">distancefinder</span>: "+response+"" />";
code += "<br/><a href='#' onclick='setStatus(); return false;'>Share!</a>";
document.getElementById('facebook').innerHTML = code;
The facebook box will have an input field with the text and link to be shared and a ‘Share!’ link. As you can see, when the users click on the ‘Share!’ link, the setStatus() function will be called. Let’s see what it does:
function setStatus(){
// check if user is logged in:
FB.getLoginStatus(function(response) {
if (response.session) {
new_status = document.getElementById('status').value;
FB.api(
{
method: 'status.set',
status: new_status
},
function(response) {
if (response == 0){
alert('Your facebook status was not updated.');
}
else{
alert('Your facebook status was updated');
}
}
);
} else {
alert('please log in first :)');
}
});
}
It first checks if the user is
logged in. For this, it uses the getLoginStatus() function from the javascript SDK. If the user is not logged in, we’ll show a message informing them that they must login in order to share the search results.
If the user is logged in, we get the message to share from the input field called ‘status’, and use the status.set method from the SDK to set the user’s status to the new value. After setting the status, we will show a message to the user.
And that’s it! Our users can now share their search results on facebook!
Adding the ‘Like’ box
You might have noticed there’s a like box in our app, below the map. It shows the users that have liked our facebook app. To add one of those, all you have to do is go to the app profile page, at the “get started” tab. There you will find a link to create a like box. You can choose some options for your box and facebook will generate the code for you. The code for the box from our app looks like this:
<fb:like-box profile_id="APP_ID_IS_HERE" stream="false" header="false"></fb:like-box>
It really simple, isn’t it?
I hope you enjoyed this tutorial and don’t hesitate to ask if you have any questions.
Warning
This might not work well with internet explorer. I’ve tested with chrome, firefox and opera and it works great on those!
