Movable TypeとFacebookの素敵な関係

２００１年6月25日（土）　 MTDDC Meetup TOKYO 2011

Presented By　Toshihiro Gamo

•
•
•


•

•

•

•


•
•
•

…


•

•

Movable TypeとFacebookの素敵な関係

• 「いいね！」が、
「いいね」を呼び
共感の輪を広げ、
コンバージョンへと
つながる
仕組みが確⽴された


＿＿＿_
　　／　　　　　＼
… 　／ _ノ　　ヽ__　＼　
「いいね！」ボタンつけたのに　／（○）!i!i（○）＼　
さっぱり効果がでないんだお？ |　　（__人__）　u　 |　
　　　　　　　　＼　　）t-ﾂ　　　／
　　　／￣￣＼　　　　　　　　　　　　　　　　/　　　⌒´　　　＼
　／　　 _ノ＼　（ ;;;;( 　　　　　　　　　　　　　　　　＼＿（__）　　　 i＼(__)
　 |　（ ─）（─) );;;;) 　　　　　　　　　　　　　　　　|　　　　　　　 |
　 |　　（__人__） /;;／
　|　　　ﾉ　l;;,´　OGPの設定してないだろう？
　 |　　　　∩ノ)━・‘　　OGPを設定しなけれりゃダメなんだ。
　／　　　／＿ノ´　　　
(.　＼／／　│
　＼　 “／_＿|　|　　　　　　　
　　＼／＿＿ /　


• 「いいね！」ボタンだけでは、
ボタンを押してくれた⼈の
ウォールだけにしか
リンク情報が表⽰されません
リンク情報を広げるには
Webページに
OGPの実装が必要です


• OGPとはなんでしょう？

• OGPは、Facebook、mixi、
GREEなどのSNSと
Webページの連携を⾏うために
HTMLに記述する決まりごと

• 具体的にいえば「このページには
何が書かれているのか」をメタ情
報に明記したものです


• FacebookにおけるOGPは、
FacebookのOpen Graphを
Webサイトで利⽤するための
決まりごと

• わかりやすく書けばFacebook
のソーシャルプラグインを活⽤
するには、OGPを設定するのが
お約束だよ！ということ
Open Graph protocol - Facebook Developers
http://developers.facebook.com/docs/opengraph/


•

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
<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/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description"
content="A group of U.S. Marines, under command of
a renegade general, take over Alcatraz and
threaten San Francisco Bay with biological
weapons."/>
</head>


• 表⽰されるページの情報（タイ
トル、ページの説明、サムネイ
ル画像等）をメタ情報に記述し
て指定して任意の情報を伝える
ことができる

• 「いいね！」ボタンを押した⼈
の友だちのニュースフィードに
情報が表⽰され、共感の輪が広
まる


• OGPコードを⼊れた場合と
⼊れてない場合で
表⽰の違いを
⽐較してみましょう

• こんな記事を書きました

• 「いいね！」ボタンを
クリックしてみます


• 上記はOGPコードを
⼊れた場合

• 下記はOGPコードを
⼊れてない場合

• OGPコードを⼊れた場合は
任意の情報
⼊れてない場合は
システム任せ

• それでは、OGPを
実装してみましょう！


1. プロフィール画像を⽤意する
縦横３：１以下の⽐率
50px×50px以上
フォーマットはpng, jpg, gif
※50px×50pxでは表⽰されない
場合もある

2. 画像をサーバーの任意の場所に
アップロードする


• ジェネレーターを使えば簡単

• 「Facebook開発者 Like Button」に
アクセス
http://developers.facebook.com/
docs/reference/plugins/like/

• 「Step 2 - Get Open Graph Tags
」のジェネレーターを利⽤して基本
コードを作成

※Typeは基本は「blog」を選択


•

<meta property="og:title" content="<$mt:EntryTitle encode_html="1"$> |
<$mt:BlogName encode_html="1"$>">
<meta property="og:site_name"
content="<mt:BlogParentWebsite><$mt:BlogName
encode_html="1"$></mt:BlogParentWebsite>">
<meta property="og:type" content=“blog" />
<meta property="og:url" content="<$mt:EntryPermalink$>">
<meta property="og:description" content="<$mt:EntryBody words="100"
$>">（※ジェネレータでは作られないが追加を推奨）
<meta property="og:image" content="<$mt:BlogURL$>blogimg/gabs-
ogp.png">
<meta property="fb:admins" content="1008895412" />


任意の画像を表示させる方法

•

<mt:Setvarblock name="ogimage"><mt:EntryAssets sort_order="ascend"
lastn="1"><$mt:AssetURL$></mt:EntryAssets></mt:Setvarblock>
<meta property="og:image" content="<mt:If name='ogimage'><$mt:
Getvar name='ogimage'><mt:Else><$mt:BlogURL$>blogimg/gabs-
ogp.png</mt:If>">


Movable TypeとFacebookの素敵な関係

• …

•

•

•

•


• 上記はブログ内の
画像を表⽰させた場合

• 下記は固定画像を表⽰さ
せた場合

• いずれがよいということ
はない

• 利⽤条件で決めること


…

• Webページ管理⽤の
Facebookページが作られ、
ウォールに記事を投稿すると
「いいね！」を押してくれた
⼈たちに連絡がいく


• Facebook管理者の
「Create an App」で
アプリ登録をおこなう
http://developers.facebook.com
/setup/


• 表⽰されたIDコードを
メモしておき、
WebサイトのOGPコードに
例のように記述して追記

<meta property="fb:app_id" content="210072679020953" />


• Facebookに関する記述の多く
は正確さに乏しく根拠がない

• どんなに有名な⼈でも完璧な
⼈はいないので、鵜呑みにし
ちゃだめ！

• 事実はFacebookにしかなく
何が真実かを知りたいならば
Facebookの公式発表を
⾒て知るべき


• Facebookの「いいね」
ボタンとOGPを組み合わ
せれば、共感の輪が広が
り、FacebookからのPV
が何倍にもなる

• Facebookページを設置
したなら、Webサイトに
Like Boxを設置すれば、
ファン増加に効果あり

• Enjoy! Good Work!


• ⻫藤徹、⽵村詠美、⼤元健志、Giax、メン
バーズ等国内第⼀⼈者が参加
ビジネス、テクノロジー両⾯から⾒た
Facebookの解説書
• 1章はマーケッターたちによるコラム
• 2章はFacebookの開発者ドキュメントに基
づいた
Facebookページの作り⽅
• 3章はソーシャルグラプラグイン＋OGP
Fcebookアプリ
• 4章はトップWebデザイナーたちによる
Facebookページ事例紹介
• これ1冊でFacebookの実装は⼤丈夫


•

•

•

•

Movable TypeとFacebookの素敵な関係

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (14)

Ähnlich wie Movable TypeとFacebookの素敵な関係

Ähnlich wie Movable TypeとFacebookの素敵な関係 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (9)