Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ςΟοΧʔͳͲͰ γΣΞ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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