This guide describes adding Facebook capabilities to websites. See the Getting Started with Apps on Facebook.com guide if you instead want to integrate your app directly into the core Facebook experience.
This guide will walk you through the basics of creating a web app that leverages these features. The examples in this guide use PHP for server-side programming and HTML/JavaScript for client-side code. These examples are very straightforward and easily translatable to other languages.
Social Plugins
Social Plugins are the easiest way to get started with Facebook Platform. The plugins are embeddable social features that can be integrated in your site with a line of HTML. Because they are hosted by Facebook, the plugins are personalized for all users who are currently logged into Facebook, even if they are visiting your site for the first time.The most important Social Plugin is the Like Button, which enables users to share your page with their friends with one click. You can add a Like button to any page with an
iframe tag:<html>
<head>
<title>My Great Web page</title>
</head>
<body>
<iframe src="https://www.facebook.com/plugins/like.php?href=YOUR_URL"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
</body>
</html>
Like Button
Recommendations Plugin
iframe tag for the plugin within your page. There are several Social Plugins, such as Comments
that require the use of XFBML (eXtended Facebook Markup Language).
XFBML is a set of XML elements that can be included in your HTML pages
to display Social Plugins. When your page is loaded, any XFBML elements
found in the document are processed by the JavaScript SDK, resulting in the appropriate plugin being rendered on your page.We provide XFBML elements for all of our Social Plugins. For example, the Like Button can also be placed on your page by using the XFBML equivalent:
<html>
<head>
<title>My Great Web page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
// Load the SDK Asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like"></div>
</body>
</html>iframe versions of our plugins are the most widely
used, as they require a minimal understanding of Facebook Platform. The
XFBML versions are typically used by more sophisticated developers
looking for more control and consistency in their codebase. (Note that
the xfbml=1 here is required for iframe plugins, too. That flag tell
the JavaScript SDK to search your page for all any plugins - HTML5 or
XFBML.)Getting started could not be simpler. Just select the plugin from our Social Plugin page and follow the steps in the provided configurator. These configurators, like the below, help you setup your plugin and generate all the code you need to add it to your site.
Like Config
Login
See our Login docs for info and technical guides.Personalization
While Social Plugins offer an easy way to personalized your site, once you have added login to your site, you can access the full power of the Graph API to create an even deeper personalized experience for your users. You can use the Graph API to access the user's Facebook profile, using this data in your own custom experience. You can use the Graph API to publish to the user's Facebook Wall and their News Feed. You can use the Graph API to access the user's social graph, bring their friends directly to your site all in your own custom experience.The Javascript SDK provides a straightforward way to access the Graph API: FB.api. This function takes a string argument which specifies the part of the Graph to target and a callback function that is invoked when the call completes. The following demonstrates how to use FB.api() to retrieve the user's picture and name from the Graph API and display it on a page within your site:
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.api('/me', function(user) {
if (user) {
var image = document.getElementById('image');
image.src = 'https://graph.facebook.com/' + user.id + '/picture';
var name = document.getElementById('name');
name.innerHTML = user.name
}
});
};
// Load the SDK Asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div align="center">
<img id="image"/>
<div id="name"></div>
</div>
</body>
</html> <html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.ui({
method: 'feed'
});
};
// Load the SDK Asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
Web Dialog
The JavaScript SDK lets you access the Graph API and Platform Dialogs from client-side code but some of the most interesting integrations involve accessing the Graph API from server-side code running on your web server. The JavaScript SDK saves the details for the logged in user in such a way that it can be accessed by the PHP SDK. This allows you to make server-side calls to Facebook Platform without doing any extra work. The following PHP example shows you how to use the JavaScript SDK for login and the PHP SDK for personalization:
<?php
define('YOUR_APP_ID', 'YOUR APP ID');
//uses the PHP SDK. Download from https://github.com/facebook/facebook-php-sdk
require 'facebook.php';
$facebook = new Facebook(array(
'appId' => YOUR_APP_ID,
'secret' => 'YOUR APP SECRET',
));
$userId = $facebook->getUser();
?>
<html>
<body>
<div id="fb-root"></div>
<?php if ($userId) {
$userInfo = $facebook->api('/' . $userId); ?>
Welcome <?= $userInfo['name'] ?>
<?php } else { ?>
<fb:login-button></fb:login-button>
<?php } ?>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
};
// Load the SDK Asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>Analytics
You can get detailed analytics about the demographics of your users and how users are sharing from your website with Insights.
Insights provides reports broken down by domain and by app. These reports include rich data about users sharing content from your site within Facebook and other Facebook-enabled apps no matter where those activity originated. For example, if a user puts a URL from your site into a Facebook status message, that data is included in the analytics for your domain.
The data from Insights is also available in the Graph API so you can integrate the Facebook analytics data with your own, in-house analytics systems.
If you use an external analytics system, there are a couple of steps you can take to ensure proper counts for page hits on your domain. First, exclude requests with a user agent matching
facebookexternalhit/*. This user agent is used by the Facebook Open Graph tools to retrieve your og
meta tags. Second, track clicks from plugins embedded on your site
separately from clicks with a facebook.com referrer. Social Plugins
with have a referral URL matching http://www.facebook.com/plugins/*.Next Steps
This was a quick survey of the major features available to your website from Facebook Platform. Our core concepts documents provide deeper insight into the various pieces of Facebook Platform. The Graph API Overview and Open Graph Getting Started guide are great places to start. If you are looking for a real world examples to help you get started building please see our Samples. If you are looking for inspiration, check out our Showcase.
Updated on Friday
0 comments:
Post a Comment