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
Katsuhiro Ogawa
August 29, 2012
Programming
3
7.5k
オープングラフを導入しよう
at Facebook Night Vol.9
Katsuhiro Ogawa
August 29, 2012
Tweet
Share
More Decks by Katsuhiro Ogawa
See All by Katsuhiro Ogawa
新規プロダクト開発に伴う既存マイクロサービスのリアーキテクティングとその後
fivestar
1
150
Goで学ぶSOLID原則
fivestar
0
410
メルカリ CSE チームの 歩みと取り組み / Steps and Tries in the CSE team for Mercari
fivestar
2
960
Go in Corporate Solutions Engineering
fivestar
0
2.6k
いつまでPHP 5.x使ってるの
fivestar
1
2k
PHP のドキュメントを読んで PHP のことをもっと知ろう
fivestar
1
3.3k
CrocosSecurityBundleを Symfony3.0に対応した話
fivestar
0
300
PHP BLT だけど HTML5 の コンテンツモデルのお話
fivestar
0
2.4k
THE NEW "PERFECT PHP" WILL BE COMING SOON
fivestar
0
8.1k
Other Decks in Programming
See All in Programming
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
ahuglajbclajep
4
680
Go コードベースの構成と AI コンテキスト定義
andpad
0
160
20251212 AI 時代的 Legacy Code 營救術 2025 WebConf
mouson
0
240
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
himorishige
11
4.9k
はじめてのカスタムエージェント【GitHub Copilot Agent Mode編】
satoshi256kbyte
0
160
dchart: charts from deck markup
ajstarks
3
950
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
heimusu
6
2.3k
大規模Cloud Native環境におけるFalcoの運用
owlinux1000
0
250
TestingOsaka6_Ozono
o3
0
270
これならできる!個人開発のすゝめ
tinykitten
PRO
0
150
実はマルチモーダルだった。ブラウザの組み込みAI🧠でWebの未来を感じてみよう #jsfes #gemini
n0bisuke2
3
1.4k
ゲームの物理 剛体編
fadis
0
400
Featured
See All Featured
The SEO Collaboration Effect
kristinabergwall1
0
330
First, design no harm
axbom
PRO
2
1.1k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
420
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
54
49k
Prompt Engineering for Job Search
mfonobong
0
140
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
140
The Cost Of JavaScript in 2023
addyosmani
55
9.4k
Stewardship and Sustainability of Urban and Community Forests
pwiseman
0
94
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
From π to Pie charts
rasagy
0
100
Rebuilding a faster, lazier Slack
samanthasiow
85
9.3k
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
49
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/ ‣͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ まとめ