外部サイトのＦａｃｅｂｏｏｋ連動

外部サイトのFacebook連動

Arcam & Partners
CTO 小谷博志

自己紹介
株式会社Dream Bridge 代表取締役
株式会社代表取締役CEO

Arcam & Partners CTO

小谷博志

• TIS株式会社（システムインテグレーター）という会社で、システム開発に約8

2006年に独立して株式会社 Dream Bridgeを設立。主にベンチャー企業様
年間携わる。
•
のECサイト構築などをお手伝い。買取28号という中古商品のAmazon出品

2011年に、Arcam & Partnersという会社にCTOとして参加。
管理サイトを運営。
•

アジア × ソーシャルメディア × ポップカルチャー

Page 2 Arcam & Partners 2011/6/12

Facebookアプリ開発の要点

Ｆacebook
ＡＰＩ

FaceBook Facebook
ページアプリ開発アプリ
作成作成

外部サイト
ＦＢ連携


Facebook基本機能のおさらい
近況の更新情報
写真や動画の更新情報
基本データの更新情報

• ニュースフィード facebookページ
友達が感心を持ったフィードや

友達が新たにフォローしたユーザー
ユーザー自身や友達の投稿が時系列で表示される
面白い出来事を伝えたい！

• ウォール
写真を見せたい！
お気に入りの記事を紹介したい！
お気に入りの店を紹介したい！
お気に入りの動画を見せたい！
ユーザー自身の近況・写真・リンクの表示場所 ⇒ 大勢に配信するためのもの
⇒特定の人へは、メッセージで。

• Ｆａｃｅｂｏｏｋページ
ファンとコミュニケーションをとる
企業や個人が独自の情報を発信するページファン同士のつながりができる
応対記録が公開されるため、新規フ
ァンの獲得が効率よくなる
リピーター率が向上する
商品の更新情報などが送れる


アプリの利用（RSSとの連携）
• RSS Graffiti というFacebookアプリがオス
スメ
課題

***」といった広告が配信される・・・
・アメブロなどのブログを利用していると「PR:

・特定の記事だけ、Facebookに配信したい。
・特定の記事は、ブロックしたい・・・

Yahoo! Pipes を利用しましょう


Yahoo! Pipes
デモ

Facebookアカウントでロ
グインできます。

http://pipes.yahoo.com/

例えば、こんなことができます。
• 特定の文字列を含むタイトルのフィードをブロック
• 特定の文字列を含むカテゴリのフィードを出力
• 特定の文字列を含むカテゴリのフィードをブロッ
ク
• 日本語のフィードを英語に翻訳してフィードを出
力


その他のアプリの利用
• ＥＣサイトのデータを表示
• ＲＳＳフィードの内容を表示
• アンケートアプリ
• スライドショーの表示

など


Facebook API
分類名称
Core Concept Graph API
何に利用できる？ Social Plugins
Authentication
• ニュースフィード Open Graph Protocol

• Facebookページ Advanced API FQL
Internationalization API
• グループ Ads API
Chat API
• 「いいね！」ボタン SDK JavaScript SDK

• アプリ iOS SDK
Android SDK
PHP SDK
Python SDK


Graph APIのデータ確認
デモ

Usernameの部分は、
Idを指定しても同じ
結果になります

https://graph.facebook.com/hiroshi.kotani
↓表示される情報 JSONというデータ形式になりま
{
Facebookアプリとは、このよう
す。
"id": "100001945504103",
"name": "Hiroshi Kotani",
に特定のアドレスにアクセスし
"first_name": "Hiroshi",
て情報を取得し、加工して表示
"last_name": "Kotani",
するものです。
"link": "http://www.facebook.com/hiroshi.kotani",
"username": "hiroshi.kotani",
"gender": "male",
"locale": "ja_JP"
}

https://graph.facebook.com/hiroshi.kotani/feed
公開範囲を全てに設定していれば、以下のURLでユーザのフィードを取得可能


Facebook API まとめ
• Graph APIにHTTPリクエストを行うことによりFacebookに
アクセスできる
• Facebookでの操作は、このAPIを使って情報の取得、及
び書き込みや編集を行いコンテンツを作っていく作業
• Facebookと連携したアプリの作成には、大きく二つある
Facebookアプリ apps.facebook.comドメイン以下のＵＲＬが与えられ、
Facebook内部のフレームに描画

Facebook連携サイト認証などの機能にFacebookの機能を用いる
ソーシャルグラフにアクセスする
「いいね！」ボタンの設置など


Social Plugins

• いいね！ボタン
• Likeボックス
• コメント

などなど


デモ
「シェア」ボタン
2011年2月末に「いいね！」ボタンに「シェア」ボタンの機能を追加。

<a name="fb_share" type="button_count" share_url="http://xxxxxx.com/"
href="http://www.facebook.com/sharer.php">Share</a> <script
src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript"></script>

いいね！にコメント機能の追加。このため、シェアボタンのプラグイン提供を停止
純粋ないいね！の数だけでなく、コメント（シェア）数も合計されていいね！数が
決まる。
コメントが、ポップアップで画面になるのでシェアボタンの方がコメントをもらいや
すい
Facebook内へのフィードに制限がない！（いいね！ボタンも送信ボタンがついた
ので同じ効果がある）


Open Graph Protocol （OGP）
• OGPって何？

HTMLの追加情報
ウェブページに何が書いてあるか教えるための

• 何が出来る？
「いいね！」ボタンや、「シェア」をされるときに、
リンクテキストや画像、ページの内容などを指定

• Facebookだけの規格？
できます。

Facebookはもとより、mixiやgreeなども有効。


OGPのサンプル
<html xmlns:og="http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

タグの補足説明
og:type ⇒ Facebookページのタイプと同義
fb:amins ⇒ FBの管理者ID
fb:page_id ⇒ FBの管理用ページID
fb:app_id ⇒ FBの管理用アプリケーションID


OGPのタグの内容確認デモ

• URLリンターでチェック
表示例（OGP未対応サイト）
表示例（未対応サイト）
表示例（OGP対応済みサイト）
表示例（対応済みサイト）


ワンランク上のカスタマイズ
• Facebook APIを利用して、Facebookアカ
ウントでの自社サイトへのログイン
• SDKを利用したカスタマイズ
• サードパーティのアプリの利用
• 海外事例
The NEXT WEB
Levi’s Friend Store


デモ
プロモーション
• コンテスト
事前承諾がいらなくなった替りにアプリを用意する必要
がある
• セルフブランディング
Uniqlooks や、artofthetrench(バーバリー)とかの成功
事例を参考
• クーポン・共同購入
グルーポン系サイトや、Facebookクーポンの利用
ファン専用の独自クーポン発行

規約等には要注意！プロモーションガイドラインの確認
をしてください！


弊社のカスタマイズ事例紹介
デモ

• マウスコンピュータ
いいね！の数だけ値引き
• アーカムブックス
OGP、ソーシャルプラグイン
• EC-CUBE クラウドサーバ専用アプリ
ファーストサーバ様のEC-CUBEクラウドサーバ
環境で動作するEC-CUBE連動型アプリ


お勧め書籍のご紹介
• 熊坂氏の第二弾の書籍！
（6/10発売）
• 日本国内の事例が満載！
（弊社の管理するページも載ってますｗ）

• 実際にコンテンツを作る際
の具体的な方法が多彩に
載ってます。
• 6/7に、開始されたばかりの
Facebookチケットにも言及
（たぶん日本語本では、この書籍だけ！）


ご清聴ありがとうございました
Facebook hiroshi.kotani@facebook.com

Facebookセ Arcam & Partners
ミナーを各
地方で開催 http://aandp.jp
しております。ドリームブリッジ
ECサイト構 http://www.dreambridge.co.jp
築、リユース
買取28号
http://www.kaitori28.jp
商材の販売
支援しており
ます。


外部サイトのＦａｃｅｂｏｏｋ連動

Recommended

Recommended

More Related Content

Similar to 外部サイトのＦａｃｅｂｏｏｋ連動

Similar to 外部サイトのＦａｃｅｂｏｏｋ連動 (20)

Recently uploaded

Recently uploaded (12)

外部サイトのＦａｃｅｂｏｏｋ連動