acebook Night vol.4 での 10 分間の Lightning Talk で発表した内容です。 初の登壇だったため、色々クオリティが低いです。

1. ×
Open Graph
@ Facebook Night vol.4
by Tetsuwo OISHI Netsket Inc. - CTO

2. 目次
1. Netsket Inc. ?
2. everevo ?
3. Open Graph ACTION + OBJECT
4. JavaScript のみで Open Graph アプリを作る
5. Facebook Developers Tips

3. Netsket Inc. ?

4. ネットの助っ人
● 受託開発
● 6名（内5名エンジニア）
そんな Netsket ですが...

5. 2011年2月
受託開発を止める宣言
弊社社長 芥川 武

6. 続きは WEB で !!!
Netsket 検索
www.netsket.com

7. ?

8. Event Revolution ...
Eve...? Revo...?
...?

9. !!!

10. Social Ti cketing Service
● イベントの告知ページ作成
● 告知ページへの集客
● チケット販売・管理
● 参加者管理（連絡など）
● フォローした人の主催・参加する
イベント情報を受け取る

11. everevo は何を目指すのか？
イベントの成長プロセスも含め
サポートするイベントサービス

12. 続きは WEB で !!!
everevo 検索
everevo.com

13. Open Graph
ACTION + OBJECT

14. "Open Graph" Before Update
like http://~
USER

15. "Open Graph" After Update
Source : Open Graph - Facebook Developers
https://developers.facebook.com/docs/opengraph/

16. Example for everevo
attend
USER + + event.title
view

17. Example for Pinterest
pin
USER + like + pin.title
comment
USER + follow + pinner.title

18. まあ言葉で説明しても
アレなので。

19. JavaScript のみで
とりあえず動く
Open Graph アプリを
作ってみましょう
（作業時間5～10分）

20. 流れ
1. どんなアプリにするか
2. アプリ新規登録
3. 基本設定 / 認証ダイアログ設定 / 詳細設定
4. Action / Object / Aggregations 設定
5. HTML / JavaScript コーディング
6. 確認

21. どんなアプリにするか
音楽系のアプリと仮定して...
アプリ名 Test Sound
アプリ名前空間 test-sound
ACTION listen
OBJECT music

22. App > Create New App

23. App > Settings > Auth Dialog
User & Friend Permissions に publish_actions を
入力してください。

24. App > Settings > Advanced (1)
Action は本番アプリで使用する場合、審査を通ら
なければ使えません。しかし、Sandbox Mode を
"有効" することで使うことができます。

25. App > Settings > Advanced (2)
Enhanced Auth Dialog を "有効" します。

26. App > Open Graph > Getting Started

27. App > Open Graph > Action Type: Listen
Caption には OGP のプロパティが使用できます。
{music.description} = og:description
Using Text Template : https://developers.facebook.com/docs/opengraph/template/

28. HTML を貼り付ける
Open Graph ダッシュボードから対象オブジェクト
の "Get Code" をクリックすると上記のダイアログ
が出現します。

29. JavaScript からアクションを投稿
Facebook JavaScript SDK
FB.api(
'/me/test-sound:listen',
'post',
{ music: location.href },
function (response) {
console.log(response);
}
);

30. 動かしてみると...
こんな感じになれば OK です。あとはご自身の
Web サービスでどのように組み込むかを考えれば
実装自体はそこまで難しくありません。

31. ブログでもほぼ同じ内容を公開してます
http://j.mp/everevo-opengraph
５～10分くらいで出来ると思うので、
帰ったら是非試してみてください

32. Facebook Developers Tips
Facebook Developers の設定から
メール購読設定
（Email Subscription Settings）
これを受け取る設定にしておきましょう。

33. ご清聴
ありがとうございました