www.flickr.com

3/02/2010

「教學」10 分鐘做一個 Facebook 上面的小程式,可置放 Google AdSense 廣告賺錢喔

Facebook 是正當紅的網路平台,很多人和公司都在上面做些小程式,嘗試找出一條獲利之路。而之前網路上很多人都已經用過 Google AdSense ,所以這篇文章的目的有兩個:
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 以上,應該就沒問題了

6 則留言:

DearJohn 提到...

你寫的真清楚。
找時間來試做一次看看~~

不過我更好奇的是...
1. 大文也是你的好朋友啊?世界還真小。
2. 你工作要異動了喔?有空Skype再聊吧!

小梅子 提到...

To John

你也來試看看吧,入手很簡單的 :D

高藥師 提到...

好久沒看到你的文章

真懷念

Cuir 提到...

小梅子你真的好強喔,謝謝你的超詳盡教學

3Dsweeties 提到...

感謝你寫得很清楚
但是對於我腦袋頓頓的人
可能需要研究一下......(汗)

CBN T 提到...

請問 本次教學的完整簡易程式碼可以再分享一下嗎? 想參考學習!
謝謝