movable typeとfacebookの素敵な関係

Presented ByPresented By　　Toshihiro Toshihiro GamoGamo

Movable TypeとFacebookの素敵な関係

蒲生トシヒロ２００１年6月25日（土）　 MTDDC Meetup TOKYO 2011


自己紹介


蒲生トシヒロ（Dakiny）

有限会社ITプロフェッショナル代表取締役Webプロデューサー＆プランナー

出自は広告代理店のディレクター兼プランナ。1995年マルチメディア事業部を立ち上げインターネットの世界に入る。1999年に独立、2001年有限会社ITプロフェッショナルを設立し今日に至る。デザインや技術を大切にし自分でも手を動かして確認するタイプ。CMS、HTML、ソーシャルメディアが守備範囲で、その方面に友だちが多い。Movable Typeの宣教師とも言われてます(笑)。トレンドは英語。


今年、関わった書籍

• Facebookページプロフェッショナルガイド（2011年7月9日）• Movable Type 5.1 プロの現場の仕事術（2011年6月30日）• CSS3デザインプロフェッショナルガイド(2011年5月28日)



利用しているソーシャルメディア

• 世界中の1%の人々へhttp://www.dakiny.com

• Twitterhttp://twitter.com/Dakiny

• Facebookページhttp://www.facebook.com/Hippos.JP

• Tumblrhttp://dakiny.tumblr.com/



Facebookを使えば効果あるの？

• PVが上がる！

•売上が上がる！

•人が集まる！

ほんとかな？


提供する記事や商品が本物であり

運営者のリテラシーが高ければ…という条件付きですが、

確実に効果はあります


CAMPFIRE（キャンプファイヤー）におけるFacebook活用例

• うまく活用して効果をあげているCAMPFIREでしくみを説明します

• CAMPFIREhttp://camp-fire.jp/



Facebookは共感の輪を広げる

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



ということで、やる夫がブログに「いいね！」ボタンをつけたようです


　　　／￣￣＼　／　　 _ノ＼　（ ;;;;(　 |　（ ─）（─) );;;;)　 |　　（__人__） /;;／　|　　　ﾉ　l;;,´　OGPの設定してないだろう？

　 |　　　　∩ノ)━・‘　　OGPを設定しなけれりゃダメなんだ。

　／　　　／＿ノ´　　　(.　＼／／　│

　＼　 “／_＿|　|　　　　　　　

　　＼／＿＿ /　

OGPって何？ by やる夫

ところが…　　　　＿＿＿_　　／　　　　　＼

　／ _ノ　　ヽ__　＼　「いいね！」ボタンつけたのに　／（○）!i!i（○）＼　さっぱり効果がでないんだお？ |　　（__人__）　u　 |　

　　　　　　　　＼　　）t-ﾂ　　　／　　　　　　　　　　　　　　　　/　　　⌒´　　　＼　　　　　　　　　　　　　　　　＼＿（__）　　　 i＼(__)　　　　　　　　　　　　　　　　|　　　　　　　 |


「いいね！」ボタン＋OGPでPV向上！

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



OGP(Open Graph protocol)とは？

• OGPとはなんでしょう？

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

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



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/ /



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>



OGPを設定した場合のメリット！

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

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


こうした仕組みがあるから、PV向上に効果がある


OGPの設定あるなしによる表示の違い

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

• こんな記事を書きました• 「いいね！」ボタンを

クリックしてみます



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」を選択



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" />



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

• ブログで利用している画像を表示させる一番簡単な方法、画像がない場合は特定の画像が表示される前述の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>">



URLリンターで確認

• コードを実装したら…

• URLリンターで確認しましょう

• 使い方簡単URLを窓に入れてクリックするだけ

• おかしな点は、URLリンターが教えてくれます

• http://developers.facebook.com/tools/lint/



OGPを利用した場合の表示例

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

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

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

• 利⽤条件で決めること



OGPにApp_IDを追加すると…

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



App_IDの取得方法

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



App_IDの追記

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

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



Facebookを知りたいなら！Facebookを読むべし！

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

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

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


Facebookを知ってるのはこの人だけ


Facebookをうまく活用して成果を！

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

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

• Enjoy! Good Work!



「Facebookページプロフェッショナルガイド」 Amazonにて予約販売中！

• ⻫藤徹、⽵村詠美、⼤元健志、Giax、メンバーズ等国内第⼀⼈者が参加ビジネス、テクノロジー両⾯から⾒たFacebookの解説書

• 1章はマーケッターたちによるコラム• 2章はFacebookの開発者ドキュメントに基

づいたFacebookページの作り⽅

• 3章はソーシャルグラプラグイン＋OGPFcebookアプリ

• 4章はトップWebデザイナーたちによるFacebookページ事例紹介

• これ1冊でFacebookの実装は⼤丈夫



僕とコラボしませんか！

• 人と一緒になにかをするのが大好きです一緒になにかしたい人はまずはソーシャルメディアでつながりませんか？

• Facebookは「蒲生トシヒロ」または「Gamo」で検索すれば出てきますリアルにつきあいたい方はメッセージを添えてリクエストください

• Twitter IDは「Dakiny」ですフォロー希望の方は@Dakinyで連絡ください

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


movable typeとfacebookの 素敵な関係

Technology

facebook

ogp

developers

movable typeとfacebookの素敵な関係