Presented ByPresented By Toshihiro Toshihiro GamoGamo
Movable TypeとFacebookの素敵な関係
蒲生 トシヒロ2001年6月25日(土) MTDDC Meetup TOKYO 2011
Presented ByPresented By Toshihiro Toshihiro GamoGamo
自己紹介
Movable TypeとFacebookの素敵な関係
蒲生トシヒロ(Dakiny)
有限会社ITプロフェッショナル代表取締役Webプロデューサー&プランナー
出自は広告代理店のディレクター兼プランナ。1995年マルチメディア事業部を立ち上げインターネットの世界に入る。1999年に独立、2001年有限会社ITプロフェッショナルを設立し今日に至る。デザインや技術を大切にし自分でも手を動かして確認するタイプ。CMS、HTML、ソーシャルメディアが守備範囲で、その方面に友だちが多い。Movable Typeの宣教師とも言われてます(笑)。トレンドは英語。
Presented ByPresented By Toshihiro Toshihiro GamoGamo
今年、関わった書籍
• Facebookページプロフェッショナルガイド(2011年7月9日)• Movable Type 5.1 プロの現場の仕事術(2011年6月30日)• CSS3デザイン プロフェッショナルガイド(2011年5月28日)
Movable TypeとFacebookの素敵な関係
Presented ByPresented By Toshihiro Toshihiro GamoGamo
利用しているソーシャルメディア
• 世界中の1%の人々へhttp://www.dakiny.com
• Twitterhttp://twitter.com/Dakiny
• Facebookページhttp://www.facebook.com/Hippos.JP
• Tumblrhttp://dakiny.tumblr.com/
Movable TypeとFacebookの素敵な関係
Presented ByPresented By Toshihiro Toshihiro GamoGamo
Facebookを使えば効果あるの?
• PVが上がる!
•売上が上がる!
•人が集まる!
ほんとかな?
Movable TypeとFacebookの素敵な関係
提供する記事や商品が本物であり
運営者のリテラシーが高ければ…という条件付きですが、
確実に効果はあります
Presented ByPresented By Toshihiro Toshihiro GamoGamo
CAMPFIRE(キャンプファイヤー)におけるFacebook活用例
• うまく活用して効果をあげているCAMPFIREでしくみを説明します
• CAMPFIREhttp://camp-fire.jp/
Movable TypeとFacebookの素敵な関係
Presented ByPresented By Toshihiro Toshihiro GamoGamo
Facebookは共感の輪を広げる
• 「いいね!」が、「いいね」を呼び共感の輪を広げ、コンバージョンへとつながる仕組みが確⽴された
Movable TypeとFacebookの素敵な関係
Presented ByPresented By Toshihiro Toshihiro GamoGamo
ということで、やる夫がブログに「いいね!」ボタンをつけたようです
Movable TypeとFacebookの素敵な関係
/ ̄ ̄\ / _ノ\ ( ;;;;( | ( ─)(─) );;;;) | (__人__) /;;/ | ノ l;;,´ OGPの設定してないだろう?
| ∩ノ)━・‘ OGPを設定しなけれりゃダメなんだ。
/ /_ノ´ (. \ // │
\ “/__| |
\/ __ /
OGPって何? by やる夫
ところが… ____ / \
/ _ノ ヽ__ \ 「いいね!」ボタンつけたのに / (○)!i!i(○) \ さっぱり効果がでないんだお? | (__人__) u |
\ )t-ツ / / ⌒´ \ \_(__) i\(__) | |
Presented ByPresented By Toshihiro Toshihiro GamoGamo
「いいね!」ボタン+OGPでPV向上!
• 「いいね!」ボタンだけでは、ボタンを押してくれた⼈のウォールだけにしかリンク情報が表⽰されませんリンク情報を広げるにはWebページにOGPの実装が必要です
Movable TypeとFacebookの素敵な関係
Presented ByPresented By Toshihiro Toshihiro GamoGamo
OGP(Open Graph protocol)とは?
• OGPとはなんでしょう?
• OGPは、Facebook、mixi、GREEなどのSNSとWebページの連携を⾏うためにHTMLに記述する決まりごと
• 具体的にいえば「このページには何が書かれているのか」をメタ情報に明記したものです
Movable TypeとFacebookの素敵な関係
Presented ByPresented By Toshihiro Toshihiro GamoGamo
FacebookにおけるOGPとは?
• FacebookにおけるOGPは、FacebookのOpen GraphをWebサイトで利⽤するための決まりごと
• わかりやすく書けばFacebookのソーシャルプラグインを活⽤するには、OGPを設定するのがお約束だよ!ということ
Open Graph protocol Open Graph protocol -- FacebookFacebook DevelopersDevelopershttp://developers.http://developers.facebookfacebook.com/docs/.com/docs/opengraphopengraph/ /
Movable TypeとFacebookの素敵な関係
Presented ByPresented By Toshihiro Toshihiro GamoGamo
FacebookにおけるOGPの基本コード
• Facebook開発者 Open Graph protocolにある基本コード
<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 ofa renegade general, take over Alcatraz andthreaten San Francisco Bay with biologicalweapons."/>
</head>
Movable TypeとFacebookの素敵な関係
Presented ByPresented By Toshihiro Toshihiro GamoGamo
OGPを設定した場合のメリット!
• 表⽰されるページの情報(タイトル、ページの説明、サムネイル画像等)をメタ情報に記述して指定して任意の情報を伝えることができる
• 「いいね!」ボタンを押した⼈の友だちのニュースフィードに情報が表⽰され、共感の輪が広まる
Movable TypeとFacebookの素敵な関係
こうした仕組みがあるから、PV向上に効果がある
Presented ByPresented By Toshihiro Toshihiro GamoGamo
OGPの設定あるなしによる表示の違い
• OGPコードを⼊れた場合と⼊れてない場合で表⽰の違いを⽐較してみましょう
• こんな記事を書きました• 「いいね!」ボタンを
クリックしてみます
Movable TypeとFacebookの素敵な関係
Presented ByPresented By Toshihiro Toshihiro GamoGamo
OGPの設定あるなしによる表示の違い
• 上記はOGPコードを⼊れた場合
• 下記はOGPコードを⼊れてない場合
• OGPコードを⼊れた場合は任意の情報⼊れてない場合はシステム任せ
• それでは、OGPを実装してみましょう!
Movable TypeとFacebookの素敵な関係
Presented ByPresented By Toshihiro Toshihiro GamoGamo
事前準備:プロフィール画像の設定
1. プロフィール画像を⽤意する縦横3:1以下の⽐率50px×50px以上フォーマットはpng, jpg, gif※50px×50pxでは表⽰されない場合もある
2. 画像をサーバーの任意の場所にアップロードする
Movable TypeとFacebookの素敵な関係
Presented ByPresented By Toshihiro Toshihiro GamoGamo
基本コードの作成
• ジェネレーターを使えば簡単• 「Facebook開発者 Like Button」に
アクセスhttp://developers.facebook.com/docs/reference/plugins/like/
• 「Step 2 - Get Open Graph Tags」のジェネレーターを利⽤して基本コードを作成※Typeは基本は「blog」を選択
Movable TypeとFacebookの素敵な関係
Presented ByPresented By Toshihiro Toshihiro GamoGamo
Movable Typeに埋め込むコード例
• HTML(ブログ記事)(※赤字部分は各自に併せて変更)
<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" />
Movable TypeとFacebookの素敵な関係
Presented ByPresented By Toshihiro Toshihiro GamoGamo
任意の画像を表示させる方法
• ブログで利用している画像を表示させる一番簡単な方法、画像がない場合は特定の画像が表示される前述のog:imageの行を下記のコードに差し替え
記事毎に特定のプロフィール画像を表示させたい場合は、カスタムフィールドを利用してください
<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の素敵な関係
Presented ByPresented By Toshihiro Toshihiro GamoGamo
URLリンターで確認
• コードを実装したら…
• URLリンターで確認しましょう
• 使い方簡単URLを窓に入れてクリックするだけ
• おかしな点は、URLリンターが教えてくれます
• http://developers.facebook.com/tools/lint/
Movable TypeとFacebookの素敵な関係
Presented ByPresented By Toshihiro Toshihiro GamoGamo
OGPを利用した場合の表示例
• 上記はブログ内の画像を表⽰させた場合
• 下記は固定画像を表⽰させた場合
• いずれがよいということはない
• 利⽤条件で決めること
Movable TypeとFacebookの素敵な関係
Presented ByPresented By Toshihiro Toshihiro GamoGamo
OGPにApp_IDを追加すると…
• Webページ管理⽤のFacebookページが作られ、ウォールに記事を投稿すると「いいね!」を押してくれた⼈たちに連絡がいく
Movable TypeとFacebookの素敵な関係
Presented ByPresented By Toshihiro Toshihiro GamoGamo
App_IDの取得方法
• Facebook管理者の「Create an App」でアプリ登録をおこなうhttp://developers.facebook.com/setup/
Movable TypeとFacebookの素敵な関係
Presented ByPresented By Toshihiro Toshihiro GamoGamo
App_IDの追記
• 表⽰されたIDコードをメモしておき、WebサイトのOGPコードに例のように記述して追記
<meta property="fb:app_id" content="210072679020953" />
Movable TypeとFacebookの素敵な関係
Presented ByPresented By Toshihiro Toshihiro GamoGamo
Facebookを知りたいなら!Facebookを読むべし!
• Facebookに関する記述の多くは正確さに乏しく根拠がない
• どんなに有名な⼈でも完璧な⼈はいないので、鵜呑みにしちゃだめ!
• 事実はFacebookにしかなく何が真実かを知りたいならばFacebookの公式発表を⾒て知るべき
Movable TypeとFacebookの素敵な関係
Facebookを知ってるのはこの人だけ
Presented ByPresented By Toshihiro Toshihiro GamoGamo
Facebookをうまく活用して成果を!
• Facebookの「いいね」ボタンとOGPを組み合わせれば、共感の輪が広がり、FacebookからのPVが何倍にもなる
• Facebookページを設置したなら、WebサイトにLike Boxを設置すれば、ファン増加に効果あり
• Enjoy! Good Work!
Movable TypeとFacebookの素敵な関係
Presented ByPresented By Toshihiro Toshihiro GamoGamo
「Facebookページプロフェッショナルガイド」 Amazonにて予約販売中!
• ⻫藤徹、⽵村詠美、⼤元健志、Giax、メンバーズ等国内第⼀⼈者が参加ビジネス、テクノロジー両⾯から⾒たFacebookの解説書
• 1章はマーケッターたちによるコラム• 2章はFacebookの開発者ドキュメントに基
づいたFacebookページの作り⽅
• 3章はソーシャルグラプラグイン+OGPFcebookアプリ
• 4章はトップWebデザイナーたちによるFacebookページ事例紹介
• これ1冊でFacebookの実装は⼤丈夫
Movable TypeとFacebookの素敵な関係
Presented ByPresented By Toshihiro Toshihiro GamoGamo
僕とコラボしませんか!
• 人と一緒になにかをするのが大好きです一緒になにかしたい人はまずはソーシャルメディアでつながりませんか?
• Facebookは「蒲生トシヒロ」または「Gamo」で検索すれば出てきますリアルにつきあいたい方はメッセージを添えてリクエストください
• Twitter IDは「Dakiny」ですフォロー希望の方は@Dakinyで連絡ください
• ご清聴ありがとうございました
Movable TypeとFacebookの素敵な関係
Recommended