使用 Facebook Connect (App) 的基本環境設定

在一般網頁使用 Facebook Connect 登入, 然後做 判斷、加入粉絲團 等動作, 該如何做? 在此先寫 基本開發環境 如何設定.

註: 需要先將粉絲團建立好, 建立粉絲團的步驟可見 - 如何在 Facebook 建立粉絲團

Facebook 改成 英文版 步驟

Facebook 改成 英文版 比較容易跟 Facebook 的文件做比對. (ex: 粉絲團 => 我在文件一直找 Fans, 沒想到是 Pages)

1. 帳號 (Account) -> 帳號設定(Account Settings)
2. 語言(Language)
   1. 主要語言(Primary Language)
   2. 由 中文(台灣) 改成 English(US)

建立 Facebook App

要開發 Facebook 的程式, 就得要建立 Facebook App 來寫, 並不是建立粉絲團, 就可以在粉絲團上面開發. XD

1. 於 "Facebook | Developers" 頁, 點選 "Set Up New Application".
2. 輸入自己要的 Facebook Applicaiton 名字, 再選擇 Agree 即可建立完成.(設定部份可先跳過, 或者看下述 "設定 Facebook Connect 認證" 部份)

設定 Facebook Connect 認證

1. Facebook App 列表管理
2. Edit Settings
3. Authentication
   1. Authentication Settings
      • Installable to?
      • Users (勾選)
      • Facebook Pages (勾選)
   2. Authentication Callback URLs
      • Post-Authorize Callback URL: 填你的 App 網址(ex: http://example.com)
      • Post-Remove Callback URL: 填你的 App 網址(ex: http://example.com)
4. Connect
   • Connect URL: 填你的 App 網址(ex: http://example.com)
   • Account Preview URL: 填你的 App 網址(ex: http://example.com)
   • Base Domain: 填你的 App 網址 Domain(ex: example.com)
   • Account Reclamation URL: 填你的 App 網址(ex: http://example.com)
5. Canvas (註: 此欄位都不填也可以動)
   • The Canvas Callback URL: 填你的 App 網址(ex: http://example.com)
   • The Canvas Page URL: 填你的 App 於 apps.facebook.com/yourapp 的 URL.
6. Advanced - 此模式看個人使用狀況而定
   1. Application Type
      • 選 Web
   2. Sandbox Mode
      • 選 Disable
7. 設定完成後, 於 "Facebook App 列表管理頁", 找到 API Key, Application Secret, Application ID 的值, 存下來備用.
8. 並於最下方找到 Sample Code, 就可以馬上測試 Facebook Connect(Login) 囉~

Facebook App 開發環境建立(取自 Sample Code)

1. wget 'http://svn.facebook.com/svnroot/platform/clients/packages/facebook-platform.tar.gz'
2. tar -xzvf facebook-platform.tar.gz
3. cp facebook-platform/php/facebook*.php MY_PROJECT_DIR
4. cd MY_PROJECT_DIR
5. vim index.php
   <?php
   // Copyright 2007 Facebook Corp.  All Rights Reserved.
   //
   // Application: xxx
   // File: 'index.php'
   //   This is a sample skeleton for your application.
   //

   require_once 'facebook.php';

   $appapikey = 'fc3df84ad2e57f37edf6773442edae7f';
   $appsecret = '6ed945c67c3e06a05d5de53fc23da981';
   $facebook = new Facebook($appapikey, $appsecret);
   $user_id = $facebook->require_login();

   // Greet the currently logged-in user!
   echo "<p>Hello, <fb:name uid=\"$user_id\" useyou=\"false\" />!</p>";

   // Print out at most 25 of the logged-in user's friends,
   // using the friends.get API method
   echo "<p>Friends:";
   $friends = $facebook->api_client->friends_get();
   $friends = array_slice($friends, 0, 25);
   foreach ($friends as $friend) {
         echo "<br>$friend";
   }
   echo "</p>";
   ?>

6. 測試看看此頁是否有導去 Facebook 登入, 然後看到自己的帳號 等等相關資訊, 這樣子就設定完成囉~ 🙂

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活. 檢視「Tsung」的全部文章