Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
オープングラフを導入しよう
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Katsuhiro Ogawa
August 29, 2012
Programming
7.5k
3
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
オープングラフを導入しよう
at Facebook Night Vol.9
Katsuhiro Ogawa
August 29, 2012
More Decks by Katsuhiro Ogawa
See All by Katsuhiro Ogawa
新規プロダクト開発に伴う既存マイクロサービスのリアーキテクティングとその後
fivestar
1
170
Goで学ぶSOLID原則
fivestar
0
450
メルカリ CSE チームの 歩みと取り組み / Steps and Tries in the CSE team for Mercari
fivestar
2
980
Go in Corporate Solutions Engineering
fivestar
0
2.6k
いつまでPHP 5.x使ってるの
fivestar
1
2.1k
PHP のドキュメントを読んで PHP のことをもっと知ろう
fivestar
1
3.4k
CrocosSecurityBundleを Symfony3.0に対応した話
fivestar
0
320
PHP BLT だけど HTML5 の コンテンツモデルのお話
fivestar
0
2.5k
THE NEW "PERFECT PHP" WILL BE COMING SOON
fivestar
0
8.2k
Other Decks in Programming
See All in Programming
タクシーアプリ『GO』の バックエンド開発のおける AI利活用と若者のすべて
pyama86
3
2k
Inside Stream API
skrb
1
680
AIとASP.NET Coreで雑Webアプリを作った話
mayuki
0
500
jQueryをバージョンアップする前に使いたいjQuery Migrate
matsuo_atsushi
0
200
Technical Debt: Understanding it Rightly, Engaging it Rightly #LaravelLiveJP
shogogg
0
220
気づいたらRubyで100作品 ー クリエイティブコーディングが生活の一部になるまで / 100 Ruby Sketches Later: How Creative Coding Became Part of My Life
chobishiba
3
560
LLM本来の能力を解き放つサンドボックス技術とAI民主化への適用
yukukotani
3
3.6k
IBM Bobを活用したレガシーアプリの最新化
oniak3ibm
PRO
1
190
Spec Driven Development | AI Summit Lisbon
danielsogl
PRO
0
180
AI 時代のソフトウェア設計の学び方
masuda220
PRO
29
12k
並列実装の現場、2ヶ月間実務でAIを使い倒したAIもPCも私も限界が近い
ming_ayami
0
120
Oxcを導入して開発体験が向上した話
yug1224
4
310
Featured
See All Featured
Skip the Path - Find Your Career Trail
mkilby
1
140
KATA
mclloyd
PRO
35
15k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
200
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
610
Building a Modern Day E-commerce SEO Strategy
aleyda
45
9.1k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
2.1k
A Soul's Torment
seathinner
6
2.9k
Optimizing for Happiness
mojombo
378
71k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
730
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
190
Design in an AI World
tapps
1
240
ラッコキーワード サービス紹介資料
rakko
1
3.6M
Transcript
オープングラフを 導⼊入しよう 株式会社クロコス ⼩小川雄⼤大 https://www.facebook.com/katsuhiro.ogawa Facebook Night Vol.9
⾃自⼰己紹介 ‣খ༤େ / OGAWA Katsuhiro ‣ http://fvstr.jp/ ‣גࣜձࣾΫϩίε
None
Ϡϑʔͷ100ˋࢠձࣾʹͳΓ·ͨ͠ʂ
None
None
‣גࣜձࣾΫϩίε / Crocos Inc. ‣ http://crocos.co.jp/ ‣ https://www.facebook.com/Crocos.Inc ‣ೝఆϚʔέςΟϯάσϕϩούʔ
Crocosマーケティング ‣ ݒΞϓϦ ‣ ྦྷܭԠื 185ສ݅ ‣ ྦྷܭ։࠵ 6,000݅ ‣
ಉ࣌։࠵ 500݅ ‣ MAU 90,000~120,000 ‣ ίϯςετΞϓϦ ‣ ϓϨϛΞϜϓϥϯݶఆ NEW!!
本⽇日の内容 ‣Φʔϓϯάϥϑͱ ‣ΞΫγϣϯͱΦϒδΣΫτ ‣ΦʔϓϯάϥϑΛಋೖ͢Δ ‣ΦʔϓϯάϥϑΛެ։͢Δ ‣ΞΫγϣϯϦϯΫ
オープングラフとは ‣Ϣʔβ͕ΞϓϦ্Ͱߦ༷ͬͨʑͳ ߦಈΛγΣΞ͢ΔΈ ‣ http://developers.facebook.com/docs/ opengraph/
ΫϦοΫͯ͠ ΫʔϙϯΛऔಘ
ςΟοΧʔͳͲͰ γΣΞ
オブジェクトとアクション ‣ʮΫʔϙϯΛऔಘʯ ‣ ΦϒδΣΫτ Ϋʔϙϯ ‣ ΞΫγϣϯ औಘ ‣ ΞϓϦ͝ͱʹҙͰઃఆՄೳ
࣮ࡍӳޠ “get a coupon”
どんなシーンでオープングラフを 活⽤用できるか? ‣ΫʔϙϯΛऔಘ “get a coupon”
どんなシーンでオープングラフを 活⽤用できるか? ‣ΫʔϙϯΛऔಘ ‣ϑΥτίϯςετʹථ “vote for a photo”
どんなシーンでオープングラフを 活⽤用できるか? ‣ΫʔϙϯΛऔಘ ‣ϑΥτίϯςετʹථ ‣ݒͷԠืʁ “enter a present competition” ?
どんなシーンでオープングラフを 活⽤用できるか? ‣ΫʔϙϯΛऔಘ ‣ϑΥτίϯςετʹථ ‣ݒͷԠืʁ Ϣʔβ͕͍͕Γͦ͏ͳͷͰ ͍ͬͯͳ͍
導⼊入に必要なこと ‣ΦϒδΣΫτͱΞΫγϣϯͷఆٛ ‣ΞΫγϣϯͷൃߦॲཧͷ࣮ ‣Ϣʔβ͔ΒڐՄΛಘΔ ‣ΞΫγϣϯͷਃͱঝೝ
オブジェクトとアクションの定義 Φʔϓϯάϥϑ > Getting Started
オブジェクトとアクションの定義 ΞΫγϣϯͷઃఆ
オブジェクトとアクションの定義 ΦϒδΣΫτͷઃఆ
オブジェクトとアクションの定義 ελʔτΛԡͯ͠ొ
アクションのカスタマイズ ‣ςΩετͷΧελϚΠζ ‣ ݱࡏ/աڈɺ୯/ෳ ‣ લஔࢺͷࢦఆ (“vote for”) ‣ΧελϜϓϩύςΟ, etc...
オブジェクトの設定 ‣ΦϒδΣΫτύʔϚϦϯΫΛ࣋ ͍ͬͯͳ͚ΕͳΒͳ͍ ‣ ύʔϚϦϯΫ͕ΦϒδΣΫτͷ࣮ମΛද͢ ‣ http://coupon.crocos.jp/xyz ‣ΦϒδΣΫτͷใOGPͰઃఆ
アクションの発⾏行 ‣ ΞΫγϣϯͷURLʹPOSTϦΫΤετΛૹΔ ‣ /ϢʔβID/ΞϓϦͷ໊લۭؒ:ΞΫγϣϯ ‣ /me/crocos-coupon:get ‣ ΦϒδΣΫτΛύϥϝʔλʹࢦఆ ‣
ΦϒδΣΫτͷύʔϚϦϯΫ ‣ http://coupon.crocos.jp/xyz
実装(Using PHP-SDK) $facebook = new Facebook(...); $facebook->api( ‘/me/crocos-coupon:get’, ‘POST’, [
‘coupon’ => ‘http://coupon.crocos.jp/xyz’, ] );
実装(Using PHP-SDK) $facebook = new Facebook(...); $facebook->api( ‘/me/crocos-coupon:get’, ‘POST’, [
‘coupon’ => ‘http://coupon.crocos.jp/xyz’, ] ); ΞΫγϣϯͷൃߦ
実装(Using PHP-SDK) $facebook = new Facebook(...); $facebook->api( ‘/me/crocos-coupon:get’, ‘POST’, [
‘coupon’ => ‘http://coupon.crocos.jp/xyz’, ] ); POSTϝιου
実装(Using PHP-SDK) $facebook = new Facebook(...); $facebook->api( ‘/me/crocos-coupon:get’, ‘POST’, [
‘coupon’ => ‘http://coupon.crocos.jp/xyz’, ] ); ΦϒδΣΫτΛύϥϝʔλʹࢦఆ
ユーザから許可を得る ‣“publish_actions” ‣ ΞΫγϣϯͷൃߦʹඞཁͳݖݶ publish_actionsΛՃ͢ΔͱݱΕΔ
アクションの申請と承認 ‣ΞΫγϣϯFacebookʹਃͯ͠ ঝೝΛಘͳ͍ͱ։ൃऀҎ֎ʹެ ։͞Εͳ͍ ͡ΊʹGetCode͔ΒμΠΞϩάΛ։͍ͯ ॻ͔Ε͍ͯΔίϚϯυΛ࣮ߦ͓ͯ͘͠
アクションの申請と承認 ‣ΞΫγϣϯFacebookʹਃͯ͠ ঝೝΛಘͳ͍ͱ։ൃऀҎ֎ʹެ ։͞Εͳ͍ ૹ৴Λԡͯ͠ਃ͢Δ
アクションの申請と承認 ΞΫγϣϯͷൃߦखॱΛهड़ͯ͠ଓߦ
申請時のアドバイス ‣࣮ࡍʹFacebookͷਓ͕ΞΫηε͠ ͯ֬ೝͰ͖ΔڥΛ༻ҙ͓ͯ͘͠ ‣ ࣗͷ։ൃڥͰOK ‣ ඞͣಈ࡞֬ೝ͞ΕΔΘ͚Ͱͳ͍ʁ
申請時のアドバイス ‣ΞΫγϣϯ͕ൃޮ͞ΕΔ·Ͱͷख ॱΛ1͔Βॱ൪ʹهड़ ‣ ԡ͢ϘλϯͷςΩετॻ͘ͱ͍͍͔ ‣ ຊޠͰ௨Δ͔ෆ໌…
承認が下りなかったら ‣ཧ༝Λڭ͑ͯ͘ΕΔͷͰɺͯ͠ ͏1ਃ͢Δ ‣ ຊޠ͕ΞϨ͚ͩͲؾʹ͠ͳ͍
許可が下りたら ‣ͦͷͷ͏ͪʹฦ͕͘Δ ‣ΦʔϓϯάϥϑΛͬͯγΣΞ͠ ·͘Ζ͏ʂ
テキストの翻訳 ‣TranslationsΞϓϦ͔Βϝοηʔ δͷ༁͕Մೳ ‣ ϢʔβͷݴޠʹΑͬͯࣗಈతʹΓସΘΔ ‣70ϑϨʔζ/1ΞΫγϣϯ͘Β͍… ‣ਃ͕௨ͬͨ͋ͱʹΔͱ࣮֬
アクションリンク γΣΞ͞ΕͨΞΫγϣϯΛܦ༝ͯ͠ ࣗΞΫγϣϯΛߦ͏Έ
アクションリンクの設定 ͜͜ʹࢦఆͨ͠URLʹ Signed Request͕ඈΜͰ͘Δ
実装(Using PHP-SDK) $sr = $facebook->getSignedRequest(); $object = $sr['objects'][0]['url']; $action =
$sr[‘action_link’][‘type’]; if ($action === ‘crocos-coupon:get’) { // Ϋʔϙϯൃߦॲཧ } return [‘success’ => ‘true’];
‣Crocos Enginnering BlogΛݟ ͍ͯͩ͘͞ʂ ‣ http://engineering.crocos.jp/ ‣͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ まとめ