everevo × Open Graph

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

Transcript

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

   View Slide

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

   View Slide

3. Netsket Inc. ?
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. ?
   

   View Slide

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

   View Slide

9. !!!
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. Open Graph
    ACTION + OBJECT
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. App > Create New App
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. App > Open Graph > Getting Started
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide