[Facebook]利用Iframe和PHP SDK實作應用程式

Facebook的應用程式開發支援多種程式語言，像是PHP、Java、ASP.NET、JSP等都可以，但其中以PHP的支援程度比較好，而且網路上可以找到的資料也比較多，門檻應該也屬於比較低的。以PHP開發來說，想要將開發好的應用程式嵌入到Facebook應用程式之中，目前提供兩種模式，一種是Iframe框架模式，另一種是FBML。

雖然FBML(Facebook Markup Language)對於Facebook的應用程式比較好開發，不過官方建議新使用者要開發應用程式的話，希望新手盡量改用Iframe來開發。在個人的應用程式介面中的範例程式碼，官方也是使用PHP SDK來實作，所以本篇我們將針對官方的應用程式，來做一個實際演練的測試。

目前關於FBML停用的爭議，在這篇文章中有解了，FBML語言會繼續支援，只是希望未來開發盡量改用IFrame並搭配JavaScript SDK and social plugins去處理，不過大家也別擔心太多，因為Facebook的應用程式常常在改來改去，今天看到的明天可能就不一樣了。所以就讓我們直接透過Ifame配上PHP SDK來測試一下吧！

尚未加入開發人員，請先加入：按這裡

第1步 首先請來到你的應用程式管理頁面，先選擇你的應用程式後，然後找到該頁面下方的「範例程式」區域，會有個「程式碼範例」，點一下吧！補充一下，在這區域會看到下方還有一些開發文件可以參考，有興趣可以點進去看看。

第2步 點開後，會跳出一個框框，裡面會有建置程式的說明，你可以照著說明內容實作，或是跟著本文的步驟走。首先請先下載PHP Library。

第3步 下載後請用壓縮軟體打開，將裡面的「examples」和「src」兩個資料夾取出。取出後請將「examples」資料夾內的「example.php」檔案名稱改成「index.php」。

第4步 接著將剛剛改名好的「index.php」利用筆記本將檔案開啟，修改一下裡面的資料，將其中的「appId」後面的字串改成「應用程式ID」，將「secret」後面的字串改成「應用程式密鑰」，然後儲存檔案。

【註】

應用程式ID和應用程式金鑰，可在這邊找到，仍不清楚，可以參考這篇文章。

第5步 將剛剛解壓縮取出的檔案上傳到您的主機空間，這邊就不對主機空間多做說明，如果還不知道主機空間是什麼？可能您要先Goolge一下這些基本的資料囉！

第6步 將檔案上傳好後，來到你的應用程式管理頁面，找到你的應用程式並進入編輯畫面，切換到【網站】部分，請修改「Site URL」欄位，改成您程式的主目錄(也就是前面修改的index.php檔案之所在目錄)。

假設index.php的檔案是在：/public_html/myapp/examples/index.php

那Site URL的路徑請填：http://你的網站網址/myapp/examples/

第7步 切換到【Facebook整合】頁面，這邊的「Canvas URL」也請修改成和剛剛一樣的路徑即可，修改完畢後請點﹝儲存﹞。

【註】

別忘記，在Canvas Type要記得選成「Iframe」，否則會失敗喔！

下方的Iframe大小，建議勾選「Auto-resize」(自動調整大小)。

第8步 來到您的Facebook應用程式頁面，你會發現看到的是以下畫面，若有看到就表示您成功囉！

【註】應用程式在哪邊？

可以在這邊，找到你的應用程式，並點擊「應用程式專案頁」，進入後畫面左邊應該有個﹝前往應用程式﹞，進入後就是了。

通常網址會是：http://apps.facebook.com/myapp/ (myapp請改成你先前訂定的名稱)

第9步 您可以任意點擊其中的按鈕，第一次使用會請您授權給這個應用程式，點擊﹝同意﹞即可授權。

第10步 授權後可能會轉到您的程式實際位置(也就是虛擬主機網頁那邊)，不過這只是設定登入後導向的問題，細部導向設定大家可以自己研究看看。您可以再回到剛剛的應用程式頁面，你會發現你的程式就出現在應用程式頁面中囉！

因為是Iframe框入模式，所以會出現捲軸(雖然前面有改成自動調整，不過似乎有預設值在，超過還是會出現捲軸)，不過這些問題別擔心，可以透過JS去解決框架的大小，之後有機會會介紹一下。在這個頁面中的程式就是你剛剛修改的「index.php」這檔案內的東西，語法細節就不多做介紹，研究一下你就可以進一步的開發應用程式囉！

標籤

# Facebook # Facebook API # Facebook 教學 # Iframe # PHP # PHP SDK # 臉書 # 臉書應用程式

香腸

喜歡在網路上透過文字與圖片分文章教學，默默地用鍵盤烤了9年的香腸。另外還身兼阿腸接案餬口飯吃。對了，別叫我阿腸，請叫我香腸，這樣我才知道你看我部落格長大的。

文章: 1781

19 則留言

Daisy Chuang

2012 年 05 月 03 日 / 15:36:21 回覆

請問官方網站讓fb登入會員，這要怎麼做呢？
因為我現在是負責這部份的，真的沒概念。需要找人寫app嗎？還是用 api置入？如果你會的話，請幫幫忙喔～
Mickeyboss Mickey

2011 年 11 月 22 日 / 06:50:46 回覆

fb 很機車勒~之前我寫的app原本運作正常~後來「應用程式」介面改版後~我這幾天去修改了東西~結果整個都掛了…現在一直出現Uncaught CurlException: 6: name lookup timed out thrown in base_facebook.php on line 819不然就是粉絲團讀不到資料…
ferretwind

2011 年 09 月 13 日 / 17:41:51 回覆

您???：
不好???思打擾您，想請教您一個問題，

小弟使用的網路空間不提供cURL的功能???

這樣的話?د不是就沒辦法進行這樣???操作了?

香腸回應：
山不轉路轉，看看有沒有其他讀取資料?ڄ方式囉!
我這部分程式沒有摸得太深入~~@@
- Licson Lee
  
  2013 年 07 月 26 日 / 12:34:00
  
  自己用Facebook Graph API就可以了。很簡單的。 ;)
Vavrin Chen

2011 年 06 月 18 日 / 18:03:15 回覆

您好,我使用appserv 2.6.0 版

在網址列輸入http://localhost/examples/ 有出現facebook要我授權應用程式的畫面

但是在網址列輸入我的 canvas page http://apps.facebook.com/vavrinapp 卻無法顯示
⋯⋯
Canvas URL及Secure Canvas URL都有分別設定為 http://localhost/examples/

和https://localhost/examples/

請問版主有沒有解決的辦法

謝謝 ^^
- 張香腸
  
  2011 年 06 月 19 日 / 06:00:18
  
  使用本機端容易出現怪問題歐~ 請您放到網路上測試開發會是有個非127.0.0.1的IP比較好
- Vavrin Chen
  
  2011 年 06 月 19 日 / 14:44:42
  
  謝謝您的回覆!!現在發現好像是作業系統的問題(win7)
  還在debug中@@
- 張香腸
  
  2011 年 06 月 19 日 / 14:45:36
  
  恩~ 因為我之前也是用本機端測試，常遇到了一些無法預期的問題，畢竟FB是需要溝通網路的應用程式，讓官方可以存取得到你網站比較好 :D
- Vavrin Chen
  
  2011 年 06 月 19 日 / 16:04:59
  
  目前可以出來了~yeah
  感謝熱心的版主^^
- 張香腸
  
  2011 年 06 月 19 日 / 16:05:37
  
  不知道解決方法是？分享一下嚕 :D
- Vavrin Chen
  
  2011 年 06 月 19 日 / 16:20:26
  
  上網google後,我把 appserv2.6 在win7 進入 localhost/phpMyAdmin 會空白的問題解決(消除hosts檔的#)
  
  就突然可以了!不過也有重新裝一次 appserv 就是了~@@
Wayne

2010 年 12 月 28 日 / 18:11:28 回覆

Parse error: syntax error, unexpected ‘{‘ in /home/ieatcom/domains/ieat.com.hk/public_html/test/examples/index.php on line 24

佢話我有呢個情況…但我已經照住步驟做…

香腸回應：
字元錯誤~ 你可能要檢查一下code哪邊有錯喔!
b5a6c1k2

2010 年 12 月 06 日 / 21:01:18 回覆

想請教一下小弟我用Appserv + no-ip弄出來一個網
後來把官方載的函式庫放到appserv/www/compliments/ 這目錄裡 compliments此目錄是自創
接下來有個問題
我把 examples目錄裡的 example.php 改成 index.php 也把裡面id 和金鑰改好了

改好後連前往應用程式
他卻顯示錯誤

Fatal error: Uncaught exception ‘Exception’ with message ‘Facebook needs the CURL PHP extension.’ in C:\AppServ\www\Compliments\src\facebook.php:4Stack trace:#0 C:\AppServ\www\Compliments\examples\index.php(3): require()#1 {main} thrown in C:\AppServ\www\Compliments\src\facebook.php on line 4

香腸回應：
關於這樣的問題其實我也不是很清楚~大致上看上去似乎是你的server少了CURL 的功能!! 往這方面查看看吧! 我想@@
雜

2010 年 12 月 05 日 / 00:39:39 回覆

補充上述我是用byethost的 http://gen3111620.byethost13.com/examples/ 我弄出來就是空白業

香腸回應：
那就是你本身的部分就有錯了~
雜

2010 年 12 月 05 日 / 00:25:04 回覆

您好請問下

我照你的步驟到第八步後案前往應用程式後網頁是顯示白色的沒東西@@

香腸回應：
那可能你設定有錯誤喔!! 你再檢查看看吧!!!
mizuhara

2010 年 12 月 01 日 / 03:04:06 回覆

喔喔
了解
謝謝您的回覆
我朝這個部分研究看看
感恩

香腸回應：
=)
mizuhara

2010 年 11 月 24 日 / 22:26:43 回覆

您好
想請教

照您文中所提到的操作之後
實際執行後產生以下錯誤
是代表說這個主機無法使用嗎?
謝謝

Fatal error: Uncaught CurlException: 1: Protocol https not supported or disabled in libcurl thrown in /home/a6812534/public_html/fb_apps/src/facebook.php on line 622

http://apps.facebook.com/mshw_app/

香腸回應：
應該是你的虛擬主機鎖定了https的連線
ga009900

2010 年 11 月 22 日 / 19:52:16 回覆

哈~ 香腸也開始玩 fb的 apps 啊~
目前在搞flex連接fb的app = =
只是障礙重重啊~

香腸回應：
Flex的教學可能要參考梅干或是程式逗設計
雖然Flex可以很炫~不過我覺得有難度，而且Flex資料不多~不太建議使用
飯飯

2010 年 11 月 21 日 / 18:12:57 回覆

看到了~看到了~

香腸回應：
0.0

發佈留言取消回覆

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。

香腸

相關文章

19 則留言

發佈留言取消回覆