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