目前分類:FaceBook (5)

瀏覽方式: 標題列表 簡短摘要

原文網址:http://changyy.pixnet.net/blog/post/25137032-facebook-api-example---%E7%AC%AC%E4%B8%80%E6%AC%A1%E4%BD%BF%E7%94%A8%E3%80%81%E7%AF%84%E4%BE%8B%E5%92%8C%E6%95%99%E5%AD%B8%E7%AD%86

以下轉載原文

------------------------------------------------------------------------------------------------

沒想到要寫寫 Facebook API 啦!我原先以為是 Facebook 會提供一個工作站讓使用者上傳程式碼去運行,結果做這件事的還得自行找一台機器啦,但這樣也比較合情合理,畢竟電腦運算就是要耗 CPU 資源,就是要耗電。

之所以要紀錄這些,目的是給自己一個筆記,雖然官方的教學已經夠清楚,但沒有中文就是不友善啦。

  1. 首先,必須要有一個 Facebook 的帳號,在此就不多講,接著登入後,連結至 Facebook | 開發人員 ,並且點選 [Set Up New Application]
  2. 輸入應用程式的名稱,例如:Example,並且觀看條款後勾選同意。
  3. 系統會為你的應用程式產生獨一無二的資訊,如 Key 等,接著回到[我的應用程式]頁面,並且看到剛剛新增的"Example"資訊,最下方有個項目是[Sample Code],即可點選"example code"可觀看範例程式和簡單安裝的過程
    教學,此範例程式已經是可以運行的程式碼,並且已將應用程式的資訊(Key)也填寫上去了。
  4. 找一台可以用的工作站,必須支援 PHP 程式語言跟 Web Service
  5. 在Web Service 的自己目錄下(Ex:/home/ID/WWW,/home/ID/
    public_html),新增 facebook 相關程式
  6. 新增 index.php 並且加入資訊
    • <?php
      // Copyright 2007 Facebook Corp.  All Rights Reserved. 
      // 
      // Application: Example
      // File: 'index.php' 
      //   This is a sample skeleton for your application. 
      // 

      require_once 'facebook.php';

      $appapikey = 'your_appapikey';
      $appsecret = 'your_appsecret';
      $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>";
      ?>
    • 此為官方範例,結果是印出使用者 25 位朋友
  7. 最後的設定
    • 連至 Facebook | 開發人員 並且點選應用程式名稱為 "Example" 的 "編輯設定"
    • 切換至[畫布]頁面,並且至少設定以下資訊
      • 畫布頁面網址
        • http://apps.facebook.com/your_app_name/
        • 這是 Facebook 使用者連到你的應用程式的 link 位置
      • Canvas Callback URL
        • http://Your_Web_Service/facebook_example/
        • 這是你擺放運行程式碼的機器,至少提供 Web Service 跟運行 PHP 的能力
  8. 測試連結,請先登入 Facebook,接著連到 http://apps.facebook.com/your_app_name/ 位置,接著像使用其他程式服務一般,蹦出同意訊息,點選過後,就會呈現出運行結果,此例是列出使用者的名字,並且列出 25 位朋友的 ID

如此一來,就完成使用 Facebook API Example 啦,這支算是簡單的程式,剩下的就是如何善用 Facebook 的社群資訊和力量囉。

yoonow 發表在 痞客邦 留言(1) 人氣()

原文網址:http://clonn.blogspot.tw/2011/01/facebook-api-php-sdk.html

以下轉載原文

---------------------------------------------------------------------------------------------

[教學] Facebook API PHP SDK 基本篇. Facebook API PHP SDK Basic introduce.

 
快速教學如何使用php建構自己的APP

Facebook 中建立application 取得Keys
Facebook developer application page.
 

進入頁面後如下圖所表示,根據提示快速建立Application.
 
 
建立好app,可以進入到內部將Domain name, email, ...等資料補齊。
 
TIP:Domain name一定要設定好,不然會導致無法使用。







下載Facebook API for php,把資料解壓縮開來,我們只需要兩個檔案。

1. facebook.php
2. example.php

將兩個檔案放到同個資料夾當中,修改example.php

$facebook = new Facebook(array( 'appId' => '你的APP ID', 'secret' => '你的應用程式密鑰', 'cookie' => true, )); 

接著檔案上傳到Server上,執行你的APP。

以下為簡化後的example.php內容。

<?php require 'facebook.php'; // Create our Application instance (replace this with your appId and secret). $facebook = new Facebook(array( 'appId' => 'appid', 'secret' => 'secret key', 'cookie' => true, )); $session = $facebook->getSession(); $me = null; // Session based API call. if ($session) { try { $uid = $facebook->getUser(); $me = $facebook->api('/me'); } catch (FacebookApiException $e) { error_log($e); } } if ($me) { $logoutUrl = $facebook->getLogoutUrl(); } else { $loginUrl = $facebook->getLoginUrl(); } ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Clonn.info - Facebook API demo PHP SDK</title> <style> body { font-family: 'Lucida Grande', Verdana, Arial, sans-serif; } h1 a { text-decoration: none; color: #3b5998; } h1 a:hover { text-decoration: underline; } </style> </head> <body> <h1>Pure PHP SDK, without javascript</h1> <div> <ul> <li><a href="<?php echo $facebook->getLogoutUrl(); ?>">LogOUT</a></li> <li><a href="<?php echo $facebook->getLoginUrl(); ?>">LogIN</a></li> </ul> </div> <h3>Session</h3> <?php if ($me): ?> <pre><?php print_r($session); ?></pre> <h3>You</h3> <img src="https://graph.facebook.com/<?php echo $uid; ?>/picture"> <?php echo $me['name']; ?> <h3>Your User Object</h3> <pre><?php print_r($me); ?></pre> <?php else: ?> <strong><em>You are not Connected.</em></strong> <?php endif ?> </body> </html> 


直接想要看結果,可以點此連到範例頁面頁面內容如下。



yoonow 發表在 痞客邦 留言(1) 人氣()

原文網址:http://coding.anyun.idv.tw/2012/03/07/using-facebook-javascript-sdk-get-uid-or-accesstoken/

以下轉載原文

----------------------------------------------------------------------------------

前言

之前曾寫過【如何使用 Facebook C# SDK 發佈訊息到塗鴉牆】,其中有提到使用 Facebook JavaScript SDK 來取得 AccessToken 的方式,但是由於 Facebook 正式啟用 oAuth 2.0,因此有修改了一些東西,所以可能會有無法使用的一天,因此特別寫一篇新的教學,這次直接使用 Facebook JavaScript SDK 來取得 AccessToken,因此可以套用到任何程式語言的網頁,此外也順便提供取得使用者 UID 的語法,就可以方便實作出使用 Facebook 登入網站的系統囉!

實作

第一步是申請開發者帳號和申請 AppId,這邊就不多說了,可以參考我之前的文章

接下來一樣先掛載 Facebook JavaScript SDK 的 js 檔案。

1

再來準備我們的 HTML

1
2
3
4
5
6
7
8
9
10
<div id="fb-root">
</div>
<p>
    <input id="FBLogin" type="button" value="登入臉書" />
</p>
<p>
    <span id="uid"></span>
    <br>
    <span id="accessToken"></span>
</p>

第一個 div 是 facebook 規定一定要有的, id 是 fb-root,否則的話就會出現 JavaScript 錯誤。

然後準備一個按鈕和之後要顯示 UID 和 AccessToken 的元素。

接下來先初始化 Facebook javaScript,而裡面的 {app_id} 就是第一步驟所申請的 AppID。

1
2
3
4
5
6
FB.init({ appId: '{app_id}',
    status: true,
    cookie: true,
    xfbml: true,
    oauth: true
});

首先是出現登入 Facebook 取得授權的頁面,這邊我設定是可以取得 EMail 的權限。

1
2
3
4
5
$("#FBLogin").click(function () {
    FB.login(function (response) {
        // 登入之後執行的語法
    }, { scope: "email" });
});

接下來就是取得 UID 和 AccessToken ,這邊我使用 FB.getLoginStatus 這一個方法,因為它所回傳的資料包含了我們所需要的 UID 和 AccessToken

1
2
3
4
5
6
7
8
9
10
11
12
FB.getLoginStatus(function (response) {
    if (response.status === 'connected') {  // 程式有連結到 Facebook 帳號
        var uid = response.authResponse.userID; // 取得 UID
        var accessToken = response.authResponse.accessToken; // 取得 accessToken
        $("#uid").html("UID:" + uid);
        $("#accessToken").html("accessToken:" + accessToken);
    } else if (response.status === 'not_authorized') {  // 帳號沒有連結到 Facebook 程式
        alert("請允許授權!");
    } else {    // 帳號沒有登入
        // 在本例子中,此段永遠不會進入...XD
    }
});

本函數所回傳的資料,其中 status 是代表登入的狀態,總共包含三種:

  • connected
    代表目前為登入狀態,而且有允許授權得此應用程式
  • not_authorized
    代表目前為登入狀態,但是沒有允許授權得此應用程式
  • unknown
    代表使用者沒有登入,無法得知是否有授權

執行之後就可以取得我們要的資料囉!

線上範例網站

結論

我們取得 UID 和 AccessToken 可以幹嘛呢?

如果是 UID 的話,因為每一個 Facebook 帳號都只會對應到一個專屬的 UID,因此我們取得之後就可以把它記錄在資料庫,當做我們系統使用者帳號的主鍵,這樣下一次登入之後取得 UID 一比對就可以知道是哪位使用者了,就可以讓使用者以 Facebook 帳號當做登入的帳號囉!

而 AccessToken 的話就可以透過此 Token 來呼叫 Facebook 的 API ,比如說發佈訊息等等。再配合【如何使用 Facebook C# SDK 發佈訊息到塗鴉牆】所提過的 offline_access 權限,可以把它存在資料庫,之後系統就有很多發揮的空間囉!

參考資料

FB.getAuthResponse

FB.getLoginStatus

Updated JavaScript SDK and OAuth 2.0 Roadmap

yoonow 發表在 痞客邦 留言(0) 人氣()

原文網址:http://blog.yam.com/tagtoo/article/30242304

以下原文轉載

------------------------------------------------------------------------------------------------------------

最近試著把Tagtoo的服務中  利用到facebook api的部分改成新版的api
 由於當初第一次寫的時候有step by step的tutorial  而那篇tutorial裡面講到的功能  差不多就是我要的
 所以不費太多心思就把它完成了  現在新版api似乎還找不到那麼詳細的教學
 便花了一些時間摸索  這裡是一些心得  備忘之餘  若能幫其他開發者省一點時間
 也是功德一件摟~

Note: 我用的純粹是 javascript SDK

 先來講一個很容易發生的錯誤

1 var uid;
2 var email;
3 var name;
4 alert("outside: " + email); 
5 FB.api('/me', function(response) {
6     uid = response.uid;
7     email = response.email;
8     name = response.name;
9     alert("inside: " + email);
10 });
11 alert("outside: " + email);

以上的code做的事很簡單-- 取得用facebook connect登入你網站的網友之email
我們將會以facebook api進行查詢(第5~10行) 然後用變數"email"來存這個查詢到的值
注意第4 9 和 11行都是單純的alert指令 目的只是方便觀察變數email的值
不算是實質內容的一部分

實際執行上述程式碼 會發現一個很奇怪的現象
總共出現三次對話視窗  內容分別是 
1st: outside: undefined(第4行的執行結果)
2nd: outside: undefinde(第11行的執行結果)
3rd: zouber@gmail.com(第9行的執行結果)
若是沒經驗的話  一定會覺得很奇怪 
我明明在第7行已經賦與email值了 怎麼還是undefined?

仔細一想 合理的解釋 應該是第11行優先於第7行執行了
按理說程式運行原則上是由上至下逐行執行才對 怎麼會這樣?

可以先動動腦...



動動腦時間










問題出在第5行  當我們用facebook api查詢網友資料時
其實就隱含了ajax的意涵在裏頭  我們實際上是對facebook的server發了一個ajax request
也因為如此  所以這類的facebook api都少不了指定一個callback function
亦即當這個請求完成時  原頁面必須要有對應的後續處理
所以  看起來輕輕鬆鬆的一行程式碼  其實已經隱含了複雜的ajax request發出程序在裏頭

相信對ajax稍有概念的人就知道  ajax其實就是為了達成媲美桌面應用程式的反應性產生的技術
達成的方式是當使用者發出此類的請求後  用非同步的方式去處理它
簡單來說就是發出請求後  原網頁繼續運行  完全不會有任何停滯
同時請求傳到伺服器   同步處理  直到處理完畢  用戶端收到通知
啟動callback function 處理伺服器回傳的資料(也可能沒有任何回傳資料)

一個有點類似的概念是飛彈的"射後不理"
戰機射出飛彈後  完全不必理它  此時戰機和飛彈各做各的事
像兩個不相干的個體  一段時間後戰機會收到通知以了解飛彈的去向
最終戰機會收到通知  便可知道飛彈到底是擊中目標還是失誤

所以本來是一直線的程式執行流程
到了第5行以後分岔成兩支
一支是程式原本的流程A
另一支是新啟動的  對facebook資料庫進行查詢的流程B兩個流程同步進行  流程B進行完畢後  才會執行第6~9行
而流程A直接就執行接下來的第11行 
所以  第7行和第11行之間變成沒有絕對的順序關係
而以現階段的網路速度來說  有非常大的機率是第11行比第7行(必須等遠端請求完成)還要先被執行
也就是我們所看到的實驗結果

這個bug道理其實不難  只是簡短一兩行facebook api就能進行ajax機制時
我們必須時時注意  別被下意識的直覺騙了
debug很累的...

Note: 若對本範例涉及的api有興趣  請見此頁 和 此頁
要取得網友的email 必須在他登入facebook connect 時請求權限
FBML語法: "<fb:login-button  perms='email, publish_stream'></fb:login-button>"
其中perms屬性即列舉所有想請求的權限  就本例而言
我請求了取得網友email以及發布訊息到他塗鴉牆(publish_stream)的權限

zouber

yoonow 發表在 痞客邦 留言(0) 人氣()

很多FB的API應用文章

http://blog.yam.com/BlogIndex.php?BLOG_ID=tagtoo&CATEGORY_ID=3250790

 

yoonow 發表在 痞客邦 留言(0) 人氣()