Facebook - Facebook App simple upload!! and I hate you Facebook App!!

這是因為剛好遇到要在Fcaebook上頁籤的客戶~~

讓我又再次的被折磨到快腦死.........

其實所謂的在Facebook上頁籤~其實就是製作Facebook APP~

就是把網頁、圖或小遊戲放在Facebook的應用程式集裡面~

要說難~~也沒難道讓你上稿上到哭出來~~但也沒簡單到看看書或上網查查資料就好........

簡單來說~~這就是一件會讓你大喊放過我的要命工程=..=

先來說說事前準備~~

1. 要有一個健康的伺服器~這次的我是跟戰國策租借商業型伺服器~不過如果案件沒有很趕......其實租借米國的伺服器會比較便宜~~不過遇到問題會比較麻煩~~只能用信件通知~~而且是英文信.......
2. 再來就是要在Fbcebook APP上稿最重要的事情~~申請SSL憑證(SSL介紹可以看這邊)!!這個看似複雜的東西~其實是可以請伺服器租借的公司代辦~不過因為台灣的SSL要跟國外申請~所以最少要7個工作天~要有心理準備~所以這次我是申請伺服器的時候~順便請戰國策一起申請SSL~~不過之後還是有些問題.................但至少對方是說中文的.....就比較好溝通=..=
3. 再來就是要把要放在Facebook APP的網頁或遊戲上傳到申請好的空間~通常是放在FTP裡的httpdocs這個資料夾裡面~不過在做這個網站的東西時~要注意!!盡量不要有外Load的東西~不然上稿後~Facebook會出現安全性畫面!!最好連js都是放本機裡面做呼叫!!

以上~~通通準備好後~~就來上稿吧@.@

1. 首先~登入facebook(屁話=口=)~然後再網址列打入https://developers.facebook.com到開發人員頁面

2. 點選上方的應用程式下拉霸~選製作新應用程式

3. 然後就會跳出這個彈跳視窗~在Display Name輸入想要的APP名稱~通常跟頁籤名稱會一樣~類別也要選~但是他類別很少~所以就選個跟你要放的APP最接近的類別就好~不過在使用的時候要小心~~這東西很容易因為點到白板外的範圍就跳掉了~~然後一切重來=..=

4. 然後他就會跳出這個很難辨認的認證碼~輸入認證碼後再按送出就好~~之後就等他跑跑跑~~跑到出現下一個畫面.......不過認證碼請看清楚再填....不然也是全部重來T^T

5. 進到這個畫面~~終於是建好了一個Facebook APP的ID了~這個畫面是以後建好APP後可以來監看流量的地方

6. 點擊測欄的設定進到最恐怖的地方吧!!先在電子郵件的地方填上自己的信箱~然後按下新增平台

7. 然後在他的彈出視窗先選左上角的App on Facebook

8. 然後原本的應用程式ID面板下面就會再多出一個App on Facebook的面板~找到Canvas URL這個欄位填入http://domain name/記得尾巴一定要打上" / "~在右邊的Secure Canvas URL這個欄位填入https://domain name/一樣尾巴的" / "要打上~至於下方的Canvas Fixed Width跟Canvas Fixed Height要不要選是就看你要放入的APP有沒有按照他的預設規範寬760 px X 高800px去做了~如果小於就選是~如果大於就選否~現在的預設都是否~都設定完後~就在點一次新增平台

9. 再來點選上排的網站這個選項

10. 這邊就簡單多了~在網站URL跟Mobile Site URL(這個是讓使用者用手機經由Canvas Page路徑進來的時候可以正常顯示畫面的地方~只是不會包在Facebook框架之下)都鍵入http://domain name/就好~之後再按一次新增平台~來新增最後一個平台

11.在這個畫面選擇下排左邊數來第二個專頁頁籤選項

12.在這頁找到Page Tab Name欄位填入頁籤的名稱(這個可以跟Display Name一樣或另外命名)~然後找到Page Tab URL欄位填入http://domain name/~在下方找到Secure Page Tab URL欄位填入~https://domain name/~~再來就是點頁籤圖像下面的圖示加入一張111px X 74 px的頁籤圖

13.點選選擇檔案按鈕~選一張111 px X 74 px小於1mb的圖

14.圖加好後點下方的儲存按鈕~把所有設定存起來~記得~沒按這顆按鈕前千萬不要關掉或離開這個頁面~不然所有設定都會失去~~剛剛就都做白工了=..=

15.儲存後再點選左邊欄位的App Details也就是第四顆按鈕~去設定一些APP詳細資料~主要是新增在應用程式集顯示時的縮圖

16.活動標語可以打跟Page Tab Name一樣就好~不過不能有數字或特殊符號跟空白在裡面

17.再來捲到最下面~會看到反光圖示這個區塊~這次主要是要新增標誌1024 px X1024 px跟圖示16px X 16px~新增方式跟新增標籤圖示一樣~新增完後一樣按下下面的儲存按鈕

18.再回到最上方~點擊Wed Preview跟Mobile Preview去看一下圖示有沒有正確顯示


19.再來就是要把APP放進粉絲團頁簽了~~說到這個真的是要好好罵罵Facebook~改版前可以設定好就自動加入頁籤~~現在卻麻煩到我要找外掛來放頁籤~~這啥鬼狀況=口=~~加頁籤的外掛很多~但我強者朋友給了我一個無敵好用的.html來安裝頁籤~FB添加頁籤的新方式2011214開始.html~下載這個檔案後~直接點開這個.html檔~會出現這個畫面~再把應用程式編碼的數字碼拷貝貼上到APP ID後方欄位裡~按下Add TabPress to Your Fan Page按鈕

20.在這邊點~選擇Facebook粉絲專頁的下拉式選單~選擇你要加頁籤的粉絲團

21.按下新增粉絲專頁的按鈕後~他就會自動跳到你的粉絲團了~通常新增的頁籤會顯示在最右邊!!

22.最後一個步驟!!回到開發人員頁面~點Status & Review在右邊會有一個是否的切換bar~~點下去

23.按下彈出視窗的確認按鈕~這樣你的頁籤就正式上線了~這個指令的差別是在於~你允許誰來看這個頁籤內容~如果只允許自己看到~~就把按鈕換到否~如果要公開上線~就把按鈕換到是!

再來就是確認一下頁籤內容有沒有正確上線了
第一個地方是在粉絲團自己頁籤點進去後的畫面~會向下圖這樣~內容做的很偷懶~~不過就外框架會是包在粉絲團裡面~通常右邊不會有廣告~有也很少~

第二個地方就是在獨立APP檢視時的畫面~~他的連結在設定的基本資料的App on Facebook區塊的Canvas Page的欄位裡通常會是https://apps.facebook.com/應用程式ID~這樣的配置

用這個連結進去看的畫面會是下圖這樣~

一般給媒體端的正是連結會是上面這種~因為只有這個連結在使用者用手機連進來的時候~才有辦法自動轉址到能正確檢視的畫面去~

PS:有時候會遇到SSL廠商那邊沒設定好~導致Fierfox出現安全性錯誤的問題~這個通常只要聯絡對方工程師就可以解決~至於IE9以下就沒救了~~除了看運氣~~基本上無解...........科技總是與老東西互相衝突啊~~~~~~~~~~~~~~

呼~~以上~~打完收工!!
不過Facebook的遊戲規則是以秒為單位再改的.........誰知道他下次又會生出什麼新規則來為難我們T^T..............這篇搞不好時間久了~~真的就只能參考了...........