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

Transcript

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

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

3. None

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

5. None
6. None

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

8. Crocosマーケティング ‣ ݒ৆ΞϓϦ ‣ ྦྷܭԠื 185ສ݅ ‣ ྦྷܭ։࠵ 6,000݅ ‣

   ಉ࣌։࠵ 500݅ ‣ MAU 90,000~120,000 ‣ ίϯςετΞϓϦ ‣ ϓϨϛΞϜϓϥϯݶఆ NEW!!

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

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

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

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

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

    ࣮ࡍ͸ӳޠ “get a coupon”

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

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

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

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

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

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

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

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

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

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

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

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

    ஋͸ΦϒδΣΫτͷύʔϚϦϯΫ ‣ http://coupon.crocos.jp/xyz

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

    ‘coupon’ => ‘http://coupon.crocos.jp/xyz’, ] );

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

    ‘coupon’ => ‘http://coupon.crocos.jp/xyz’, ] ); ΞΫγϣϯͷൃߦ

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

    ‘coupon’ => ‘http://coupon.crocos.jp/xyz’, ] ); POSTϝιου

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

    ‘coupon’ => ‘http://coupon.crocos.jp/xyz’, ] ); ΦϒδΣΫτΛύϥϝʔλʹࢦఆ

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

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

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

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

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

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

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

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

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

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

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

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’];

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