Mais conteúdo relacionado Semelhante a Movable TypeとFacebookの 素敵な関係 (20) Movable TypeとFacebookの 素敵な関係3. •
•
•
Presented By Toshihiro Gamo
4. •
•
•
•
Presented By Toshihiro Gamo
5. •
•
•
…
Presented By Toshihiro Gamo
6. •
•
Presented By Toshihiro Gamo
8. ____
/ \
… / _ノ ヽ__ \
「いいね!」ボタンつけたのに / (○)!i!i(○) \
さっぱり効果がでないんだお? | (__人__) u |
\ )t-ツ /
/ ̄ ̄\ / ⌒´ \
/ _ノ\ ( ;;;;( \_(__) i\(__)
| ( ─)(─) );;;;) | |
| (__人__) /;;/
| ノ l;;,´ OGPの設定してないだろう?
| ∩ノ)━・‘ OGPを設定しなけれりゃダメなんだ。
/ /_ノ´
(. \ // │
\ “/__| |
\/ __ /
Presented By Toshihiro Gamo
11. • FacebookにおけるOGPは、
FacebookのOpen Graphを
Webサイトで利⽤するための
決まりごと
• わかりやすく書けばFacebook
のソーシャルプラグインを活⽤
するには、OGPを設定するのが
お約束だよ!ということ
Open Graph protocol - Facebook Developers
http://developers.facebook.com/docs/opengraph/
Presented By Toshihiro Gamo
12. •
<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>
Presented By Toshihiro Gamo
13. • 表⽰されるページの情報(タイ
トル、ページの説明、サムネイ
ル画像等)をメタ情報に記述し
て指定して任意の情報を伝える
ことができる
• 「いいね!」ボタンを押した⼈
の友だちのニュースフィードに
情報が表⽰され、共感の輪が広
まる
Presented By Toshihiro Gamo
14. • OGPコードを⼊れた場合と
⼊れてない場合で
表⽰の違いを
⽐較してみましょう
• こんな記事を書きました
• 「いいね!」ボタンを
クリックしてみます
Presented By Toshihiro Gamo
15. • 上記はOGPコードを
⼊れた場合
• 下記はOGPコードを
⼊れてない場合
• OGPコードを⼊れた場合は
任意の情報
⼊れてない場合は
システム任せ
• それでは、OGPを
実装してみましょう!
Presented By Toshihiro Gamo
16. 1. プロフィール画像を⽤意する
縦横3:1以下の⽐率
50px×50px以上
フォーマットはpng, jpg, gif
※50px×50pxでは表⽰されない
場合もある
2. 画像をサーバーの任意の場所に
アップロードする
Presented By Toshihiro Gamo
17. • ジェネレーターを使えば簡単
• 「Facebook開発者 Like Button」に
アクセス
http://developers.facebook.com/
docs/reference/plugins/like/
• 「Step 2 - Get Open Graph Tags
」のジェネレーターを利⽤して基本
コードを作成
※Typeは基本は「blog」を選択
Presented By Toshihiro Gamo
18. •
<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" />
Presented By Toshihiro Gamo
21. • 上記はブログ内の
画像を表⽰させた場合
• 下記は固定画像を表⽰さ
せた場合
• いずれがよいということ
はない
• 利⽤条件で決めること
Presented By Toshihiro Gamo
22. …
• Webページ管理⽤の
Facebookページが作られ、
ウォールに記事を投稿すると
「いいね!」を押してくれた
⼈たちに連絡がいく
Presented By Toshihiro Gamo
23. • Facebook管理者の
「Create an App」で
アプリ登録をおこなう
http://developers.facebook.com
/setup/
Presented By Toshihiro Gamo
24. • 表⽰されたIDコードを
メモしておき、
WebサイトのOGPコードに
例のように記述して追記
<meta property="fb:app_id" content="210072679020953" />
Presented By Toshihiro Gamo
26. • Facebookの「いいね」
ボタンとOGPを組み合わ
せれば、共感の輪が広が
り、FacebookからのPV
が何倍にもなる
• Facebookページを設置
したなら、Webサイトに
Like Boxを設置すれば、
ファン増加に効果あり
• Enjoy! Good Work!
Presented By Toshihiro Gamo
27. • ⻫藤徹、⽵村詠美、⼤元健志、Giax、メン
バーズ等国内第⼀⼈者が参加
ビジネス、テクノロジー両⾯から⾒た
Facebookの解説書
• 1章はマーケッターたちによるコラム
• 2章はFacebookの開発者ドキュメントに基
づいた
Facebookページの作り⽅
• 3章はソーシャルグラプラグイン+OGP
Fcebookアプリ
• 4章はトップWebデザイナーたちによる
Facebookページ事例紹介
• これ1冊でFacebookの実装は⼤丈夫
Presented By Toshihiro Gamo
28. •
•
•
•
Presented By Toshihiro Gamo