007 facebook open graph 相關開發簡單介紹 公開版
DESCRIPTION
片段&粗略的介紹Facebook相關開發要知道的東西(部分)TRANSCRIPT
![Page 1: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/1.jpg)
Open Graph API介紹
Bruce2012/7/30雲端線上科技股份有限公司
12年8月2日星期四
![Page 2: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/2.jpg)
Open Graph API介紹很粗略&片段的介紹 請鞭小力⼀一點... (抖
Bruce2012/7/30雲端線上科技股份有限公司
12年8月2日星期四
![Page 3: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/3.jpg)
Social Graph
12年8月2日星期四
![Page 4: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/4.jpg)
Open Graph是什麼
Open graph allows apps to model user activities based on actions and objects.
12年8月2日星期四
![Page 5: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/5.jpg)
Open Graph的組成
Actions and Objects
Open Graph Mechanics
Social Channels
issuing a HTTP POST to the user's /me/myapp:cook connection with the URL of the recipe object.
各種可能曝光的地方:Timeline, News Feed,
Aggregations, Requests, App Center, ...
12年8月2日星期四
![Page 6: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/6.jpg)
Graph API是什麼
• access objects
• 對objects進行CRUD
12年8月2日星期四
![Page 7: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/7.jpg)
Requests
• 分為兩種
• User-generated requests
• App-generated requests
12年8月2日星期四
![Page 8: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/8.jpg)
User-generated requests 的特性
• 必須透過dialog,由user按下確認才能發
• Only available for Canvas apps
• 提示方式:紅色泡泡的notification
• 發送對象:
• 任何好友,無論有沒有裝app
• 任何有裝該app的人,無論是否為朋友
12年8月2日星期四
![Page 9: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/9.jpg)
App-generated requests 的特性
• 呼叫Graph API 產生
• 提示方式:
• bookmark的counter
• App Center的request欄位(原本是Dashbaord)
• 發送對象:有裝app的人
12年8月2日星期四
![Page 10: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/10.jpg)
signed_request 用途 格式 解讀
A signed_request parameter is used by Facebook to pass data to an application
Facebook傳資訊給第三方App的方法(實際上是⼀一個HTTP parameter)
12年8月2日星期四
![Page 11: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/11.jpg)
signed_request 用途 格式 解讀
userPOST / 第三方APP
FBCanvas app
(iframe)
GET /ooxx_app
params[:signed_request]=“vlXgu64BQGFSQrY0ZcJBZASMvYvTHu9GQ0YM9rjPSso.eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsIjAiOiJwYXlsb2FkIn0”
內含:user token, user info, ...
(第⼀一次load)
12年8月2日星期四
![Page 12: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/12.jpg)
(不知道)
signed_request 用途 格式 解讀
user第三方APPFB砍掉ooxx_app
12年8月2日星期四
![Page 13: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/13.jpg)
(不知道)
signed_request 用途 格式 解讀
userPOST / 第三方APPFB砍掉ooxx_app
嘿!某某user把你移除了喔
12年8月2日星期四
![Page 14: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/14.jpg)
(不知道)
signed_request 用途 格式 解讀
userPOST / 第三方APPFB砍掉ooxx_app
嘿!某某user把你移除了喔
12年8月2日星期四
![Page 15: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/15.jpg)
signed_request 用途 格式 解讀
vlXgu64BQGFSQrY0ZcJBZASMvYvTHu9GQ0YM9rjPSso.eyJhbG
dvcml0aG0iOiJITUFDLVNIQTI1NiIsIjAiOiJwYXlsb2FkIn0
12年8月2日星期四
![Page 16: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/16.jpg)
signed_request 用途 格式 解讀
vlXgu64BQGFSQrY0ZcJBZASMvYvTHu9GQ0YM9rjPSso.eyJhbG
dvcml0aG0iOiJITUFDLVNIQTI1NiIsIjAiOiJwYXlsb2FkIn0
分隔用的
12年8月2日星期四
![Page 17: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/17.jpg)
signed_request 用途 格式 解讀
vlXgu64BQGFSQrY0ZcJBZASMvYvTHu9GQ0YM9rjPSso.eyJhbG
dvcml0aG0iOiJITUFDLVNIQTI1NiIsIjAiOiJwYXlsb2FkIn0
Base64url, hex encodedHMAC SHA-256 signature
驗證身分用
分隔用的
12年8月2日星期四
![Page 18: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/18.jpg)
signed_request 用途 格式 解讀
vlXgu64BQGFSQrY0ZcJBZASMvYvTHu9GQ0YM9rjPSso.eyJhbG
dvcml0aG0iOiJITUFDLVNIQTI1NiIsIjAiOiJwYXlsb2FkIn0
Base64url, hex encodedHMAC SHA-256 signature
驗證身分用
Base64url, hex encoded JSON真正的內容 (payload)
分隔用的
12年8月2日星期四
![Page 19: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/19.jpg)
signed_request 用途 格式 解讀
vlXgu64BQGFSQrY0ZcJBZASMvYvTHu9GQ0YM9rjPSso.eyJhbG
dvcml0aG0iOiJITUFDLVNIQTI1NiIsIjAiOiJwYXlsb2FkIn0
Base64url, hex encodedHMAC SHA-256 signature
驗證身分用
Base64url, hex encoded JSON真正的內容 (payload)
分隔用的
12年8月2日星期四
![Page 20: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/20.jpg)
signed_request 用途 格式 解讀
<?php ...hash_hmac('sha256', $payload, $secret, $raw = true)?>
就是點.後面的那⼀一段 (尚未Base64 decode)
app secret key
算出來應該要跟點.的前面那段⼀一模⼀一樣12年8月2日星期四
![Page 21: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/21.jpg)
signed_request 用途 格式 解讀
<?php ...hash_hmac('sha256', $payload, $secret, $raw = true)?>
signature
就是點.後面的那⼀一段 (尚未Base64 decode)
app secret key
算出來應該要跟點.的前面那段⼀一模⼀一樣12年8月2日星期四
![Page 22: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/22.jpg)
signed_request 用途 格式 解讀
• Base64url decode後就是JSON了
• 需注意Facebook省略了結尾的=,需要自己補上
• 依照Base64的規格,要將字串長度補滿成4的倍數
12年8月2日星期四
![Page 23: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/23.jpg)
signed_request 用途 格式 解讀payload
• Base64url decode後就是JSON了
• 需注意Facebook省略了結尾的=,需要自己補上
• 依照Base64的規格,要將字串長度補滿成4的倍數
12年8月2日星期四
![Page 24: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/24.jpg)
ruby的實作可參考:
• http://stackoverflow.com/questions/4824035/is-there-a-facebook-credits-ruby-on-rails-gem-out-there-yet-or-ruby-version-of
12年8月2日星期四
![Page 25: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/25.jpg)
exchange user token (server-side)
如果授權還有效這個dialog會略過
必須是你app的相關網址
授權過期的情境有...
12年8月2日星期四
![Page 26: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/26.jpg)
按下notification後會做哪些事?
• 發含有signed_request的POST給app
• app應該負責把用過的request刪除
12年8月2日星期四
![Page 27: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/27.jpg)
Page Tab App是啥
• 基本上還是Canvas app
• 但製作好以後,可以裝在個人或專頁的Timeline上
• 不過在各page上的Page Tab App似乎沒有獨立的app id,所以跟純Canvas相比會有更多限制
12年8月2日星期四
![Page 28: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/28.jpg)
加入page tab app的方法
12年8月2日星期四
![Page 29: 007 Facebook Open Graph 相關開發簡單介紹 公開版](https://reader030.vdocuments.site/reader030/viewer/2022013117/53ffce9d8d7f7261088b47d4/html5/thumbnails/29.jpg)
其他的
• When over 10 people have used your application, it will automatically be submitted to Facebook's search index
• 用Graph API撈照片,不見能⼀一次撈完,連續call幾次後,平均大概25張
12年8月2日星期四