$30 off During Our Annual Pro Sale. View Details »

everevo × Open Graph

everevo × Open Graph

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

Tetsuwo OISHI

August 29, 2012
Tweet

Other Decks in Technology

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
    5~10分くらいで出来ると思うので、
    帰ったら是非試してみてください

    View Slide

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

    View Slide

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

    View Slide