网上总是能看到各种Like Button，Recommendation之类的东西，FB提供了一系列的API专门供开发人员使用，从而定制页面，这些按钮之类的东西叫做Social Plugins。
1. Social Plugins
这个是借助FB平台开发的最简单的方式。只需要嵌入一段HTML代码，就可以将社交的特性整合进你的页面。由于它们是由FB来维护的，所以说这些plugins都是为当前那些登录的用户所定制化的，即使它们是第一次访问你的页面。
最重要的Social Plugin就是Like Button，使得用户可以通过仅仅点击一下就能和好友分享该页面。你可以通过使用iframe标签将like button给添加进去，代码FB官方会提供。
<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>大多数的Social Plugins都可以简单通过加入iframe标签添加进页面，但是还有一些，比如comments，live stream，就需要使用XFBML(eXtended Facebook Markup Language)了。总的来说这个也就是一些写成形的js语句。
拿like button来说，其实它也可以用XFBML来写，只是转换成了js语句。通常来说，如果你仅仅是使用的话，那么用iframe版本的就不错了，因为它最简单。XFBML版本是给那些需要加入更多的控制的开发者来用的。其实FB提供了非常简便的小工具可以帮助开发人员很快地选择并且加载Social Plugins。就是每个plugin都会提供一个configurator，可以直接在下拉框里面选就是了，选好了点generate code，就可以直接生成你需要的代码，复制粘贴就行。
2. Authentication
FB通过使用FB作为登录系统，帮助开发人员简化并且增强了用户注册和登录过程。用户无需再多填写一次或者记住另外一个帐号来登录你的页面，只要用户登录了FB，他们就可以自动地登录到你开发的页面。使用FB来登录，你可以获取所有的需要的信息，通过这些信息来创建一个social，personalized的用户体验。
FB使用OAuth 2.0进行授权和认证，但是你可以直接使用OAuth 2.0添加登录框到你的页面，而开源的JavaScript SDK就是使用FB进行登录的最简便的方法。JavaScript SDK首先要求你使用Facebook注册你的网站，然后获得一个App ID，这个id是你的网站的唯一的识别标签。为了使用认证方法，App必须配置一App Domain，也就是网站的网址。这个可以在设置页面进行设置，一旦设置好了，就可以将下面的代码添加进去，也就是所谓的JavaScript SDK。
这个库也就是FB在JavaScript的基础上开发的API,所以很多东西都被封装好了。<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 }); // Additional initialization code here }; // Load the SDK Asynchronously (function(d){ var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; ref.parentNode.insertBefore(js, ref); }(document)); </script> </body> </html>
这个时候你要想添加任何Social Plugins，比如login，很简单，就在</script>标签后面添加一行代码就行了。<div class="fb-login-button">Login with Facebook</div>
为了使得用户能够登录到你的页面去，有3件必不可少的事情。第一件，FB需要验证用户，保证用户没有作假，通常是为了保证是本人。第二件，FB需要验证你的网站，保证用户是将信息给你的网站，而不是其他人。最后，用户需要明确地授权你的网站能够获取他们的信息，这样能够保证用户知道自己的哪些信息会被交给你的网站。
虽然看起来很复杂，但是，对于开发人员来说，只是需要使用Login Button，而对于用户来说，只是需要点击它。当用户点击的时候，JavaScript SDK就会保证用户已经登录了FB，也会同时保证请求来自于你的网站。FB接着会弹出一个authorization dialog，这个dialog会展示你的页面和你要请求获取的信息。
如果用户点击量Allow，那么FB就会让你的页面能够获取你请求的信息。如果用户点击了Don't Allow，那么该对话框就会被关闭，并且你不会得到任何信息。默认情况下，你可以获取用户的user name，picture，还有其他用户公开给每个人的信息。如果想获得更多的信息，比如说用户的email，那么就必须针对该信息特别地发出请求。FB对这个也会提供支持，那就是在原有的基础上简单地添加一个scope属性就行了。
<div class="fb-login-button" scope="email,user_checkins">
Login with Facebook
</div>用户点击了login button以后，他们可以看到授权的对话框，这个对话框会告诉他们需要提供哪些信息，然后他们再决定是不是允许。需要记住的是，尽量请求获取最少量的信息，请求的信息越多，用户越容易拒绝。
除了login button之外，还有registration plugin。这个控件主要可以提供2个login button没有的功能。第一，允许那些没有FB帐号的用户能够使用。第二，还可以请求用户在注册的时候填写一些FB不能提供的信息，比如最喜欢的颜色之类的。使用方法和login button一样，添加类似如下代码。
<div
class="fb-registration"
data-fields="[{'name':'name'}, {'name':'email'},
{'name':'favorite_car','description':'What is your favorite car?',
'type':'text'}]"
data-redirect-uri="URL_TO_LOAD_AFTER_REGISTRATION"
</div>如果用户还没有登录FB，那么他们会看见登录的连接，然后可以点击登录。如果用户已经登录到了FB，那么有些已经有的信息就会被预先填写进去，剩下其它一些需要填写的信息。用户填写完其它信息以后，就可以点击Register。然后认证和授权的操作就自动开始了。一旦授权和认证完成了，FB就会将页面自动转到redirect-uri属性里面写的URL，然后完成注册。
Login Button和Registration Plugin可以轻轻松松地帮你带来5亿用户到你的页面上去。所以说，如果想要这样做的话，可以减少自己的代码量，学会将Login的代码添加进去。具体的参考Login Button和Registration Plugin以及JavaScript SDK就行了。
3. Personalization
Social Plugins提供了一个简单的方式来让你的网站显得更加个性化，一旦你将登录加入到你的页面了，你就能完全地使用Graph API，为你的用户们创建更加个性化的用户体验。你可以使用Graph API来获取用户的FB Profile，使用该信息来定制你想要的体验。你还可以使用Graph API想用户的Facebook Wall和News Feed发布消息。还可以使用它获取用户的好友信息，从而将他们也带到你的网站。
JavaScript SDK提供了非常直接的方式来使用Graph API:FB:api。这个方法接收一个字符串参数，这个参数指定当这个方法被调用的时候会调用哪个函数。下面是一个例子，说明怎么使用它。
FB.api('/me', function(user) {
if (user) {
var image = document.getElementById('image');
image.src = 'http://graph.facebook.com/' + user.id + '/picture';
var name = document.getElementById('name');
name.innerHTML = user.name
}
});
};还有一个东西就是post东西到FB上。使用FB:ui方法。这个方法会调用Platform Dialogs。除了post之外，还可以邀请朋友。如下代码是一个例子。
FB.ui({ method: 'feed',
message: 'Facebook for Websites is super-cool'});
};学习这个的最好的方式就是使用JavaScript Console，可以通过这个模拟器来看看你每一步的操作会引起什么样的结果。通过JavaScript SDK使得开发人员可以使用Graph API 和 Platform Dialog，除了在客户端获得支持之外，也有服务器端的PHP支持。
4. Analytics
使用Insights，开发人员可以查看具体的统计数据，包括用户数，用户数怎样分享你的页面的之类的。无论用户数怎样使用到了你开发的页面，都会被算到统计数据里面。除了直接使用FB的之外，你还可以自行整合这个功能，比如你自己想加一个网站统计，那么你就去available in the Graph API查看。如果使用外部的统计分析系统的话，那么有一些注意事项。这个用到的时候再说。
7828
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
