2001年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 G...
                     ____                                       /     \       …                             / _ノ  ヽ__ \   ...
• 「いいね!」ボタンだけでは、ボタンを押してくれた⼈のウォールだけにしかリンク情報が表⽰されませんリンク情報を広げるにはWebページにOGPの実装が必要です                   Presented By Toshihiro G...
• OGPとはなんでしょう?• OGPは、Facebook、mixi、 GREEなどのSNSと Webページの連携を⾏うために HTMLに記述する決まりごと• 具体的にいえば「このページには 何が書かれているのか」をメタ情 報に明記したものです...
• FacebookにおけるOGPは、 FacebookのOpen Graphを Webサイトで利⽤するための 決まりごと• わかりやすく書けばFacebook のソーシャルプラグインを活⽤ するには、OGPを設定するのが お約束だよ!というこ...
•<html xmlns="http://www.w3.org/1999/xhtml"   xmlns:og="http://ogp.me/ns#"   xmlns:fb="http://www.facebook.com/2008/fbml">...
• 表⽰されるページの情報(タイ  トル、ページの説明、サムネイ  ル画像等)をメタ情報に記述し  て指定して任意の情報を伝える  ことができる• 「いいね!」ボタンを押した⼈  の友だちのニュースフィードに  情報が表⽰され、共感の輪が広  ...
• OGPコードを⼊れた場合と  ⼊れてない場合で  表⽰の違いを  ⽐較してみましょう• こんな記事を書きました• 「いいね!」ボタンを  クリックしてみます                  Presented By Toshihiro G...
• 上記はOGPコードを  ⼊れた場合• 下記はOGPコードを  ⼊れてない場合• OGPコードを⼊れた場合は  任意の情報  ⼊れてない場合は  システム任せ• それでは、OGPを  実装してみましょう!                  P...
1. プロフィール画像を⽤意する   縦横3:1以下の⽐率   50px×50px以上   フォーマットはpng, jpg, gif   ※50px×50pxでは表⽰されない   場合もある2. 画像をサーバーの任意の場所に   アップロードす...
• ジェネレーターを使えば簡単• 「Facebook開発者 Like Button」に  アクセス  http://developers.facebook.com/  docs/reference/plugins/like/• 「Step 2 ...
•<meta property="og:title" content="<$mt:EntryTitle encode_html="1"$> |<$mt:BlogName encode_html="1"$>"><meta property="og...
任意の画像を表示させる方法•<mt:Setvarblock name="ogimage"><mt:EntryAssets sort_order="ascend"lastn="1"><$mt:AssetURL$></mt:EntryAssets>...
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/                                   P...
• 表⽰されたIDコードを  メモしておき、  WebサイトのOGPコードに  例のように記述して追記<meta property="fb:app_id" content="210072679020953" />                ...
• Facebookに関する記述の多くは正確さに乏しく根拠がない• どんなに有名な⼈でも完璧な⼈はいないので、鵜呑みにしちゃだめ!• 事実はFacebookにしかなく何が真実かを知りたいならばFacebookの公式発表を⾒て知るべき      ...
• Facebookの「いいね」 ボタンとOGPを組み合わ せれば、共感の輪が広が り、FacebookからのPV が何倍にもなる• Facebookページを設置 したなら、Webサイトに Like Boxを設置すれば、 ファン増加に効果あり•...
• ⻫藤徹、⽵村詠美、⼤元健志、Giax、メン  バーズ等国内第⼀⼈者が参加  ビジネス、テクノロジー両⾯から⾒た  Facebookの解説書• 1章はマーケッターたちによるコラム• 2章はFacebookの開発者ドキュメントに基  づいた  ...
••••    Presented By Toshihiro Gamo
Upcoming SlideShare
Loading in...5
×

Movable TypeとFacebookの 素敵な関係

6,961

Published on

2011年6月25日(土) MTDDC Meetup TOKYO 2011のスライド資料

Published in: Technology, Art & Photos
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,961
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
21
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Movable TypeとFacebookの 素敵な関係

  1. 1. 2001年6月25日(土)  MTDDC Meetup TOKYO 2011 Presented By Toshihiro Gamo
  2. 2. Presented By Toshihiro Gamo
  3. 3. ••• Presented By Toshihiro Gamo
  4. 4. •••• Presented By Toshihiro Gamo
  5. 5. ••• … Presented By Toshihiro Gamo
  6. 6. •• Presented By Toshihiro Gamo
  7. 7. Movable TypeとFacebookの素敵な関係• 「いいね!」が、「いいね」を呼び共感の輪を広げ、コンバージョンへとつながる仕組みが確⽴された Presented By Toshihiro Gamo
  8. 8.      ____    /     \ …   / _ノ  ヽ__ \  「いいね!」ボタンつけたのに / (○)!i!i(○) \  さっぱり効果がでないんだお? |   (__人__)  u  |           \   )t-ツ   /   / ̄ ̄\                 /   ⌒´    \  /   _ノ\ ( ;;;;(                 \_(__)    i\(__)  | ( ─)(─) );;;;)                  |        |  |  (__人__) /;;/  |    ノ l;;,´ OGPの設定してないだろう?  |    ∩ノ)━・‘  OGPを設定しなけれりゃダメなんだ。 /    /_ノ´    (.  \ //  │ \  “/__| |         \/ __ /  Presented By Toshihiro Gamo
  9. 9. • 「いいね!」ボタンだけでは、ボタンを押してくれた⼈のウォールだけにしかリンク情報が表⽰されませんリンク情報を広げるにはWebページにOGPの実装が必要です Presented By Toshihiro Gamo
  10. 10. • OGPとはなんでしょう?• OGPは、Facebook、mixi、 GREEなどのSNSと Webページの連携を⾏うために HTMLに記述する決まりごと• 具体的にいえば「このページには 何が書かれているのか」をメタ情 報に明記したものです Presented By Toshihiro Gamo
  11. 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. 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. 13. • 表⽰されるページの情報(タイ トル、ページの説明、サムネイ ル画像等)をメタ情報に記述し て指定して任意の情報を伝える ことができる• 「いいね!」ボタンを押した⼈ の友だちのニュースフィードに 情報が表⽰され、共感の輪が広 まる Presented By Toshihiro Gamo
  14. 14. • OGPコードを⼊れた場合と ⼊れてない場合で 表⽰の違いを ⽐較してみましょう• こんな記事を書きました• 「いいね!」ボタンを クリックしてみます Presented By Toshihiro Gamo
  15. 15. • 上記はOGPコードを ⼊れた場合• 下記はOGPコードを ⼊れてない場合• OGPコードを⼊れた場合は 任意の情報 ⼊れてない場合は システム任せ• それでは、OGPを 実装してみましょう! Presented By Toshihiro Gamo
  16. 16. 1. プロフィール画像を⽤意する 縦横3:1以下の⽐率 50px×50px以上 フォーマットはpng, jpg, gif ※50px×50pxでは表⽰されない 場合もある2. 画像をサーバーの任意の場所に アップロードする Presented By Toshihiro Gamo
  17. 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. 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: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
  19. 19. 任意の画像を表示させる方法•<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
  20. 20. Movable TypeとFacebookの素敵な関係• …•••• Presented By Toshihiro Gamo
  21. 21. • 上記はブログ内の 画像を表⽰させた場合• 下記は固定画像を表⽰さ せた場合• いずれがよいということ はない• 利⽤条件で決めること Presented By Toshihiro Gamo
  22. 22. …• Webページ管理⽤の Facebookページが作られ、 ウォールに記事を投稿すると 「いいね!」を押してくれた ⼈たちに連絡がいく Presented By Toshihiro Gamo
  23. 23. • Facebook管理者の 「Create an App」で アプリ登録をおこなう http://developers.facebook.com /setup/ Presented By Toshihiro Gamo
  24. 24. • 表⽰されたIDコードを メモしておき、 WebサイトのOGPコードに 例のように記述して追記<meta property="fb:app_id" content="210072679020953" /> Presented By Toshihiro Gamo
  25. 25. • Facebookに関する記述の多くは正確さに乏しく根拠がない• どんなに有名な⼈でも完璧な⼈はいないので、鵜呑みにしちゃだめ!• 事実はFacebookにしかなく何が真実かを知りたいならばFacebookの公式発表を⾒て知るべき Presented By Toshihiro Gamo
  26. 26. • Facebookの「いいね」 ボタンとOGPを組み合わ せれば、共感の輪が広が り、FacebookからのPV が何倍にもなる• Facebookページを設置 したなら、Webサイトに Like Boxを設置すれば、 ファン増加に効果あり• Enjoy! Good Work! Presented By Toshihiro Gamo
  27. 27. • ⻫藤徹、⽵村詠美、⼤元健志、Giax、メン バーズ等国内第⼀⼈者が参加 ビジネス、テクノロジー両⾯から⾒た Facebookの解説書• 1章はマーケッターたちによるコラム• 2章はFacebookの開発者ドキュメントに基 づいた Facebookページの作り⽅• 3章はソーシャルグラプラグイン+OGP Fcebookアプリ• 4章はトップWebデザイナーたちによる Facebookページ事例紹介• これ1冊でFacebookの実装は⼤丈夫 Presented By Toshihiro Gamo
  28. 28. •••• Presented By Toshihiro Gamo
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×