我們的生活周遭不外乎就是以人、事、時、地、物 所構成, 人與人之間的互動, 事件的發生 等等

每個Social Network Service正是在想辦法把我們的生活的縮影給數位化, 網路化

1. 人: Personal profile, Friends, Lists, Group….虛擬著人與人之間互動的關係
2. 事: What’s on your mind? What’s happening? 什麼事情即將發生或發生過(events)
3. 時: 每個事件, 動作都會帶著時間
4. 地: Check in是沒意義的動作, 只是好玩, 但如果事件或想法帶著地點就不同了, 那代表事情的發生地點, 或是你在啥地方激發了你的想法
5. 物: 吃食物, 看電影, 聽音樂, 讀一本書…我們時時刻刻無不跟東西在互動

Google+對Social network的解答是隱私權(Circle), 是分享(Reshare, auto upload), 是溝通(Hangout), 但Facebook卻是從人出發(Profile, Timeline, 最早由Profile), 到Open Graph (與物的互動), 想盡辦法縮影我們的生活, 雖然有很多爭議點, 我認為, 現階段G+還是無法抗衡, 比較起來, Facebook目前還是比Google懂社群 (純個人意見抒發)

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:

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" -

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

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

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

設定你的heroku應用程式

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

在你的電腦執行

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

以下是先需要安裝的

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都指向本地端, 像這樣:

export FACEBOOK_APP_ID=122348222122778

export FACEBOOK_SECRET=1ba1beed9f7b5be9192bf4540c231234

export PORT=5000

(我跑在5000)

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

執行

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