網路上已經有許多關於 Facebook API 的使用教學，而最近則是越來越多關於 Facebook Connect 的應用，例如替自己的 Blog 加入留言，但留言可以發佈到 Facebook 塗鴉牆上，在這邊試著結合 Facebok API 與 Facebook Connect ，建立一個網站服務，但網站管理者不管理帳號密碼，反而全部都使用 Facebook 的帳密管理機制。
這樣的最大的好處是網站服務的推廣時，主要透過 Facebook 的平台，提供類似 OpenID 或 OAuth 的服務，讓使用者不必再註冊一個新帳號，並且使用 Facebook 的平台推廣自己開發的服務。
先看看 Facebook 上頭使用者的活躍程度：
More than 400 million active users
50% of our active users log on to Facebook in any given day
More than 35 million users update their status each day
More than 60 million status updates posted each day
...
資料來源：Facebook | 統計資料
除此之外，Facebook 也提供許多官方與非官方 Client libraries ，如：
PHP 5
JavaScript
Facebook Connect for iPhone
ActionScript 3.0 Library for Facebook Platform
Microsoft SDK for Facebook Platform
...
資料來源：User:Client Libraries - Facebook Developer Wiki
所以，有機會就試試 Facebook Connect 的效果吧！
設定方式：
- 可以透過傳統的 Facebook | 開發人員 建立應用程式或是從 Facebook Developers | Facebook Connect 上頭的 Start Building 按鈕進行，使用後者比較簡單，也有完整的程式範例。
- 以 Facebook | 開發人員 為例
- 建立新的應用程式
- 填寫一些名稱資訊
- 填寫一些名稱資訊
- 設定 "聯外通" 並填寫 "聯外通網址"
- 此例以 http://my.domain.com/path/fb/
- 此例以 http://my.domain.com/path/fb/
- 設定儲存完則會切回此應用程式整體資訊，例如顯示 API 金鑰、Application Secret 等資訊。
- 切換到自己的機器上( http://my.domain.com )
- 準備 xd_receiver.htm ，將它擺在網站的根目錄，以此例就是可以用網頁連到 http://my.domain.com/xd_receiver.htm 這個位置。如果沒有權限，那擺在 http://my.domain.com/path/fb/xd_receiver.htm 也可以試試，我試的結果兩者都可以。
- xd_receiver.htm 檔案內容
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>xd</title></head><body><script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script></body></html>
- 建立新的應用程式
- 以 Facebook Developers | Facebook Connect 為例
- 點選 Start Building 建立基本資料
- 擺放 xd_receiver.htm 在網站的根目錄中，如果有權限可以擺放該檔，建議可以先測試後在進行，不然就點選稍候再上傳，並且把檔案擺在網站服務目錄下
- 接著網站上也會有一些現成的程式碼可以用，比傳統建立的方式輕鬆許多，資料也豐富很多。
- 點選 Start Building 建立基本資料
- 其他留意項目
- 關於 Server 位置，雖然設定在使用非 80 port 時可以正常設定完成，如 http://my.domain.com:8080/path/fb/ ，但在使用 Facebook 提供的認證過程中，並不會幫你導回正確的 port ；使用 http://my.domain.com/~user/path/fb/ 的設定方式也會有問題，要留意一下。
辦完向 Facebook 申請的設定部份後，緊接著則是對 Server 撰寫合適的程式碼，在此以簡單的程式碼舉例：
- 假設網站位置在 http://my.domain.com/path/fb/ ，在 Server 位置恰好是 /data/path/fb/ 目錄，那該目錄會有兩個檔案，分別是 config.php 跟 index.php ，如果無法設定網站根目錄 xd_receiver.htm ，那可以把它擺在 /data/path/fb/ 目錄中，也就是在 /data/path/fb 目錄中共有三個檔案。
- config.php
- <?php
session_start();
$appapikey = 'API_KEY';
$appsecret = 'Application Secret';
// check login
if( isset( $_REQUEST['check_login'] ) )
{
require_once 'facebook.php';
$facebook = new Facebook($appapikey, $appsecret);
$user_id = $facebook->get_loggedin_user();
if( !empty( $user_id ) && !isset( $_SESSION['id'] ) )
{
$_SESSION['type'] = 'facebook' ;
$_SESSION['id'] = $user_id;
if( isset( $_REQUEST['continue'] ) )
{
header( 'LOCATION: '.$_REQUEST['continue'] );
exit;
}
}
}
$curr_url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
?>
- <?php
- index.php
- <?php
require_once( 'config.php' );
?>
<html>
<head>
</head>
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/zh_TW" type="text/javascript"></script><script type="text/javascript">FB.init("<?php echo $appapikey;?>");</script>
<?php
if( !isset( $_SESSION['id'] ) )
{
$login_url = strpos( $curr_url , '?' ) > -1 ? $curr_url.'&check_login=on' : $curr_url.'?check_login=on';
?>
<fb:login-button v="2" size="small" onlogin="window.location='<?php echo $login_url; ?>';">用 Facebook 登入</fb:login-button>
<?php
}
else
{
?>
<fb:comments numposts="4" title="My Blog Comments" css="http://www.yourwebsite.com/css/comments.css?1234" simple="1"></fb:comments>
<?php
}
?>
</body>
</html>
- <?php
網站 Demo 畫面：
- 初次訪問 http://my.domain.com/path/fb/ ，此頁只會有單純的一個登入按鈕
- 點選 Facebook 登入按鈕，會跳出相關的資訊給使用者，告知使用者一些資訊
- 若登入後，則將畫面轉成可以留言到個人塗鴉牆上的介面
目前的缺點：
尚未找到妥善的登出方式。
