×Open Graph

@ Facebook Night vol.4by 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 Developershttps://developers.facebook.com/docs/opengraph/

USER + + event.titleattendview

Example for everevo

USER + + pin.titlepinlikecomment

USER + + pinner.titlefollow

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:descriptionUsing 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

５～10分くらいで出来ると思うので、帰ったら是非試してみてください

Facebook Developers の設定から

メール購読設定 （Email Subscription Settings）

Facebook Developers Tips

これを受け取る設定にしておきましょう。

ご清聴ありがとうございました