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
everevo × Open Graph
Search
Tetsuwo OISHI
August 29, 2012
Technology
1
100
everevo × Open Graph
Facebook Night vol.4 での 10 分間の Lightning Talk で発表した内容です。
初の登壇だったため、色々クオリティが低いです。
Tetsuwo OISHI
August 29, 2012
Tweet
Share
Other Decks in Technology
See All in Technology
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
310
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
220
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
170
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
3
190
Wasmのエコシステムを使った ツール作成方法
askua
0
120
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
200
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
240
社内お問い合わせBotの仕組みと学び
nish01
1
540
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
270
The Cake Is a Lie... And So Is Your Login’s Accessibility
leichteckig
0
110
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
370
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
140
Featured
See All Featured
Music & Morning Musume
bryan
46
6.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Thoughts on Productivity
jonyablonski
70
4.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
What's in a price? How to price your products and services
michaelherold
246
12k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Rails Girls Zürich Keynote
gr2m
95
14k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Pragmatic Product Professional
lauravandoore
36
6.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
860
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
We Have a Design System, Now What?
morganepeng
53
7.8k
Transcript
× Open Graph @ Facebook Night vol.4 by Tetsuwo OISHI
Netsket Inc. - CTO
目次 1. Netsket Inc. ? 2. everevo ? 3. Open
Graph ACTION + OBJECT 4. JavaScript のみで Open Graph アプリを作る 5. Facebook Developers Tips
Netsket Inc. ?
ネットの助っ人 • 受託開発 • 6名(内5名エンジニア) そんな Netsket ですが...
受託開発を止める宣言 弊社社長 芥川 武 2011年2月
続きは WEB で !!! Netsket 検索 www.netsket.com
?
Event Revolution ... Eve...? Revo...? ...?
!!!
• イベントの告知ページ作成 • 告知ページへの集客 • チケット販売・管理 • 参加者管理(連絡など) • フォローした人の主催・参加する
イベント情報を受け取る Social Ti cketing Service
イベントの成長プロセスも含め サポートするイベントサービス everevo は何を目指すのか?
続きは WEB で !!! everevo 検索 everevo.com
Open Graph ACTION + OBJECT
like http://~ USER "Open Graph" Before Update
"Open Graph" After Update Source : Open Graph - Facebook
Developers https://developers.facebook.com/docs/opengraph/
USER + + event.title attend view Example for everevo
USER + + pin.title pin like comment USER + +
pinner.title follow Example for Pinterest
まあ言葉で説明しても アレなので。
JavaScript のみで とりあえず動く Open Graph アプリを 作ってみましょう (作業時間5~10分)
流れ 1. どんなアプリにするか 2. アプリ新規登録 3. 基本設定 / 認証ダイアログ設定 /
詳細設定 4. Action / Object / Aggregations 設定 5. HTML / JavaScript コーディング 6. 確認
どんなアプリにするか アプリ名 Test Sound アプリ名前空間 test-sound ACTION listen OBJECT music
音楽系のアプリと仮定して...
App > Create New App
App > Settings > Auth Dialog User & Friend Permissions
に publish_actions を 入力してください。
App > Settings > Advanced (1) Action は本番アプリで使用する場合、審査を通ら なければ使えません。しかし、Sandbox Mode
を "有効" することで使うことができます。
App > Settings > Advanced (2) Enhanced Auth Dialog を
"有効" します。
App > Open Graph > Getting Started
App > Open Graph > Action Type: Listen Caption には
OGP のプロパティが使用できます。 {music.description} = og:description Using Text Template : https://developers.facebook.com/docs/opengraph/template/
HTML を貼り付ける Open Graph ダッシュボードから対象オブジェクト の "Get Code" をクリックすると上記のダイアログ が出現します。
JavaScript からアクションを投稿 Facebook JavaScript SDK FB.api( '/me/test-sound:listen', 'post', { music:
location.href }, function (response) { console.log(response); } );
動かしてみると... こんな感じになれば OK です。あとはご自身の Web サービスでどのように組み込むかを考えれば 実装自体はそこまで難しくありません。
ブログでもほぼ同じ内容を公開してます http://j.mp/everevo-opengraph 5~10分くらいで出来ると思うので、 帰ったら是非試してみてください
Facebook Developers の設定から メール購読設定 (Email Subscription Settings) Facebook Developers Tips
これを受け取る設定にしておきましょう。
ご清聴 ありがとうございました