May
02 |
Facebook Open Graph Tutorial: Integrating the "Like Box".
This tutorial will show you - step by step - how to add the Facebook "like box" social plugin to your site with simple copy and paste instructions.
Recommended Resources
JavaScript basics
HTML basics
XFBML basics
Overview.
The "like box" is ideal for your home page. Viewers can immediately see the impact of how many people like your site as a whole.
This tutorial is broken down into 4 simple code components:
» HTML tags
» JavaScript Facebook Connect API call
» XFBML "like box"
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 (optional)
This step is optional, meaning that it is not required to render, or have any effect on the rendering of the "like box". 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. Therefore I highly recommend including it.
Replace the content attributes of the following meta tags with your information and add it 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 = 'http://www.whitbreaddesign.com'/>
<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 content attribute of property "fb:type", 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 box" Integration.
Finally, add the following "like box" one line code. There are 6 straightforward attributes which you must include:
» profile_id is the Facebook application/page id which the like box represents
» width is the width
» height is the height
» connections shows any number photos of users who have "liked" your page or application, ie. 5, 10, 15.
» stream is a boolean value (true/false) which with either display/hide the news stream of your application/page.
» header is a boolean value (true/false) which with either display/hide the header text
Place the following anywhere within the <body> of your document.<fb:like-box profile_id="app id" width="300" height="" connections="8" stream="true" header="true"></fb:like-box>
Conclusion.
And that's all there is to it! So far it looks like the new changes to the Facebook Connect API are awesome and super easy to integrate. Enjoy!
More information on Facebook Connect, 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">
Replace the content attributes of the following meta tags with your information and add it 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 = 'http://www.whitbreaddesign.com'/>
<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 = 'http://www.whitbreaddesign.com'/>
<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 content attribute of property "fb:type", 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>
» profile_id is the Facebook application/page id which the like box represents
» width is the width
» height is the height
» connections shows any number photos of users who have "liked" your page or application, ie. 5, 10, 15.
» stream is a boolean value (true/false) which with either display/hide the news stream of your application/page.
» header is a boolean value (true/false) which with either display/hide the header text
Place the following anywhere within the <body> of your document.
<fb:like-box profile_id="app id" width="300" height="" connections="8" stream="true" header="true"></fb:like-box>
More information on Facebook Connect, XFBML and the Open Graph Protocol can be found at http://developers.facebook.com/
Comments