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
終了の危機にあった15年続くWebサービスを全力で存続させる - phpcon2024
yositosi
27
23k
[トレノケ雲の会 mod.13] 3回目のre:Inventで気づいたこと -CloudOperationsを添えて-
shintaro_fukatsu
0
110
Yahoo! ズバトクにおけるフロントエンド開発
lycorptech_jp
PRO
0
100
LINEスキマニにおけるフロントエンド開発
lycorptech_jp
PRO
0
340
小学3年生夏休みの自由研究「夏休みに Copilot で遊んでみた」
taichinakamura
0
180
生成AIをより賢く エンジニアのための RAG入門 - Oracle AI Jam Session #20
kutsushitaneko
4
290
ゼロから創る横断SREチーム 挑戦と進化の軌跡
rvirus0817
3
280
20241218_今年はSLI/SLOの導入を頑張ってました!
zepprix
0
100
【re:Invent 2024 アプデ】 Prompt Routing の紹介
champ
0
160
C++26 エラー性動作
faithandbrave
2
820
UI State設計とテスト方針
rmakiyama
3
790
DUSt3R, MASt3R, MASt3R-SfM にみる3D基盤モデル
spatial_ai_network
2
260
Featured
See All Featured
Thoughts on Productivity
jonyablonski
68
4.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Pragmatic Product Professional
lauravandoore
32
6.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Visualization
eitanlees
146
15k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.4k
Optimizing for Happiness
mojombo
376
70k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
The World Runs on Bad Software
bkeepers
PRO
66
11k
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
これを受け取る設定にしておきましょう。
ご清聴 ありがとうございました