May
04 |
Facebook Open Graph Tutorial: Integrating the "Like Button".
This tutorial will show you how to add the Facebook Open Graph "like button" social plugin to your site with simple copy and paste instructions.
Recommended Resources
JavaScript basics
HTML basics
XFBML basics
Overview.
The Facebook Open Graph "like button" social plugin is ideal for your site's blog posts and individual pages. This is a perfect, and dead simple way to boost your site's syndication.
This tutorial is broken down into 4 simple code components:
» HTML tags
» JavaScript Facebook Connect API call
» XFBML "like 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. HTML meta tags
The purpose of the meta tags are to pass information back to Facebook when the "like" button is pressed. This will cause whoever "liked" the page to have it posted on their wall. This will drive more traffic back to your site. You MUST include the fb:app_id attribute or it wont function properly. You can get an app id by first setting up an application with Facebook.
Place the following anywhere in the <head> of your document.<meta property = 'og:title' content = 'page title' />
<meta property = 'og:type' content = 'content type (website, blog, movie)' />
<meta property = 'og:url' content = 'your url'/>
<meta property = 'og:image' content = 'your page logo (http://www.whitbreaddesign.com/IMG/whitbreadDesignLogo.png)' />
<meta property = 'og:site_name' content = 'site name' />
<meta property = 'og:description' content = 'site description' />
<meta property = 'fb:app_id' content = 'app id' />
Note: for the type property, see the full list of supported types.
3. 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>
4. XFBML "like button" Integration.
Finally, add the following "like button" one line code. There are 7 straightforward attributes which you must include.
» the href is the url of the page which will be "liked" upon click (do not include this attribute if you want to use the current active page url)
» layout can be set to either standard or button_count (this will change the message which is shown following the "like button")
» show_faces, is a boolean value which shows/hides faces of people who have "liked" your page
» width is the pixel width
» action can be set to either like or recommend (this simply changes the verb within the "like button")
» font which is the font (do not include this attribute to default it)
» colorscheme which can be either light or dark
Place the following anywhere within the <body> of your document.<fb:like href = '' layout = 'standard' show_faces = 'false' width = '400' action = 'like' font = '' colorscheme = 'light'></fb:like>
Conclusion.
And that's all there is to it! Integrate this "like 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 anywhere in the <head> of your document.
<meta property = 'og:title' content = 'page title' />
<meta property = 'og:type' content = 'content type (website, blog, movie)' />
<meta property = 'og:url' content = 'your url'/>
<meta property = 'og:image' content = 'your page logo (http://www.whitbreaddesign.com/IMG/whitbreadDesignLogo.png)' />
<meta property = 'og:site_name' content = 'site name' />
<meta property = 'og:description' content = 'site description' />
<meta property = 'fb:app_id' content = 'app id' />
<meta property = 'og:type' content = 'content type (website, blog, movie)' />
<meta property = 'og:url' content = 'your url'/>
<meta property = 'og:image' content = 'your page logo (http://www.whitbreaddesign.com/IMG/whitbreadDesignLogo.png)' />
<meta property = 'og:site_name' content = 'site name' />
<meta property = 'og:description' content = 'site description' />
<meta property = 'fb:app_id' content = 'app id' />
Note: for the type property, see the full list of supported types.
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>
» the href is the url of the page which will be "liked" upon click (do not include this attribute if you want to use the current active page url)
» layout can be set to either standard or button_count (this will change the message which is shown following the "like button")
» show_faces, is a boolean value which shows/hides faces of people who have "liked" your page
» width is the pixel width
» action can be set to either like or recommend (this simply changes the verb within the "like button")
» font which is the font (do not include this attribute to default it)
» colorscheme which can be either light or dark
Place the following anywhere within the <body> of your document.
<fb:like href = '' layout = 'standard' show_faces = 'false' width = '400' action = 'like' font = '' colorscheme = 'light'></fb:like>
More information on Facebook, XFBML and the Open Graph Protocol can be found at http://developers.facebook.com/
Comments