May
13 |
Facebook Open Graph Tutorial: Integrating the FBConnect "Login/ Logout Button".
This tutorial will show you how to add the FBConnect "login/logout button" to your site with simple copy and paste instructions.
Recommended Resources
JavaScript basics
HTML basics
XFBML basics
Overview.
The Facebook Connect "login/logout button" can be used to enhance features of your site. It enables you to personalize the user's experience by leveraging either the Facebook Open Graph API or any of your own data driven scripting.
This tutorial is broken down into 3 simple code components:
» HTML tags
» JavaScript Facebook Connect API call
» XFBML "login/logout button"
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">
2. JavaScript Facebook Connect API call.
This code includes the JavaScript library to make API calls using XFBML. The only thing you need to edit is the appid parameter.
Place the following directly after the opening <body> tag of your document.<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'app id',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(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. XFBML "login/logout button" Integration.
Finally, add the following "login/logout button" one line code. There are 5 attributes which you can include to customize the button to your web page:
» size can be set to "small", "medium", "large", or "xlarge". Default is "medium"
» autologoutlink is a boolean value (true/false). When set to true, if the user is logged into Facebook the button will display a logout button instead. Default is "false"
» background can be set to either "white", "dark", or "light". Default is "light"
» length can be set to either "long" or "short". For "short", the text "Connect" will be displayed within the button. For "long", the text "Connect with Facebook" will be displayed. Default is "short"
» onlogin accepts some JavaScript code or function which is triggered on login.
Place the following anywhere within the <body> of your document.<fb:login-button size = 'large' length = 'long' autologoutlink = 'true' onlogin = 'fbLoginFunction()'></fb:login-button>
Conclusion.
And that's all there is to it! Integrate this "login/logout button" with all of your posts to see a definite impact on your referrals from Facebook.
More information on Facebook, XFBML and the Open Graph Protocol can be found at http://developers.facebook.com/
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">
Place the following directly after the opening <body> tag of your document.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'app id',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(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 : 'app id',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(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>
» size can be set to "small", "medium", "large", or "xlarge". Default is "medium"
» autologoutlink is a boolean value (true/false). When set to true, if the user is logged into Facebook the button will display a logout button instead. Default is "false"
» background can be set to either "white", "dark", or "light". Default is "light"
» length can be set to either "long" or "short". For "short", the text "Connect" will be displayed within the button. For "long", the text "Connect with Facebook" will be displayed. Default is "short"
» onlogin accepts some JavaScript code or function which is triggered on login.
Place the following anywhere within the <body> of your document.
<fb:login-button size = 'large' length = 'long' autologoutlink = 'true' onlogin = 'fbLoginFunction()'></fb:login-button>
More information on Facebook, XFBML and the Open Graph Protocol can be found at http://developers.facebook.com/
Comments