Jun
22 |
Facebook Open Graph Tutorial: Customizing the User Experience.
This tutorial will show you how to customize the user experience on your web pages while they are logged in/out of Facebook on your site.
Recommended Resources
JavaScript Basics
HTML Basics
XFBML Basics
Overview.
This tutorial will show you how to display dynamic content on your pages using JavaScript and the Facebook API to fulling customize the user experience on your web pages. By targeting your content to the user based on their Facebook session status, you will be able to make their overall experience more pleasant.
The example in this tutorial will contain a single <div> placed within the <body>, controlled by 2 JavaScript functions used with some simple Facebook API JavaScript.
This tutorial is broken down into 3 simple code components:
» HTML opening tag
» JavaScript functions for customized content with Facebook API
» The customized content <div>
1. HTML opening tag.
Adding these attributes to your opening <html> will allow the Open Graph Protocol to recognize that you will be using its meta tag attributes for posting back to Facebook.
Place the following two xmlns attributes in the opening <html> tag of your document.<html xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
xmlns:fb="http://www.facebook.com/2008/fbml">
2. JavaScript functions for customized content with Facebook API
The following code should be placed directly after the opening <body> tag on your web page.
Here is a breakdown of how the following code blocks function:
» FB.init: this function initializes the Facebook API (events, etc.)
» FB.Event.subscribe: these 2 functions register the events which trigger the login and logout functions of Facebook API and will run when either a login or logout from Facebook has been triggered.
» FB.getLoginStatus: this function gets the initial login status when the page is loaded and sets the customized layout depending on whether the user is logged into Facebook already.
» login/logout: these functions are triggered by the above functions as noted in the code below. I have utilized them for proper code reusability.
Note: do not forget to replace "YOUR_APP_ID" with your own Facebook app id.<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '147777435313',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.login', function(response) {
//if user is logged in
login();
});
FB.Event.subscribe('auth.logout', function(response) {
//if user is logged out
logout();
});
FB.getLoginStatus(function(response) {
if (response.session) {
//if user is logged in
login();
} else {
//if user is logged out
logout();
}
});
};
//if user is logged in - do this
function login() {
FB.api('/me', function(response) {
document.getElementById('fb-info-block').innerHTML =
"Login successful! Welcome, " + response.name + ".<br /><br />" +
"<fb:like href = 'www.whitbreaddesign.com' show_faces = 'false' width = '100' action = 'like' colorscheme = 'light'></fb:like>";
});
}
//if user is logged out - do this
function logout() {
document.getElementById('fb-info-block').innerHTML =
"Please log in using Facebook to see the welcome message!";
}
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '147777435313',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.login', function(response) {
//if user is logged in
login();
});
FB.Event.subscribe('auth.logout', function(response) {
//if user is logged out
logout();
});
FB.getLoginStatus(function(response) {
if (response.session) {
//if user is logged in
login();
} else {
//if user is logged out
logout();
}
});
};
//if user is logged in - do this
function login() {
FB.api('/me', function(response) {
document.getElementById('fb-info-block').innerHTML =
"Login successful! Welcome, " + response.name + ".<br /><br />" +
"<fb:like href = 'www.whitbreaddesign.com' show_faces = 'false' width = '100' action = 'like' colorscheme = 'light'></fb:like>";
});
}
//if user is logged out - do this
function logout() {
document.getElementById('fb-info-block').innerHTML =
"Please log in using Facebook to see the welcome message!";
}
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
3. The customized content <div>
Place the following div tag anywhere within the body of your web page to display the variable content.
Note: make sure that the "id" attribute matches that of the id contained in the login()/logout() functions from step 2.<div id = 'fb-info-block'></div>
Conclusion.
And that's how you can display customized content to improve the user experience on your web pages.
Click here to see this example in action or download the source below.
More information on Facebook, XFBML and the Open Graph Protocol can be found at http://developers.facebook.com/
Tutorial Downloads
Comments