Skip to main content

「教學」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 以上,應該就沒問題了

Comments

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

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

你也來試看看吧,入手很簡單的 :D
高藥師 said…
好久沒看到你的文章

真懷念
Cuir said…
小梅子你真的好強喔,謝謝你的超詳盡教學
3Dsweeties said…
感謝你寫得很清楚
但是對於我腦袋頓頓的人
可能需要研究一下......(汗)
Unknown said…
請問 本次教學的完整簡易程式碼可以再分享一下嗎? 想參考學習!
謝謝
Anonymous said…
話說...我剛好也認識馬大文阿....

Popular posts from this blog

「分享」Mac / iPhone 上的廣播電台軟體 FStream - 廣播列表更新 2009/9/19

小梅子在蘋果電腦上面最喜歡用的小功能之一,就是可以透過電腦聆聽廣播電台,以前我常用 Hinet Sucks! Radio Widget ,這是個絕頂好物,可以隱藏在背景默默忠實的播放廣播音樂,但因為 Hinet 常常更改他們的線上廣播規則,所以搞的原作者疲於奔命,有時候就會聽不到音樂。 後來小梅子使用了另一個工具 FStream ,這也是一個可以讓你在 Mac OSX 上聽廣播的好東西,並且它可以讓你自由編輯廣播電台目錄,也支援 iTunes 的廣播列表(這真的很方便),還支援錄音功能喔!所以小梅子這陣子每天都在用 FStream 聽佳音廣播電台,很開心。 FStream 的介紹網路上已經很多了,它也有 iPhone 版本,所以只要你的 iPhone 可以3G上網,理論上就可以開心的聽廣播囉。 因為介紹已經很多,所以小梅子這裡要分享的是:廣播節目清單 XD FStream 不像 Hinet Sucks! Radio Widget 內建好了一狗票廣播節目清單,得自己一一輸入,這說起來也是滿麻煩的,我看了一下網路上的教學,覺得要一個個輸入實在不是人幹的事情,所以小梅子比對了一下資料結構,搞了一個「 台灣+香港 常用廣播電台節目表 」,所以你只要下載了 FStream ,再輸入(Import) 這個節目表就會有現成的一狗票節目了,也不用去改檔案夾目錄什麼的。 首先開啟 FStream 中的 Stream Manager 功能,預備輸入清單。 在 Stream Manager 的右下角,有一個「Import」按鈕,點下去預備輸入檔案 下載小梅子整理好的檔案,直接輸入囉,下載後直接放在桌面上就可以了,不用特別去選定目錄。 噹噹噹,這時候你應該會看到三個目錄,包括台灣、香港,還有一個 ... 沒成功過 XD,這個沒成功的列表是過去曾經用過,但現在沒有列在 Hinet Free 廣播清單中,或許以後可以用。 上面的清單中,小梅子其實也沒有一一測試過啦,大夥可以自己試試,若是還有不能連線的電台,你也可以自己手動搬移到「沒成功過」這個列表 :P PS : Hinet 又更新了廣播位置,小梅子今天 (4/15)也更新了這個目錄,順手又多加了一些電台,目前使用正常,歡迎大家一起聽廣播音樂 ^_^ ps : 2009/09/19 更新 這兩天發現 Fstream 又忽然不能聽了,但這次的狀

新手筆記:Crypto.com Visa Card 註冊與申請使用的心得整理

新手筆記:Crypto.com 卡片註冊與申請使用的心得整理 歡迎還沒註冊的,使用我的推薦,可獲得 25美元 等值的辦理獎勵喔 ^_^ https://crypto.com/app/cd5avydxd9  註冊,你我即可一同獲享 $25 USD XD 以下是我個人整理的 Crypto.com 常見問題,希望對大家有幫助,若有錯誤之處,也請告知,我再調整 :) Q:Crypto.com 的服務適用地區 Q:Crypto.com 幾個服務的關係 Q:目前還在地址審查中,可以升級換卡嗎?(APP中顯示地址為新加坡,可以改台灣嗎?) Q:審查完畢,狀態為「已發出 Issued」,要多久會收到卡片? Q:狀態為「已寄出 Shipped」,要多久會收到卡片? Q: 如何透過台灣信用卡買幣? Q:如何使用 CRO 卡付款? 如何儲值? Q:Netflix 如何綁定 CRO 卡以取得回饋? Q:Spotify 如何綁定 CRO 卡以取得回饋? Q:CRO 卡的刷卡回饋是即時的嗎?哪些行為不會有回饋?哪裏可以看看到? Q:LinePay 如何綁定 CRO 卡? Q:為什麼某些 APP 綁定,或是購物網站無法使用 CRO 卡? Q:目前網友們回報在台灣可以使用的地方有哪些? Q:什麼是 2FA 雙因子認證? Q:取得獎勵金(雙方均可取得 25 美金等值CRO)的資格 Q:在 ATM 提領現金的手續費 Q:如何匯款回台灣等設定銀行帳戶等相關問題(細節之後再補) Q:如何聯繫線上客服 Q:小心詐騙就在你身邊 這幾年區塊鏈與虛擬貨幣的發展,在近年 covid-19 和今年元宇宙 (Metaverse ) 的交互影響下大爆發,我整理一下筆記,提供給有興趣的人參考。首先是關於總部位於新加坡的加密貨幣平台和交易所 Crypto.com ,他們在 2021-11-16 公佈了一個大消息: AEG and Crypto.com to Lead Future of the Creative Capital of the Sports, Music and Entertainment World with New Naming Rights Agreement for Iconic Los Angeles Venue Formerly Known as STAPLES Center 斥資 7億元,向球場

「分享」我的 Kindle 3 Graphite 初體驗 3G / Wifi 版本

總之,我買了一台 Kindle 3 XD Kindle Wireless 3G/Wifi - $189.00 Shipped via DHL International - $20.98 Import Fees Deposit: - $10.65 Total: - $220.63 2010/10/30 update : 剛 Amazon通知因為 Export fee reduced , 所以 $10.65 會完全退回 :D 很快的講一下我晚上的測試: 1. 因為我原本在 Amazon 上面的帳號是台灣的地址,所以購買的時候沒有送 Power 線,聽說有大大直接寫信和 Amazon 的客服要求應該要附線,不過我下訂單的時候比較早,就沒有做這件事,也因此我得到的只有一條 USB 線 2. 我原有的台灣帳號購買書籍,會需要額外支付 2 美金的費用 3. 自行灌入的繁簡體中文 PDF 檔案,都可以正常觀看無誤,載入速度也還不錯(檔案約 90 頁) 4. 中文檔名有些會漏字,但內文 OK , 和繁簡體好像沒有直接關係 5. txt 純文字檔的中文偶而會有漏字 6. 可以直接透過 3G 上網無誤(非常爽) 7. 繁體中文的網站觀看無誤,測試網站包括了雅虎繁體中文網站、無名小站等 8. 簡體中文的網站偶而會有漏字,但大體上無誤,測試網站包括了新浪網等 9. 某些特殊網站也可以用,例如 Google Map 台灣美食地圖、Plurk mobile 網頁 10. 可以一面聽音樂一面閱讀 11. 內建的兩套牛津字典還不錯用,不算陽春 12. Text to speech 的功能只支援英文,包括了自己輸入的 txt 檔(PDF 不支援) 下面是一些螢幕截圖: 中文 PDF 沒問題 PDF 漫畫當然也沒問題 Plurk Mobile 版本正常 新浪娛樂頻道簡體網站,內容正常,標題可能漏字 Google Map 台灣地圖正常,但有點難按 Yahoo 奇摩繁體中文網頁正常 無名小站繁體中文正常 Google 新聞網站沒問題 簡體中文內容的 PDF 檔案正常 後續更新中: 感謝林兄之前的努力,小梅子測試在 Kindle 3 中也可以自行安裝「 21世紀英漢詞典 」,贊啦! 延伸閱讀: Kindle 3 的幾個快速鍵、