--- title: "「教學」10 分鐘做一個 Facebook 上面的小程式，可置放 Google AdSense 廣告賺錢喔" description: "「教學」10 分鐘做一個 Facebook 上面的小程式，可置放 Google AdSense 廣告賺錢喔" pubDate: 2010-03-02 author: "jacobmei" category: "網路與社群" tags: [Google, 電子商務, facebook] canonical: https://jacobmei.com/blog/2010/0302-bg-3b6071e5/ lang: zh-TW license: CC BY-NC 4.0 --- # 「教學」10 分鐘做一個 Facebook 上面的小程式，可置放 Google AdSense 廣告賺錢喔 Facebook 是正當紅的網路平台，很多人和公司都在上面做些小程式，嘗試找出一條獲利之路。而之前網路上很多人都已經用過 Google AdSense ，所以這篇文章的目的有兩個： 1. 建立第一個自己的 Facebook 小程式 2. 結合原本已有的 Google AdSense 程式碼 本次課程有一些基本的知識需求： 1. 已經（或預備申請）一個 Google AdSense 廣告帳號 2. 已經（或預備申請）一個可以放檔案的獨立網域使用權 3. 略懂一點點 HTML / PHP 程式語法 小梅子自己串過一次，前後大概花不到十分鐘，大家可以參考看看。 [![](/src/content/blog/assets/blogger/blogger-3b6071e5-fb_001.jpg)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpAzniP1Y9eyMczlczGxTcXlxNOVW1QItcuiADEpR8-KyJRa3Khm5pmAPEaUu39TNuSoKogkOfulRH68_7Xnsmr6zGLV6K6ypFSIvYBoNvkSQoZtnv1uEK3JCWshLvQg9Z9FS0NRfm8hA/s1600-h/fb_001.jpg) 首先我們講一下 Facebook 搞小程式的基本邏輯觀念。基本上 FB 是個擺放小程式的「殼」，所有相關顯示的頁面和實際運作的程式碼，甚至是背後的資料庫，都是可以由開發者自行決定擺放的地方，換句話說，只要你有可以擺放檔案的網域使用權，就可以透過 FB 提供的 API (應用程式介面)，配上你自己的程式碼，最後透過 FB 的 Iframe 或 FBML（Facebook 模版語法），在 FB 上完成你的小程式，基本上如同我上面畫的圖那樣。 下面小梅子就一步步的帶大家走一遍 :D [![](/src/content/blog/assets/blogger/blogger-3b6071e5-fb_002.jpg)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbq95N2qlLFdaiFP6B1Z0kNEhgAdepqcQ_YFdlMXhgF0fYJ_9uDVZh9ExhX0cLWX5FGai5dS3sNKyQtXZGBrZzhDCX7OS6b9HCGZ9YdmxcmlTRfPP-P9-Ftg15hbhV3RWCpxl-0iBDxKw/s1600-h/fb_002.jpg) 首先，我們先連上 [Facebook Developers 開發者](http://www.facebook.com/developers/)頁面，在它的右上角，有一個「Set up New Application」的按鈕，就放心的給它點下去，代表我們要開始囉。 [![](/src/content/blog/assets/blogger/blogger-3b6071e5-fb_003.jpg)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWEXfUlGl1mCFfe74jhyL4RlHNlkEYt4EGYfjW72xdgzihkSfAUOFCiZY8k_IuZ4OdV-AlT72YJKaPFlPTnldqh3ZCB9TL-i5Pi8xsuvxSteFYcs-6ViJTt2_dERj6k-GJiKR4X1NigVU/s1600-h/fb_003.jpg) 幫你的小程式取一個名稱，這裡不能用中文唷。 [![](/src/content/blog/assets/blogger/blogger-3b6071e5-fb_004.jpg)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4tv8cQERnFtiTTemEENmRdldekXYk9gZFWVDwYS2F0qnqIz_tflIQH44Id5YF84TG-Ox6aClzvP3_9j36tEgywY_CnQ9_NbqcV_B208sLj1MiUIiML2Abbzd-kGaHKiS31sUS-Jvab7Y/s1600-h/fb_004.jpg) 簡單吧，你現在就已經算是進入了第一步，接下來可以要做第二個設定。 [![](/src/content/blog/assets/blogger/blogger-3b6071e5-fb_005.jpg)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMzwknj32oULHQTOK9BnAlrDZQG0FPxgleQS5zD4tQwXChNPLgdWtGsgGpXmlL6bXLtWbgRY0R53GMypOHkSlqlPm-nKP1kLQ_g_FayRN4mFpUfF7l_WOTis2C2qHKbvLccGfm9xSBPbo/s1600-h/fb_005.jpg) 在後台設定的左邊，點一下那個「畫布」的按鈕，這裡要設定的是你小程式在 Facebook 上面的顯示路徑名稱，還有你自己主機上面要置放這些檔案的路徑，小梅子建議最好這些路徑名稱是一致的，這樣以後要管理比較簡單。 [![](/src/content/blog/assets/blogger/blogger-3b6071e5-fb_006.jpg)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnQzP243lfAdm2KOz5-VNzaBrGplAG-2S5XecjLhwF1hLRQoPGmwNa2muaBlrwRE8Dbxqdw7VPgjYicES50kKTVd5kRle554cTEj6Ugskj2MgsQcoO6QpwnDpwlW56EjSXydtfl1Buh84/s1600-h/fb_006.jpg) 其實這邊還有滿多東西可以設定的，不過假如你只是想趕快先使用，那麼在 Facebook 這端就這兩步設定已經算是完成了，你會看到一組獨一的「API 金鑰、Application Secret」碼，這些等下會用在你的程式碼中，等下拷貝貼來用就好了。 [![](/src/content/blog/assets/blogger/blogger-3b6071e5-fb_007.jpg)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXiMQLYNg4OGZnrC2feacKVoqVt5AP1ZT5Y0jRrxkGtvDL6RVKmHWI2Uiyy1z-Jke6wAqGkOqTHH4YCpv67TfNKx4OaaYLsvyLdQpkuN_DruopRuiP6a-6De_51AqlhnB9FAUR60ed-NA/s1600-h/fb_007.jpg) 接下來我們要搞的是你自己主機這一端，在小梅子的第一個示範中，你只需要自己做「一個」檔案就可以搞定了，其他的檔案都是 FB 幫你預備好的。 我們需要先下載並解壓縮[Facebook 客戶端函式庫](http://svn.facebook.com/svnroot/platform/clients/packages/facebook-platform.tar.gz)，這個裡面有兩個檔案夾，分別是「footprints 和 PHP」，我們打開 PHP 這個，看到裡面有好些檔案，你可以通通將他們放到你自己預備好的檔案夾中（在這邊，因為小梅子的教學示範位置是 macdog\_demo，所以這個檔案夾的名稱我也命名為 macdog\_demo），其實你看這些檔名大概也猜的出來，並不是每個檔案都和網頁有關，假如你想再簡化一點，你就只需要保留和小梅子上圖中同樣檔名的檔案即可。 至於那個 index.php 檔案，就是我們需要自己動手寫點東西的程式碼檔案，別擔心，小梅子也附上了[本次教學的完整簡易程式碼](http://www.jacobmei.com/macdog_demo/index.txt)，提供大家下載即可用 XD [![](/src/content/blog/assets/blogger/blogger-3b6071e5-fb_008.jpg)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuYoMAnOTJFgFe0HIRoRL_u642V0heAh0CqJF7UoMWn2k_IJkw_8Xdiyx59gRrwIpkXmlyML2i0dDyQvwPgpnA-gl2OPBQXBMMb4n7ftrjk1CC9do905i2ukHCqDvtFjANxf89mCu7Zbs/s1600-h/fb_008.jpg) 好的，[本次教學的完整簡易程式碼](http://www.jacobmei.com/macdog_demo/index.txt)中看到的就是上圖中的一部分，請大家記得要填上前面步驟中的「API 金鑰、Application Secret」碼，然後看不懂的東西可以先不要亂動它 XD 這個程式碼要做的事情很簡單，它會計算你 FB 中有幾位朋友，並且從中隨機挑一個出來顯示。 FB 的 FBML 中有提供一些語法可以使用，有興趣深研的網友可以參考 [Facebook 提供的 FBML 完整語法 Wiki](http://wiki.developers.facebook.com/index.php/FBML)，小梅子這裡用了 FBML 中的參數，混合 PHP 語法來找出隨機朋友（ㄟ，小梅子並不是程式設計師，所以不要太挑剔我的語法不夠乾淨啊 XD），基本上，你只要將這個檔案（index.txt 改附檔名為 index.php）夾上傳到你自己的主機中，就馬上可以看到效果了。 [![](/src/content/blog/assets/blogger/blogger-3b6071e5-fb_009.jpg)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm7bOu2unXBiMnNYBlQBEpx3RTglGmDCdyJNj9IiQiLEA8zYyWK-ZO-KrnHJmIgSatzqDxYNjMj5-cdFOM6_vhzXn51RI2bhKyMNbDUvnJTRrj19aNt4KHULrusa0SJ1_RONrgLtaMulE/s1600-h/fb_009.jpg) 上傳到你自己的主機後，你只要輸入你之前設定的 Facebook 小程式路徑（小梅子這邊的示範是：），就應該會看到 FB 問你要不要安裝這個小程式（灑花！） [![](/src/content/blog/assets/blogger/blogger-3b6071e5-fb_010.jpg)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAwSYkfh8aqqRElFTB1w9pEhdPw3yWbWGp8bfqeelMKL384L53wkP20GkLgcNM5WCYXXogMQDTCOMoBeHX7H3P8QYFnxDogE0qPcMEHj2Z2u6bHkMx_z0dBb6ovjjOAfT-4t5t7jGzFOw/s1600-h/fb_010.jpg) 喔！成功了（恭喜老爺，賀喜夫人） 這裡順便推一下圖片中的 Vanny Ma，她是[馬大文](http://tw.beta.streetvoice.com/music/vannyma/)，一個聲音很溫暖的創作型歌手，也是我的好朋友喔。 [![](/src/content/blog/assets/blogger/blogger-3b6071e5-fb_011.jpg)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-hVU_rj5AlaCb9d2Di9eSkMjyoHJ8_MtWsZgN0ZnsYEMtt2vGxOd0ZtxqszSo6s7v4lebljWSTW9ja8McKQKdpSOzBQOEh8sP2C5CEd9aTxmhE7jqCrZ7iaRxuPdz7hI5zwcfN6gfTjA/s1600-h/fb_011.jpg) 接下來我們要嘗試置入 Google AdSense 廣告，不過在放這個前，我們先來談一下它該怎麼被放。 在 FBML 中，有一個 fb:iframe 的語法，就是讓我們可以「置入別的網頁內容」的工具，所以在正常的狀態下，直接用這個語法，就可以置入許多亂七八糟的東西。 小梅子上圖中的示範，置入的是用 Google Docs 做出來的網路問卷表單。 所以 Google AdSense 廣告本來也應該是這樣被放的，但因為 Google AdSense 廣告的標準程式碼並不是單獨一行網址連結，所以這裡我們要轉一下。 [![](/src/content/blog/assets/blogger/blogger-3b6071e5-fb_012.jpg)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL5k8gBlrcJw2OiZP2UOr-_FIu3JwvY7Kawr_X8IvCLfAihX5937DMcCdLxJZbK96CC8aXpPFVqUfhcrquwB6PpRsdIs2TgPiirdhJzO9K_H3VQq04qP5gdOVa6SoKdoRU_FmgSf6Wc4c/s1600-h/fb_012.jpg) 這是放了那個 Google Docs 製作免費的網路問卷表單 顯示出來的結果。看到表單囉，真的可以填寫喔，並且內容在你的 Google Docs 後台中都可以看到，真好用（這裡是相關的教學：[用 Google Docs 製作免費的網路問卷表單](http://jacobmei.blogspot.com/2008/05/google-docs.html)）。 換句話說，你也可以置入其他的網路小遊戲、影片等等亂七八糟的東西，理論上都是可以在 FB 小程式中被顯示出來的喔（但有可能會違背 FB 的使用規定，請大家自行判斷）。 [![](/src/content/blog/assets/blogger/blogger-3b6071e5-fb_013.jpg)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg329VtRQcq6NJKdiZbVQC_k2aHCuA0s7bE10xNAaVuw3OnZw9zdndxbuYY8TyjUiliTqq16CEA9uU8-gSMj-JBwauQxP0rYIyB2WECzP2PwS75C0lQDXuyutgqlR20WP-dKM555noGHbk/s1600-h/fb_013.jpg) 還記得這個 macdog\_demo 檔案夾嗎？剛剛只有四個檔案，現在多了兩個，分別是 google.htm 和 google\_frame.htm ，這是為了要讓 Google 廣告可以被順利的置入 Facebook 中。 假如有人擔心到底 Facebook 中可不可以放 Google Adsense 廣告，那麼可以看看由官方張貼的公告「[Facebook 應用程式可以放置Google AdSense廣告](http://www.google.com/support/forum/p/adsense/thread?tid=34aae9e35a388625&hl=zh-TW)」 [![](/src/content/blog/assets/blogger/blogger-3b6071e5-fb_014.jpg)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmTCQRYAKFjtSEx_0wcXfDFD2rxzXJKKCymN5BdPObwlGc1VYkGJENAGf5JgJyr0mm9W1sQIcJBW1m1NJ1NA_DDYv4RoLjqW_ZzQwHbqeZ7KvZNqG1PfWUQk3Dg8xhm4Bd5vilP-9n4g4/s1600-h/fb_014.jpg) google.htm 這個檔案很單純，放的是你在 Google Adsense 後台中申請的廣告碼，直接拷貝貼，並存成一個單獨的檔案即可。 [![](/src/content/blog/assets/blogger/blogger-3b6071e5-fb_015.jpg)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxAHQ77ziJDmEubxmImolmzD1lLyC9TPHm9kbMfcGeb8WE9TM2En1M5_PR2kF_9svy3S8a9Hq-gXyNH0PBYdWWmmAoAtqwJRTQhCpcHSppBwGruw2-QmdAo8ZCh08Pibp8puIaYUAIn-Q/s1600-h/fb_015.jpg) google\_frame.htm 這個檔案做的事情就是將剛剛 google.htm 的廣告先置入一次，換句話說，轉換顯示原本比較多行的廣告碼為單一廣告頁。 [![](/src/content/blog/assets/blogger/blogger-3b6071e5-fb_016.jpg)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIxZQb_MoiQRymj1QBQRi0v8nER02w7iWTzZb9iNBO8MwFH1SRlFKymdpdHFLp2-F1O3cV-UVkYRn-5J9g8Z6jUVgklEKkVWsKfRyrgImrxyswlb1YCAHeNBr5m2L0IdILky7RtGxt20E/s1600-h/fb_016.jpg) 最後，回到原本那個 index.php 中，將這個轉換後的廣告頁再置入回去，這樣，就可以在 Facebook 中顯示你自己的 Google Adsense 廣告囉（應該有解釋的清楚吧 XD） [![](/src/content/blog/assets/blogger/blogger-3b6071e5-fb_017.jpg)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixhmnPXWm5eCEa_KOU3QqHJKOH1yQMoImQXmTl-Gkj091-kX87g-OuaUb0Mdlz-1SXP9bCfnl3gTQ5bSLnHPYOxa-H3trqPDpqj7nqBEhknhltiianEGXCk_ywJgrFCya8I6OXurZsvOI/s1600-h/fb_017.jpg) 然後回到你的 Facebook 小程式中，應該就會看到廣告了。 不知道大家看到這邊有沒有頭昏，其實只要你寫過或用過 HTML 語法，大概對上面這些 Iframe 之類的語法就不會太陌生，至於到底要做什麼樣的小程式才會讓網友真的喜歡使用，並且願意點一下你的小廣告，這就不是我們這次教學的範圍，祝大家都找到自己的賺錢藍海 :D 最後，附上本次「10 分鐘做一個 Facebook 上面的小程式，可置放 Google AdSense 廣告賺錢」的[完整懶人包](http://www.jacobmei.com/downloads/macdog_demo.zip)，下載後，只要改一下你自己的 Facebook 金鑰碼，應該馬上就可以用了。 PS : 假如有人遇到下面的錯誤訊息： > Parse error: parse error, unexpected T\_STRING, expecting T\_OLD\_FUNCTION or T\_FUNCTION or T\_VAR or '}' in ..... 請將你主機上的 PHP 版本更新到 5.0 以上，應該就沒問題了