1. Go to Facebook developer : https://developers.facebook.com/apps
  2. Select your app
  3. Click “Edit Setting”
  4. Choose “Translate your app” at left hand side
  5. You’ll see a form as following. Select your language and translate all messages:
_2011-09-26_6

Open graph的確是個好物, 雖然說早在去年的f8就已經推出了, 但現在更加完備了, 其實也等不及看會有啥應用推出了, 當然自己也想來玩看看,  本想照Tutorial依樣畫葫蘆抄一個體驗看看, 又覺這樣太無聊, 又想說試看看heroku + node.js, 沒真的玩過node.js, 就拿這題目試試

今天剛好在Facebook上講到拉麵, 所以就拿我最愛吃的拉麵來當題目了.. :P

web.js和兩個views(index.ejs, men.js)的sources放在這

實作筆記:

  1. Tutorial裡的範例是拿Heroku + PHP, 但其實這跟拿哪一種來實作沒太大差異, 裡面的範例幾乎全部都是javascript辦到的, 所以就算把範例放到其他平台也適用
  2. Tutorial裡的範例比較靜態, 全部實作在html內就好, 我把它改成"/ramen/id"當一個物件, 但每一個物件都還是透過"men.ejs"去render
  3. heroku提供的node.js連結Facebook的範本是透過server side的everyauth+facebook-client, 我把這些都拿掉, 純用Facebook javascript api
  4. 在web.js裡實作兩個uri, “/” (index.ejs) 和 “/ramen/id” (men.ejs), 拉麵資料由web.js在render時傳給template, 目前先寫死
  5. Object debugger是蠻好用的東西, meta data寫錯一直post不出去, 剛開始沒用這抓錯還真不知道錯哪
  6. Social plugin的activity feed似乎不包含自己的

最後在Timeline上呈現的樣子:

用Graph API取得自己的Activities:

https://graph.facebook.com/me/[name_space]:[action_type]/ramen

ex. https://graph.facebook.com/me/soulogramen:eat/ramen

 

test

這篇算筆記, 有可能會有一些失落環節在, 主要從create Facebook application到可以在local端執行

Facebook這月稍早時跟Heroku合作, 讓建立一個Facebook應用程式(含後端)更加方便: http://developers.facebook.com/blog/post/558/ (有些步驟可以從這看)

我選了Node.js當做開發的平台, 以下就是我的步驟:

建立Facebook application

首先到Facebook application page https://developers.facebook.com/apps/ 建立一個新的應用程式

跟以往有點不太一樣的是, 在Application settings裡面多了一個"Cloud Services" -

_2011-09-21_4

目前只有Heroku可以選, 我猜以後搞不好會有更多合作對象吧

選了Provider之後, 接下來就要選擇平台, 目前有PHP, Python, Ruby, Node.js可選, 選擇算蠻多的了, 這邊選Node.js

_2011-09-21_4

經過一些有的沒的之後, 就會有這畫面, 這邊已經完成這個應用程式的基本雛形了

_2011-09-21_4

設定你的heroku應用程式

到 https://api.heroku.com/myapps 去設定你的應用程式, 在這邊你可以修改應用程式名稱, 不過比較麻煩的是, 這邊的修改並不會同步回Facebok, 因此修改後還是需要回Facebook去更改相關設定:

_2011-09-21_4

在你的電腦執行

一般在程式沒完成前大多都不會想直接佈署上去, 能在自己電腦先執行驗證過是比較容易抓蟲的

以下是先需要安裝的

heroku command line -

heroku是用gem安裝的, 所以安裝前要先確認你電腦有沒安裝Ruby, heroku安裝方法很簡單, 只要執行 “gem install heroku”

安裝好後先用"heroku keys"看看有沒存在的key, 有的話可能會讓之後要用git抓資料有問題, 有的話用"heoku keys:remove"先移除, 這樣login會產生新的public key

用"heroku login"登入heroku, 第一次使用可能會要求產生public key

登入後就可以用"git clone [email protected]:ff8.git"抓下原始碼(ff8是heroku application name)

node.js -

這當然是必須安裝的(在這例子), 如果是在mac上, 又是brew的使用者, 那只要用"brew install node"即可

npm (node package manager) -

安裝方式很簡單, 只要"curl http://npmjs.org/install.sh | sh"

安裝好後, 在git clone下來的目錄下"npm install", 它自然會裝好所有所需的package

foreman -

文件裡面有建議裝, 不過由於這範例只是一個單純的web, 並沒其他worker, 可以不裝

設定Facebook application

因為要在本地端執行而不是heroku的雲, 所以要把url都指向本地端, 像這樣:

_2011-09-23_5
設定環境變數

export FACEBOOK_APP_ID=122348222122778

export FACEBOOK_SECRET=1ba1beed9f7b5be9192bf4540c231234

export PORT=5000

(我跑在5000)

如果使用foreman, 就把這些寫在.env中

執行

“node web.js"就可以將server跑起來(或是foreman start), 然後到http://localhost:5000/就可以看到結果 

_2011-09-23_4
_2011-09-23_4

Facebook今天發表的Timeline真是令人興奮的功能呀

現在應該再也沒人說很難用Facebook當日記了(雖然我講日記這概念講很久都沒去實現他)…

剛剛我的Timeline也啟用了, 這真的會讓我花很多時間在上面的東西呀…

_2011-09-23_4

連Game都可以有Timeline… XD