May
27 |
Facebook Open Graph Tutorial: Integrating the "Activity Feed".
This tutorial will show you how to add the Facebook Open Graph "Activity Feed" social plugin to your site with simple copy and paste instructions.
Recommended Resources
JavaScript basics
HTML basics
XFBML basics
Overview.
The Facebook Open Graph "activity feed" plugin can be used to utilize your website to promote posts. 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 "activity feed" plugin
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 "activity feed" Plugin Integration.
Finally, add the following "activity feed" plugin one line code. There are 7 attributes which you can include to customize the button to your web page:
» site is the domain of the site your displaying activities for.
» width is the width of the activity feed.
» height is the height of the activity feed.
» header is a boolean value (true/false). This either hides of shows the activity feed header.
» colorscheme is the color scheme of the activity feed. This can be set to either "light" or "dark".
» font is the font of the text within the feed. The following fonts are accepted: arial, lucida grande, sego ui, tahoma, trebuchet ms, verdant.
» border_color is the hex (#000000) color value of the border of the feed.
Place the following anywhere within the <body> of your document.<fb:activity site="http://www.whitbreaddesign.com" width="250" height="350" header="false" font="verdana" colorscheme = "light" border_color = "#000"></fb:activity>
Conclusion.
And that's all there is to it! Integrate the "activity feed" plugin 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>
» site is the domain of the site your displaying activities for.
» width is the width of the activity feed.
» height is the height of the activity feed.
» header is a boolean value (true/false). This either hides of shows the activity feed header.
» colorscheme is the color scheme of the activity feed. This can be set to either "light" or "dark".
» font is the font of the text within the feed. The following fonts are accepted: arial, lucida grande, sego ui, tahoma, trebuchet ms, verdant.
» border_color is the hex (#000000) color value of the border of the feed.
Place the following anywhere within the <body> of your document.
<fb:activity site="http://www.whitbreaddesign.com" width="250" height="350" header="false" font="verdana" colorscheme = "light" border_color = "#000"></fb:activity>
More information on Facebook, XFBML and the Open Graph Protocol can be found at http://developers.facebook.com/
Comments