May
25 |
Facebook Open Graph Tutorial: Integrating the "Live Stream".
This tutorial will show you how to add the Facebook Open Graph "Live Stream" social plugin to your site with simple copy and paste instructions.
Recommended Resources
JavaScript basics
HTML basics
XFBML basics
Overview.
The Facebook Open Graph "live stream" 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 "live stream" 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 "live stream" Plugin Integration.
Finally, add the following "live stream" plugin one line code. There are 4 attributes which you can include to customize the button to your web page:
» event_app_id is the app id which is hosting the event.
» width is the width of the plugin.
» height is the height of the plugin.
» xid is the id of the element. Only use this if you have multiple "live streams" on your page.
Place the following anywhere within the <body> of your document.<fb:live-stream event_app_id="your_app_id" width="425" height="400" xid=""></fb:live-stream>
Conclusion.
And that's all there is to it! Integrate the "live stream" 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>
» event_app_id is the app id which is hosting the event.
» width is the width of the plugin.
» height is the height of the plugin.
» xid is the id of the element. Only use this if you have multiple "live streams" on your page.
Place the following anywhere within the <body> of your document.
<fb:live-stream event_app_id="your_app_id" width="425" height="400" xid=""></fb:live-stream>
More information on Facebook, XFBML and the Open Graph Protocol can be found at http://developers.facebook.com/
Comments