2012年12月27日 星期四

Facebook SDK Open Graph 全攻略(一)

大家好, 我是奶綠茶
身為一位快樂的打字人員(誤), 是一定要會 FB Connect 的啦
所以小弟就決定來來寫一系列的教學
因為 FB 規格像月亮,初一十五不一樣 ,
所以寫一下撰寫日期, 2012 / 12 / 27
免得日後改版讀者看到舊的文章


教學使用的都是 JavaScript SDK 來開發

1.先成為 Facebook 開發人員, 需要電話認證。
https://developers.facebook.com/apps

2.建立新的應用程式




應用程式名稱:可以中文, 視別用
應用程式名稱空間:app.facebook.com/ XXXX , 通常會取一個短又好記的, 不可中文
網站管理:這個沒研究, 先不管
然後按下繼續



完成後, 就可以看到建立的應用程式
接著還可以再編輯設計




App ID:這個應用程式的唯一 ID 值, 初始化時會用到
App Secret:暫時先不管
基本資料料:就打一打吧
Display Name:就是你的應用程式名稱, 使用者 Connect 時就會出現

選擇你的應用程式如何跟 Facebook 結合
以 Facebook 登入網站:
如果你的網站是放在自己的 Domain, 想要有 FBConnect 的話, 就在這輸入
因為開發時, 一定都要是在 http 下才行, 可以在自己的本機架一個 localhost 會比較快
等正式上線再換網址即可

Facebook 上的 App:
如果你的應用程式是要掛在 app.facebook.com 下的話, 就要在這輸入
像開心農場那樣, 外框是 Facebook , 裡面是你的內容
一樣填上網址, 記得, 就算你只是要放在 FB 裡, 還是要填寫上"以 Facebook 登入網站"
不然一樣不給連。

手機版網頁:同以 Facebook 登入網站

原生 iOS 程式:給 iOS 用的

原生 Android 程式:給 Android 用的,之後幾篇會介紹到。

Facebook 上的 App:

Facebook 會用 iFrame 把你包進來

Mobile Web:手機版網站用

Native iOS App:ios 原生程式用

專頁分頁:在粉絲團裡的分頁用

注意喔,如果是掛在 app.facebook.com 下的應用程式(分頁也是),
你的 Domain 一定要是 https 才行, 不然 FB 不讓你用

這篇就先介紹到申請, 下一篇就來使用 JavaScript SDK。

2012年12月22日 星期六

新案上線:海尼根140年紀念瓶

大家好,我是奶綠茶
新案上線:海尼根140年紀念瓶
http://140bottle.heineken.com.tw/
這次練習了使用 css + js 來製作網頁
只有聲音的部份使用到 flash 來控製
並使用 ShareObject 來記錄使用者是否關閉了聲音
這樣下次進來時,就不會自動播放,貼心吧,嘿

 JS 裡實作 Command Design Pattern
身為一位專業的開發人員,是一定要學會的
同時還加入行動裝置的判斷並製作了手機版的網頁
http://140bottle.heineken.com.tw/m/

地址也加入了台灣縣市路名
待整理好了再將原始碼分享出來