Facebook應用程式開發

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

• 首頁  >
•  技巧應用 >
•  網站架設 >
•  [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]如何建立應用程式、取得API密鑰？

 

很多人都使用過Facebook上面的應用程式，那不知道是否有興趣來自己開發看看呢？就像噗浪一樣，Facebook也有提供API給開發程式者 使用，你只要會運用API來存取Facebook資料，就可以輕鬆弄出很多好玩的應用程式。至於該如何開發呢？基本上只要有一些程式的基礎就夠了，因為重 點是官方API，會不會運用？
Facebook官方提供了多種存取的方式，像是FBML、FBJS、FQL、Facebook API等等，就看大家喜歡透過那些方式去存取，或是綜合使用也是可以的。不過重點來了，首先你必須先加入Facebook的開發人員才可以有權限建立應用 程式喔！因為在這邊需要獲得API、密鑰等等，這樣才能有權限去存取資源。


儘管目前Facebook的熱潮有點過了，但其社群龍頭地位依然不變。還是有很多看好這塊市場大餅，透過在Facebook上面開發一些應用程式來集氣，「人潮就是錢潮」這個定理就是這樣得證的。想要開發應用程式，重點就是要先加入開發人員，不過官方似乎把連結藏得亂七八糟，真的是…(攤手)。

• 應用程式名稱：開發人員
• 應用程式專頁：按這裡
• 應用程式網址：http://www.facebook.com/developers/

第1步 請先按這裡來到開發人員的專頁，點擊左上方的﹝前往應用程式﹞。

第2步 接著，開發人員這個應用程式會需要您授權給它，讓它可以存取你的基本資料。

第3步 授權後，進到開發人員頁面，點擊右上角的﹝建立新的應用程式﹞吧！

第4步 接著請替應用程式取個名稱吧！中英文皆可以輸入，點擊﹝建立應用程式﹞。

第5步 避免有人濫註冊，所以需要輸入驗證碼驗證一下，輸入完成後點﹝確認﹞。

第6步 在這個頁面中，你可以看到你自己所有的應用程式，在這可以找到應用程式專用的API、程式ID、密鑰等等，可以點擊「編輯設定」進入程式的描述設定、程式設定等等。

第7步 進入後，可以對程式設定一些基本的資料，像是應用程式的名稱、簡介、或是對應用程式上傳一個專屬的圖示，另外還有這個應用程式的聯絡方式等等，就請大家自由設定囉！

第7步 事實上重點的設定在左邊的【Facebook整合】，這邊你必須設定應用程式頁面的網址、你的程式位置，嵌入程式的方式等等，設定錯了，就無法讓應用程式順利顯示在Facebook應用程式頁面中囉！

• Canvas Page：應用程式的連結(Facebook的應用程式連結)
• Canvas URL：你的程式所放置的主機之目錄(不可以包含檔案名稱)
• Canvas Type：程式的嵌入方式，可以選擇Iframe(框架)或是FBML
• Iframe大小：可以選擇有出現Scrollbars或是自動調整成符合頁面大小
• 書籤網址：若有人將應用程式列到專頁，那頁籤連結過去的即是這邊指定的頁面

補充一下，如果你要建立第二個(以上)的應用程式，可以在這個頁面點擊右上角的﹝建立新的應用程式﹞，或是直接進入應用程式建立頁面來進行新增，不過這時Facebook會要求你進行身分的驗證，有信用卡驗證或是手機驗證。香腸我是使用手機進行認證，你只要按照他的指示輸入手機號碼，這時你就會即刻收到驗證碼，輸入到Facebook就會開通了，以後就可以自由的新增應用程式囉！

 

感謝香腸炒魷魚提供資料