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
Turing × atmaCup #18 - 1st Place Solution
hakubishin3
0
220
スパイクアクセス対策としての pitchfork 導入
riseshia
0
210
Classmethod_regrowth_2024_tokyo_security_identity_governance_summary
hiashisan
0
810
プロダクトの爆速開発を支える、 「作らない・削る・尖らせる」技術
applism118
10
9.4k
うまくいく! を実現するための質問力 / It works! The Power of Questions to Make It Happen
bitkey
PRO
1
220
実務につなげる数理最適化
recruitengineers
PRO
4
450
Kubernetes環境のオブザーバビリティの次の一歩をOpenTelemetryで実現すると何がどうなるの? - CloudNative Days Winter 2024
katzchang
0
120
alecthomas/kong はいいぞ / kamakura.go#7
fujiwara3
0
180
長年運用されているサービスの主要データ移行をサービス停止せず安全にリリースしました
phayacell
2
210
【AWS re:Invent 2024】Amazon Bedrock アップデート総まとめ
minorun365
PRO
7
710
DevOps視点でAWS re:invent2024の新サービス・アプデを振り返ってみた
oshanqq
0
140
リクルートのデータ基盤 Crois 年3倍成長!1日40,000コンテナの実行を支える AWS 活用とプラットフォームエンジニアリング
recruitengineers
PRO
1
280
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
The Language of Interfaces
destraynor
154
24k
Building Better People: How to give real-time feedback that sticks.
wjessup
365
19k
Building Applications with DynamoDB
mza
91
6.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Documentation Writing (for coders)
carmenintech
65
4.5k
For a Future-Friendly Web
brad_frost
175
9.4k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
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
これを受け取る設定にしておきましょう。
ご清聴 ありがとうございました