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