Coding 之路,不由分說 .Net,MVC,jQuery

5四月/1119

如何使用 Facebook C# SDK 發佈訊息到塗鴉牆

Google PageRank查詢

前言

前陣子因為工作需要在發佈訊息的時候可以將訊息同步到 Facebook 上,一開始找到的是微軟官方所開發的 Facebook Development Kit ,但是在去年開始就不再更新了,而官方則另外推薦使用 Facebook C# SDK 來做 Facebook 應用程式的開發,而本 SDK 更新的也很勤勞,所以我便採用的這一個來開發。

申請 Facebook 程式 ID

不管要開發哪一類型的 Facebook 應用程式都得先申請一個應用程式 ID 和金鑰才有辦法使用 Facebook API,所以本文先介紹如何申請和查看應用程式 ID。

第一步先到此網址建立一個應用程式。

建立應用程式

再來就輸入討厭的驗證碼吧!

驗證碼

接下來就是應用程式的設定了,因為我範例試用網站的形式,所以得到 Web Site 這一個選項設定網站的網址,注意一定要是到時候連結到 Facebook 的網址,否則會無法正常出現請求授權的頁面。比如說在測試的時候通常會是: http://localhost:port ,就自行輸入您測試時候產生的網址囉!別忘記未來上線時候要改成正式用的網址喔!

設定網址

按下儲存之後就會導到應用程式的資訊頁面,在這邊就可以找到我們之後要用到的應用程式 ID 和密鑰了。

應用程式詳細資訊

實作

首先要加入 SDK 的參考,有兩種方式:一個是從官方下載 DLL 檔案然後加入參考,其中 Facebook.dll 為必要檔案,一定要加入參考,若是要寫 Web 則要再加入 Facebook.Web.dll,如果是 ASP.Net MVC 類型專案還要再加上 Facebook.Web.Mvc.dll,此外因為 Facebook C# SDK 還有用到 Newtonsoft.Json,在之前版本下載到的檔案有附進去,但是後來就都沒有,所以得自行到 Newtonsoft.Json 專案網頁下載了,或是利用 NuGet 方式來新增,用此方式就會根據專案來新增需要的檔案就不會少參考檔案了。

首先在參考的地方選擇 Add Library Package Reference...

加入參考

接下來選擇 Online ,搜尋 Facebook 就可以找到很多套件,其中 Facebook、FacebookWeb、FacebookWebMVC 這三個套件就是這一次介紹的 SDK ,請依據您的專案來選擇需要的套件囉!因為我是 ASP.Net MVC 專案,所以就選擇 FacebookWebMVC 安裝。

選擇套件

加入完之後就是要來修改 Web.config 將之前申請的應用程式 ID 和密鑰設定好。

configSections 中加上:

然後 configuration 內加上:

到此為止前置作業就算完成了,接下來就是程式撰寫的部份了。

因為 Facebook 權限限制的關係,所以我們要讓使用者先授權我們的應用程式有可以發佈訊息的權限,所以我們設計一個按鈕會跳出很常見的授權畫面,上面會說明您的應用程式會要求怎樣的權限,希望使用者可以授權。

因為打算直接呼叫 Facebook 的 API 來使用,所以在頁面先加上 script 的引用:

其中 zh_TW 是語系的部份,如果想顯示英文畫面可以改用 en_US 之後的畫面就會是英文囉!此外之後也會用到 jQuery ,這部份就自行引用 jQuery 的 js檔案囉!

因為要使用到 Facebook 官方的 JavaScript API 所以得先做初始化的設定,語法如下:

其中 Facebook.FacebookApplication.Current.AppId 會從設定檔中取得我們設定好的應用程式 ID。此外根據官方文件說明還得加上 ID 名為 fb-root 的 div ,沒加上去的話可能會導致 JavaScript 錯誤。

接下來放上要做登入和請求授權動作的按鈕。

並且加入 click 的事件:

我設計成登入完之後會轉到 PublicStream 這一個頁面。另外 perms 這一個參數便是要求取得的授權,因為我們要發佈訊息到塗鴉牆,所以需要 publish_stream 這一個授權。至於還有其他授權可以參考這一份官方文件說明,要取得多個授權可以用半型逗號(,)作為分隔。

執行程式之後並且按下按鈕就會出現要求登入的畫面,如果使用者已登入則會導到請求授權的畫面,但是如果曾經授權過應用程式的話,就會直接進行登入授權完成後的動作了。如果要取消授權,可以到帳號的隱私設定,有一項是應用程式授權,到裡面將授權給刪除即可。

登入畫面

請求授權

最後就是發佈訊息的頁面了,我設計了 Action 來處理發佈訊息的頁面。

從上面可以發現我加上了一個 FacebookAuthorize 的 ActionFilter,這是 Facebook C# SDK 提供的,可以設定這一個 Action 需要登入 Facebook 並取得 publish_stream 的授權,否則就會轉到登入的頁面,也就是首頁。

至於 View 的部份就很簡單的設計一個發佈訊息的表單和按鈕,並且可以顯示之後發佈完成的訊息。

最後就是處理發佈訊息的 Action 了:

首先建立 FacebookWebClient 物件,在呼叫 post 的方法即可。其中傳的兩個參數第一個則是 Facebook Graph Api 中發佈訊息的 API,第二個則是訊息內容,而訊息內容又包含許多子項目,發佈後的訊息便會呈現如下圖所示,大家可以根據程式需要填入需要的參數。

發佈的訊息

另外在這邊用到了 dynamic 物件當做參數,而在 .Net framework 3.5 並不支援 ExpandoObject 物件,因此可以改用 Dictionary 來處理:

如此就可以完成發佈訊息到 Facebook 的功能了。

特別加贈

此外額外介紹一個授權:offline_access,這一個授權可以讓我們設計的應用程式可以在使用者在離線的時候也可以進行其他有授權的動作,比如像是 Plurk 在同步訊息的時候就有用到此授權,就算使用者在沒有登入的時候還是可以同步訊息到 Facebook,沒有此授權的話得在使用者有登入的狀態下才有辦法發佈訊息到塗鴉牆了。

而此授權的運作方式是要靠一組使用者的 AccessToken,我們可以在第一次授權的時候取得這一組訊息並且記錄到系統資料庫,未來需要發佈訊息到使用者塗鴉牆的時候就可以使用這一組 AccessToken 來發佈訊息了。只需要在前述建立 FacebookWebClient 的時候加上 AccessToken 參數就可以了。

在這邊也提供兩種方式來取得 AccessToken,一個是利用 Facebook 的 JavaScript SDK,另一個則是使用 Facebook C# SDK。

Facebook JavaScript SDK

本段 Facebook javaScript SDK 語法已無法使用,請參閱文章【使用 Facebook JavaScript SDK 來取得使用者 UID 或 AccessToken】(2012/03/07 新增)

Facebook C# SDK

後記

Facebook 可以說是現在許多人都會使用的社群服務,因此也有越來越多的網站都會結合 Facebook 的功能,其中發佈訊息到 Facebook 可以算是最基本也最常用的 Facebook 應用程式功能了,想要完成更多的功能可以參考 Facebook Graph Api,再配合 Facebook C# SDK 就可以完成許多的功能,比如說取得使用者名稱供程式使用等等,這部份就讓大家去發掘囉!

範例下載下載

參考資料

Facebook Developer Document

Facebook C# SDK

Getting Started With Facebook C# SDK

Facebook Graph Api

回覆 (19) 引用 (0)
  1. 您好!!我想請問!!有不用MVC的撰寫CODE嗎?

    黯雲回應:
    在官方的原始碼檔案裡面都有簡單的範例,就有一般 WebSite 專案的。

  2. 你好我想請問,你知道如何用c#做一個像http://apps.facebook.com/sexyguess/,這樣的應用程式,是直接在fb網站裡面,而不是獨立的應用程式!

    黯雲回應:
    再官方的原始碼範例中網站類型專案後面有 FacebookApp 的就是會在 fb 網站裡面的應用程式,您可以參考看看喔!

  3. 不好意思~我可以請問一下嗎??
    那如果我們是用PHP的語言來寫授權的話,要怎麼寫阿???

    黯雲回應:
    PHP 部分可以直接使用 FB 提供的 JavaScript 的 sdk~
    https://developers.facebook.com/docs/reference/javascript/FB.login/
    這一篇可以參考看看~

  4. 你好請問一下問題

    在這段程式碼[FacebookAuthorize(LoginUrl = "/", Permissions = "publish_stream")]
    都會出現 [抱歉,處理您的要求時發生錯誤。] 這段錯誤

    黯雲回應:
    請問您的 APIKey 正確嗎?還有sdk版本是哪一版的?

  5. 您好!

    想請問~ 單純的 ASP.NET + C# 的WEB網頁要如何做到與 FB 做 connect 並可以讓我至抓使用者的資料可以寫道我的資料庫呢?

    已經爬了一星期的文了~ GOOGLE上的幾乎都是 MVC

    我有參考這個說明
    http://facebooksdk.codeplex.com/wikipage?title=Code%20Examples&referringTitle=Documentation

    但在 config 與 aspx 等地設定不知道該如何做才OK!

    不曉得大大是否能教學一下呢? ><!

    黯雲回應:
    這個的話,等我有空我可以另外寫一個 ASP.Net 的範例看看。

  6. 你好
    能夠請問一下你是用什麼軟體去寫的呢?
    請問是使用哪種ASP編譯程式阿?
    我很想寫出FB這個應用 但是卡在怎麼下手...

    黯雲回應:
    你找本入門書來看吧...

  7. 大大您好!! 我程式寫出來了 不過他按下登入以後
    彈出的視窗會說"發生錯誤,請稍後再試。"
    並不會彈出驗證式窗耶 請問是我哪裡的設定出了問題嗎?

    黯雲回應:
    看後面你應該成功了...

  8. 您好 我現在已經會彈出驗證視窗了,也可以按下同意了。
    但是我現在卡在按下同意後,PublicStream 的Action沒有動作
    而我如果把PublicStream內的按鈕跟方塊 也放到Index中
    他好像無法發送訊息耶...請問我該怎麼解決這問題呢?
    請老師幫忙解答了..

    黯雲回應:
    我不是老師...你可以試看看把我的範例不修改就執行成功嗎?

  9. 老師您好 現在FACEBOOK 他 取得認證的方法似乎有變動
    response.session 跟 perms 好像已經取得不到用戶許可了
    請問要去哪裡查新的呢?

    黯雲回應:
    我不懂你說的問題是什麼,可以在描述清楚點嗎?

  10. 你好黯雲老大,我想請問您有沒有facebook機器人
    可以設定他在發生什麼事件後自動發佈訊息在個人塗鴉牆上,
    或是自己發訊息給自己或其他人?
    有請指點 小弟發自內心萬分感謝

    黯雲回應:
    我沒有機器人喔 ^^

  11. 您好,我想要問一下,如果我有一隻依據您這樣發展的程式,但是我的目的變成是在某一時間點,要通知所有加入程式的 FB 使用者,等於是在他們的版上面都貼上某一則訊息,那麼要怎樣改程式會比較好呢?是否可以給個方向。

    黯雲回應:
    要在時間的去執行的話建議用 Console 、視窗程式或是 Service 之類的來處理,用網頁的話要做到定時去執行會比較麻煩喔。

  12. 我想請問一下黯雲版主

    我依照版主的範例檔去執行
    確實可以執行

    但是

    再登入進去後授權後

    就有個視窗閃一下就消失了
    似乎PublicStream.aspx的部分有問題耶

    懇請版主為我解答
    感恩不盡

    黯雲回應:
    我之前有遇到過用測試的網址 localhost:xxxx 這樣的會在 IE 出現點問題,換瀏覽器就會正常,不知道你的是不是這樣的問題。還有範例檔案可能有點小問題,前陣子 Facebook 又改了方法,晚點我在修改範例看看是不是整個都會正常。

  13. 我使用IE會無法跑出授權和登入頁面
    我用Google瀏覽器可以正常的授權和登入,但是登入後就跑不出PublicStream.aspx這個頁面了...

    目前卡在這很納悶
    不知道為什麼...已經找了快一個禮拜的問題了

    等待版主解答
    感謝你

    黯雲回應:
    原本範例裡面 JavaScript 部分我已經修正,至於你的問題是因為 Facebook 有改版,導致範例裡面的 SDK 會驗證失效,從 NuGet 安裝新版 SDK 就好了,我也把檔案更新了,你可以重新下載範例應該就正常了。

  14. 咦?
    新的範例這下反而不能登入了
    這...?

    對了
    還有新版的SDK
    是Facebook
    FacebookWeb
    FacebookWebMVC
    對吧!!

    我更新後反而跑出了奇怪的錯誤
    說我的Index.aspx & Error.aspx & Site.Master

    ASP.NET 執行階段錯誤: 區段在每個組態檔中只能出現一次。請參閱說明主題 以瞭解例外的情況。
    就是他們三個的程式第一行有錯誤

    黯雲回應:
    範例要先修改 WEB.config 填入你的 APPID 和密鑰喔,如果從 NuGet 新增他也會在 WEB.Config 新增,變成和原本 web.Config 的會重複到。

  15. 版主版主!!
    不好意思一直麻煩你了

    目前我加上ID和密鑰了!!!
    但是卻會出現此錯誤

    http://imageshack.us/f/192/43816417.jpg/

    網路上我大概搜尋他上面顯示的錯誤...
    實在是看不懂
    也不知道哪裡錯誤...

    一樣可以授權和登入
    但是登入結束後就跑出此頁面了
    然後我也檢查過Index.aspx頁面的授權問題
    也大致上沒有問題

    就是不知為什麼不行
    謝謝你!!!

    黯雲回應:
    你申請金鑰的時候設定網址是圖片中的網址嗎?

  16. 是的~
    但是我的帳號他一直要求申請電話號碼
    說什麼簡訊服務要加收電話費
    之後用另外一個方式輸入電話號碼後FB沒有寄驗證碼給我
    所以申辦不成

    以上我不知道為什麼?

    所以我跟之前有做過類似的人借了他的金鑰

    難道這樣不行嗎?

    麻煩你了!!謝謝!!!

    黯雲回應:
    這樣的話,他應該網址設定有很大不會是你測試時候的網址的。收簡訊時候電話號碼要打+886然後手機不要輸入前面的 0 從第二碼 9 開始輸入。

  17. 版主
    這下申辦成功了
    使用自己辦的id和金鑰了
    http://imageshack.us/photo/my-images/638/123yh.jpg/

    但這下卻無法授權和登入了
    http://imageshack.us/photo/my-images/833/456ww.jpg/
    按下按鈕後都會直接出現這個...不是要求授權和登入了

    謝謝解答了版主!

    黯雲回應:
    我看兩個網址並不一樣阿,連 Port 都要一樣喔,在確認一下吧!

  18. 版主!!!
    可以正確的執行了
    謝謝您版主

    辛苦你了!!!

    黯雲回應:
    有幫忙到你就好囉 ^^

  19. 版主你好
    我目前有做一個C#的介面 然後裡面有連接資料庫
    我想讓我產生資料庫的內容
    試著連接上FB塗鴉牆
    請問做法也是向你上述的那樣嗎?
    目前FB應用程式的部分已經改版 跟上面都不太相同
    想詢問版主怎麼做...
    另外 要加入SDK做參考 是要把檔案放在何處?

    黯雲回應:
    文章的程式應該都還可以用,不過新版的 Facebook c# SDK 真的改蠻多的,可能得在重新花時間寫一篇了...
    http://facebooksdk.codeplex.com/documentation?version=94
    不過你可以參考這邊官方文件的說明。


Leave a comment

目前沒有人引用這篇文章。