Upgrade to Pro — share decks privately, control downloads, hide ads and more …

オープングラフを導入しよう

 オープングラフを導入しよう

at Facebook Night Vol.9

Katsuhiro Ogawa

August 29, 2012
Tweet

More Decks by Katsuhiro Ogawa

Other Decks in Programming

Transcript

  1. オープングラフを
    導⼊入しよう
    株式会社クロコス ⼩小川雄⼤大
    https://www.facebook.com/katsuhiro.ogawa
    Facebook Night Vol.9

    View Slide

  2. ⾃自⼰己紹介
    ‣খ઒༤େ / OGAWA Katsuhiro
    ‣ http://fvstr.jp/
    ‣גࣜձࣾΫϩίε

    View Slide

  3. View Slide

  4. Ϡϑʔͷ100ˋࢠձࣾʹͳΓ·ͨ͠ʂ

    View Slide

  5. View Slide

  6. View Slide

  7. ‣גࣜձࣾΫϩίε / Crocos Inc.
    ‣ http://crocos.co.jp/
    ‣ https://www.facebook.com/Crocos.Inc
    ‣ೝఆϚʔέςΟϯάσϕϩούʔ

    View Slide

  8. Crocosマーケティング
    ‣ ݒ৆ΞϓϦ
    ‣ ྦྷܭԠื 185ສ݅
    ‣ ྦྷܭ։࠵ 6,000݅
    ‣ ಉ࣌։࠵ 500݅
    ‣ MAU 90,000~120,000
    ‣ ίϯςετΞϓϦ
    ‣ ϓϨϛΞϜϓϥϯݶఆ
    NEW!!

    View Slide

  9. 本⽇日の内容
    ‣Φʔϓϯάϥϑͱ͸
    ‣ΞΫγϣϯͱΦϒδΣΫτ
    ‣ΦʔϓϯάϥϑΛಋೖ͢Δ
    ‣ΦʔϓϯάϥϑΛެ։͢Δ
    ‣ΞΫγϣϯϦϯΫ

    View Slide

  10. オープングラフとは
    ‣Ϣʔβ͕ΞϓϦ্Ͱߦ༷ͬͨʑͳ
    ߦಈΛγΣΞ͢Δ࢓૊Έ
    ‣ http://developers.facebook.com/docs/
    opengraph/

    View Slide

  11. ΫϦοΫͯ͠
    ΫʔϙϯΛऔಘ

    View Slide

  12. ςΟοΧʔͳͲͰ
    γΣΞ

    View Slide

  13. オブジェクトとアクション
    ‣ʮΫʔϙϯΛऔಘʯ
    ‣ ΦϒδΣΫτ Ϋʔϙϯ
    ‣ ΞΫγϣϯ औಘ
    ‣ ΞϓϦ͝ͱʹ೚ҙͰઃఆՄೳ
    ࣮ࡍ͸ӳޠ
    “get a coupon”

    View Slide

  14. どんなシーンでオープングラフを
    活⽤用できるか?
    ‣ΫʔϙϯΛऔಘ “get a coupon”

    View Slide

  15. どんなシーンでオープングラフを
    活⽤用できるか?
    ‣ΫʔϙϯΛऔಘ
    ‣ϑΥτίϯςετʹ౤ථ “vote for a photo”

    View Slide

  16. どんなシーンでオープングラフを
    活⽤用できるか?
    ‣ΫʔϙϯΛऔಘ
    ‣ϑΥτίϯςετʹ౤ථ
    ‣ݒ৆ͷԠืʁ “enter a present competition” ?

    View Slide

  17. どんなシーンでオープングラフを
    活⽤用できるか?
    ‣ΫʔϙϯΛऔಘ
    ‣ϑΥτίϯςετʹ౤ථ
    ‣ݒ৆ͷԠืʁ
    Ϣʔβ͕͍΍͕Γͦ͏ͳͷͰ
    ΍͍ͬͯͳ͍

    View Slide

  18. 導⼊入に必要なこと
    ‣ΦϒδΣΫτͱΞΫγϣϯͷఆٛ
    ‣ΞΫγϣϯͷൃߦॲཧͷ࣮૷
    ‣Ϣʔβ͔ΒڐՄΛಘΔ
    ‣ΞΫγϣϯͷਃ੥ͱঝೝ

    View Slide

  19. オブジェクトとアクションの定義
    Φʔϓϯάϥϑ > Getting Started

    View Slide

  20. オブジェクトとアクションの定義
    ΞΫγϣϯͷઃఆ

    View Slide

  21. オブジェクトとアクションの定義
    ΦϒδΣΫτͷઃఆ

    View Slide

  22. オブジェクトとアクションの定義
    ελʔτΛԡͯ͠ొ࿥

    View Slide

  23. アクションのカスタマイズ
    ‣ςΩετͷΧελϚΠζ
    ‣ ݱࡏ/աڈɺ୯਺/ෳ਺
    ‣ લஔࢺͷࢦఆ (“vote for”)
    ‣ΧελϜϓϩύςΟ, etc...

    View Slide

  24. オブジェクトの設定
    ‣ΦϒδΣΫτ͸ύʔϚϦϯΫΛ࣋
    ͍ͬͯͳ͚Ε͹ͳΒͳ͍
    ‣ ύʔϚϦϯΫ͕ΦϒδΣΫτͷ࣮ମΛද͢
    ‣ http://coupon.crocos.jp/xyz
    ‣ΦϒδΣΫτͷ৘ใ͸OGPͰઃఆ

    View Slide

  25. アクションの発⾏行
    ‣ ΞΫγϣϯͷURLʹPOSTϦΫΤετΛૹΔ
    ‣ /ϢʔβID/ΞϓϦͷ໊લۭؒ:ΞΫγϣϯ
    ‣ /me/crocos-coupon:get
    ‣ ΦϒδΣΫτΛύϥϝʔλʹࢦఆ
    ‣ ஋͸ΦϒδΣΫτͷύʔϚϦϯΫ
    ‣ http://coupon.crocos.jp/xyz

    View Slide

  26. 実装(Using PHP-SDK)
    $facebook = new Facebook(...);
    $facebook->api(
    ‘/me/crocos-coupon:get’,
    ‘POST’,
    [
    ‘coupon’
    => ‘http://coupon.crocos.jp/xyz’,
    ]
    );

    View Slide

  27. 実装(Using PHP-SDK)
    $facebook = new Facebook(...);
    $facebook->api(
    ‘/me/crocos-coupon:get’,
    ‘POST’,
    [
    ‘coupon’
    => ‘http://coupon.crocos.jp/xyz’,
    ]
    );
    ΞΫγϣϯͷൃߦ

    View Slide

  28. 実装(Using PHP-SDK)
    $facebook = new Facebook(...);
    $facebook->api(
    ‘/me/crocos-coupon:get’,
    ‘POST’,
    [
    ‘coupon’
    => ‘http://coupon.crocos.jp/xyz’,
    ]
    );
    POSTϝιου

    View Slide

  29. 実装(Using PHP-SDK)
    $facebook = new Facebook(...);
    $facebook->api(
    ‘/me/crocos-coupon:get’,
    ‘POST’,
    [
    ‘coupon’
    => ‘http://coupon.crocos.jp/xyz’,
    ]
    );
    ΦϒδΣΫτΛύϥϝʔλʹࢦఆ

    View Slide

  30. ユーザから許可を得る
    ‣“publish_actions”
    ‣ ΞΫγϣϯͷൃߦʹඞཁͳݖݶ
    publish_actionsΛ௥Ճ͢ΔͱݱΕΔ

    View Slide

  31. アクションの申請と承認
    ‣ΞΫγϣϯ͸Facebookʹਃ੥ͯ͠
    ঝೝΛಘͳ͍ͱ։ൃऀҎ֎ʹ͸ެ
    ։͞Εͳ͍
    ͸͡ΊʹGetCode͔ΒμΠΞϩάΛ։͍ͯ
    ॻ͔Ε͍ͯΔίϚϯυΛ࣮ߦ͓ͯ͘͠

    View Slide

  32. アクションの申請と承認
    ‣ΞΫγϣϯ͸Facebookʹਃ੥ͯ͠
    ঝೝΛಘͳ͍ͱ։ൃऀҎ֎ʹ͸ެ
    ։͞Εͳ͍
    ૹ৴Λԡͯ͠ਃ੥͢Δ

    View Slide

  33. アクションの申請と承認
    ΞΫγϣϯͷൃߦखॱΛهड़ͯ͠ଓߦ

    View Slide

  34. 申請時のアドバイス
    ‣࣮ࡍʹFacebookͷਓ͕ΞΫηε͠
    ͯ֬ೝͰ͖Δ؀ڥΛ༻ҙ͓ͯ͘͠
    ‣ ࣗ෼ͷ։ൃ؀ڥͰOK
    ‣ ඞͣಈ࡞֬ೝ͞ΕΔΘ͚Ͱ΋ͳ͍ʁ

    View Slide

  35. 申請時のアドバイス
    ‣ΞΫγϣϯ͕ൃޮ͞ΕΔ·Ͱͷख
    ॱΛ1͔Βॱ൪ʹهड़
    ‣ ԡ͢ϘλϯͷςΩετ΋ॻ͘ͱ͍͍͔΋
    ‣ ೔ຊޠͰ΋௨Δ͔͸ෆ໌…

    View Slide

  36. 承認が下りなかったら
    ‣ཧ༝Λڭ͑ͯ͘ΕΔͷͰɺ௚ͯ͠
    ΋͏1౓ਃ੥͢Δ
    ‣ ೔ຊޠ͕ΞϨ͚ͩͲؾʹ͠ͳ͍

    View Slide

  37. 許可が下りたら
    ‣ͦͷ೔ͷ͏ͪʹฦ౴͕͘Δ
    ‣ΦʔϓϯάϥϑΛ࢖ͬͯγΣΞ͠
    ·͘Ζ͏ʂ

    View Slide

  38. テキストの翻訳
    ‣TranslationsΞϓϦ͔Βϝοηʔ
    δͷ຋༁͕Մೳ
    ‣ ϢʔβͷݴޠʹΑͬͯࣗಈతʹ੾ΓସΘΔ
    ‣70ϑϨʔζ/1ΞΫγϣϯ͘Β͍…
    ‣ਃ੥͕௨ͬͨ͋ͱʹ΍Δͱ࣮֬

    View Slide

  39. アクションリンク
    γΣΞ͞ΕͨΞΫγϣϯΛܦ༝ͯ͠
    ࣗ෼΋ΞΫγϣϯΛߦ͏࢓૊Έ

    View Slide

  40. アクションリンクの設定
    ͜͜ʹࢦఆͨ͠URLʹ
    Signed Request͕ඈΜͰ͘Δ

    View Slide

  41. 実装(Using PHP-SDK)
    $sr = $facebook->getSignedRequest();
    $object = $sr['objects'][0]['url'];
    $action = $sr[‘action_link’][‘type’];
    if ($action === ‘crocos-coupon:get’) {
    // Ϋʔϙϯൃߦॲཧ
    }
    return [‘success’ => ‘true’];

    View Slide

  42. ‣Crocos Enginnering BlogΛݟ
    ͍ͯͩ͘͞ʂ
    ‣ http://engineering.crocos.jp/
    ‣͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    まとめ

    View Slide