1. 建立第一個自己的 Facebook 小程式
2. 結合原本已有的 Google AdSense 程式碼
本次課程有一些基本的知識需求：
1. 已經（或預備申請）一個 Google AdSense 廣告帳號
2. 已經（或預備申請）一個可以放檔案的獨立網域使用權
3. 略懂一點點 HTML / PHP 程式語法
小梅子自己串過一次，前後大概花不到十分鐘，大家可以參考看看。
首先我們講一下 Facebook 搞小程式的基本邏輯觀念。基本上 FB 是個擺放小程式的「殼」，所有相關顯示的頁面和實際運作的程式碼，甚至是背後的資料庫，都是可以由開發者自行決定擺放的地方，換句話說，只要你有可以擺放檔案的網域使用權，就可以透過 FB 提供的 API (應用程式介面)，配上你自己的程式碼，最後透過 FB 的 Iframe 或 FBML（Facebook 模版語法），在 FB 上完成你的小程式，基本上如同我上面畫的圖那樣。
下面小梅子就一步步的帶大家走一遍 :D
首先，我們先連上 Facebook Developers 開發者頁面，在它的右上角，有一個「Set up New Application」的按鈕，就放心的給它點下去，代表我們要開始囉。
幫你的小程式取一個名稱，這裡不能用中文唷。
簡單吧，你現在就已經算是進入了第一步，接下來可以要做第二個設定。
在後台設定的左邊，點一下那個「畫布」的按鈕，這裡要設定的是你小程式在 Facebook 上面的顯示路徑名稱，還有你自己主機上面要置放這些檔案的路徑，小梅子建議最好這些路徑名稱是一致的，這樣以後要管理比較簡單。
其實這邊還有滿多東西可以設定的，不過假如你只是想趕快先使用，那麼在 Facebook 這端就這兩步設定已經算是完成了，你會看到一組獨一的「API 金鑰、Application Secret」碼，這些等下會用在你的程式碼中，等下拷貝貼來用就好了。
接下來我們要搞的是你自己主機這一端，在小梅子的第一個示範中，你只需要自己做「一個」檔案就可以搞定了，其他的檔案都是 FB 幫你預備好的。
我們需要先下載並解壓縮Facebook 客戶端函式庫，這個裡面有兩個檔案夾，分別是「footprints 和 PHP」，我們打開 PHP 這個，看到裡面有好些檔案，你可以通通將他們放到你自己預備好的檔案夾中（在這邊，因為小梅子的教學示範位置是 macdog_demo，所以這個檔案夾的名稱我也命名為 macdog_demo），其實你看這些檔名大概也猜的出來，並不是每個檔案都和網頁有關，假如你想再簡化一點，你就只需要保留和小梅子上圖中同樣檔名的檔案即可。
至於那個 index.php 檔案，就是我們需要自己動手寫點東西的程式碼檔案，別擔心，小梅子也附上了本次教學的完整簡易程式碼，提供大家下載即可用 XD
好的，本次教學的完整簡易程式碼中看到的就是上圖中的一部分，請大家記得要填上前面步驟中的「API 金鑰、Application Secret」碼，然後看不懂的東西可以先不要亂動它 XD
這個程式碼要做的事情很簡單，它會計算你 FB 中有幾位朋友，並且從中隨機挑一個出來顯示。
FB 的 FBML 中有提供一些語法可以使用，有興趣深研的網友可以參考 Facebook 提供的 FBML 完整語法 Wiki，小梅子這裡用了 FBML 中的參數，混合 PHP 語法來找出隨機朋友（ㄟ，小梅子並不是程式設計師，所以不要太挑剔我的語法不夠乾淨啊 XD），基本上，你只要將這個檔案（index.txt 改附檔名為 index.php）夾上傳到你自己的主機中，就馬上可以看到效果了。
上傳到你自己的主機後，你只要輸入你之前設定的 Facebook 小程式路徑（小梅子這邊的示範是：http://apps.facebook.com/macdog_demo/），就應該會看到 FB 問你要不要安裝這個小程式（灑花！）
喔！成功了（恭喜老爺，賀喜夫人）
這裡順便推一下圖片中的 Vanny Ma，她是馬大文，一個聲音很溫暖的創作型歌手，也是我的好朋友喔。
接下來我們要嘗試置入 Google AdSense 廣告，不過在放這個前，我們先來談一下它該怎麼被放。
在 FBML 中，有一個 fb:iframe 的語法，就是讓我們可以「置入別的網頁內容」的工具，所以在正常的狀態下，直接用這個語法，就可以置入許多亂七八糟的東西。
小梅子上圖中的示範，置入的是用 Google Docs 做出來的網路問卷表單。
所以 Google AdSense 廣告本來也應該是這樣被放的，但因為 Google AdSense 廣告的標準程式碼並不是單獨一行網址連結，所以這裡我們要轉一下。
這是放了那個 Google Docs 製作免費的網路問卷表單 顯示出來的結果。看到表單囉，真的可以填寫喔，並且內容在你的 Google Docs 後台中都可以看到，真好用（這裡是相關的教學：用 Google Docs 製作免費的網路問卷表單）。
換句話說，你也可以置入其他的網路小遊戲、影片等等亂七八糟的東西，理論上都是可以在 FB 小程式中被顯示出來的喔（但有可能會違背 FB 的使用規定，請大家自行判斷）。
還記得這個 macdog_demo 檔案夾嗎？剛剛只有四個檔案，現在多了兩個，分別是 google.htm 和 google_frame.htm ，這是為了要讓 Google 廣告可以被順利的置入 Facebook 中。
假如有人擔心到底 Facebook 中可不可以放 Google Adsense 廣告，那麼可以看看由官方張貼的公告「Facebook 應用程式可以放置Google AdSense廣告」
google.htm 這個檔案很單純，放的是你在 Google Adsense 後台中申請的廣告碼，直接拷貝貼，並存成一個單獨的檔案即可。
google_frame.htm 這個檔案做的事情就是將剛剛 google.htm 的廣告先置入一次，換句話說，轉換顯示原本比較多行的廣告碼為單一廣告頁。
最後，回到原本那個 index.php 中，將這個轉換後的廣告頁再置入回去，這樣，就可以在 Facebook 中顯示你自己的 Google Adsense 廣告囉（應該有解釋的清楚吧 XD）
然後回到你的 Facebook 小程式中，應該就會看到廣告了。
不知道大家看到這邊有沒有頭昏，其實只要你寫過或用過 HTML 語法，大概對上面這些 Iframe 之類的語法就不會太陌生，至於到底要做什麼樣的小程式才會讓網友真的喜歡使用，並且願意點一下你的小廣告，這就不是我們這次教學的範圍，祝大家都找到自己的賺錢藍海 :D
最後，附上本次「10 分鐘做一個 Facebook 上面的小程式，可置放 Google AdSense 廣告賺錢」的完整懶人包，下載後，只要改一下你自己的 Facebook 金鑰碼，應該馬上就可以用了。
PS : 假如有人遇到下面的錯誤訊息：
Parse error: parse error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in .....
請將你主機上的 PHP 版本更新到 5.0 以上，應該就沒問題了
引用:http://jacobmei.blogspot.tw/2010/03/10-facebook-google-adsense.html
沒有留言:
張貼留言