everevo × Open Graph

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

Transcript

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. like http://~ USER "Open Graph" Before Update
15. "Open Graph" After Update Source : Open Graph - Facebook Developers https://developers.facebook.com/docs/opengraph/
16. USER + + event.title attend view Example for everevo
17. USER + + pin.title pin like comment USER + + pinner.title follow Example for Pinterest
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 の設定から メール購読設定 （Email Subscription Settings） Facebook Developers Tips これを受け取る設定にしておきましょう。
33. ご清聴 ありがとうございました