Movable TypeとFacebookの素敵な関係

２００１年6月25日（土）　 MTDDC Meetup TOKYO 2011 Presented By　Toshihiro Gamo

Presented By　Toshihiro Gamo

••• Presented By　Toshihiro Gamo

•••• Presented By　Toshihiro Gamo

••• … Presented By　Toshihiro Gamo

•• Presented By　Toshihiro Gamo

Movable TypeとFacebookの素敵な関係• 「いいね！」が、「いいね」を呼び共感の輪を広げ、コンバージョンへとつながる仕組みが確⽴された Presented By　Toshihiro Gamo

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

• OGPとはなんでしょう？• OGPは、Facebook、mixi、 GREEなどのSNSと Webページの連携を⾏うために HTMLに記述する決まりごと• 具体的にいえば「このページには何が書かれているのか」をメタ情報に明記したものです Presented By　Toshihiro Gamo

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

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

• 表⽰されるページの情報（タイトル、ページの説明、サムネイル画像等）をメタ情報に記述して指定して任意の情報を伝えることができる• 「いいね！」ボタンを押した⼈の友だちのニュースフィードに情報が表⽰され、共感の輪が広まる Presented By　Toshihiro Gamo

• OGPコードを⼊れた場合と⼊れてない場合で表⽰の違いを⽐較してみましょう• こんな記事を書きました• 「いいね！」ボタンをクリックしてみます Presented By　Toshihiro Gamo

• 上記はOGPコードを⼊れた場合• 下記はOGPコードを⼊れてない場合• OGPコードを⼊れた場合は任意の情報⼊れてない場合はシステム任せ• それでは、OGPを実装してみましょう！ Presented By　Toshihiro Gamo

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

• ジェネレーターを使えば簡単• 「Facebook開発者 Like Button」にアクセス http://developers.facebook.com/ docs/reference/plugins/like/• 「Step 2 - Get Open Graph Tags 」のジェネレーターを利⽤して基本コードを作成※Typeは基本は「blog」を選択 Presented By　Toshihiro Gamo

•<meta property="og:title" content="<$mt:EntryTitle encode_html="1"$> |<$mt:BlogName encode_html="1"$>"><meta property="og:site_name"content="<mt:BlogParentWebsite><$mt:BlogNameencode_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

任意の画像を表示させる方法•<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>"> Presented By　Toshihiro Gamo

Movable TypeとFacebookの素敵な関係• …•••• Presented By　Toshihiro Gamo

• 上記はブログ内の画像を表⽰させた場合• 下記は固定画像を表⽰させた場合• いずれがよいということはない• 利⽤条件で決めること Presented By　Toshihiro Gamo

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

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

• 表⽰されたIDコードをメモしておき、 WebサイトのOGPコードに例のように記述して追記<meta property="fb:app_id" content="210072679020953" /> Presented By　Toshihiro Gamo

• Facebookに関する記述の多くは正確さに乏しく根拠がない• どんなに有名な⼈でも完璧な⼈はいないので、鵜呑みにしちゃだめ！• 事実はFacebookにしかなく何が真実かを知りたいならばFacebookの公式発表を⾒て知るべき Presented By　Toshihiro Gamo

• Facebookの「いいね」ボタンとOGPを組み合わせれば、共感の輪が広がり、FacebookからのPV が何倍にもなる• Facebookページを設置したなら、Webサイトに Like Boxを設置すれば、ファン増加に効果あり• Enjoy! Good Work! Presented By　Toshihiro Gamo

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

•••• Presented By　Toshihiro Gamo

http://www.sixapart.jp	231
http://www.movabletype.jp	137
http://www.dakiny.com	74
http://feeds.feedburner.jp	55
http://www.goodpic.com	15
http://localhost:8888	6
http://feeds.feedburner.com	6
url_unknown	4
http://obur-golestan.somee.com	3
http://webcache.googleusercontent.com	3
http://asobiva.net	3
http://s.deeeki.com	2
http://www.jonbeshsabz.somee.com	2
http://www.slideshare.net	2
http://learning.esdlife.com	2
http://translate.googleusercontent.com	1
http://contact.somee.com	1
http://us-w1.rockmelt.com	1
http://translate.google.com	1
http://paper.li	1
http://portal.unitbv.ro	1

Movable TypeとFacebookの素敵な関係

by Toshihito Gamo on Jun 24, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

21 Embeds 551

Statistics