Movable TypeとFacebookの 素敵な関係
•
4 likes•1,774 views
2011年6月25日（土） MTDDC Meetup TOKYO 2011のスライド資料
Recommended
Recommended
More Related Content
Viewers also liked
Similar to Movable TypeとFacebookの 素敵な関係
Similar to Movable TypeとFacebookの 素敵な関係 (20)
Recently uploaded
Recently uploaded (10)
Movable TypeとFacebookの 素敵な関係
- 1. ２００１年6月25日（土） MTDDC Meetup TOKYO 2011 Presented By Toshihiro Gamo
- 3. • • • Presented By Toshihiro Gamo
- 4. • • • • Presented By Toshihiro Gamo
- 5. • • • … Presented By Toshihiro Gamo
- 6. • • Presented By Toshihiro Gamo
- 7. Movable TypeとFacebookの素敵な関係 • 「いいね！」が、 「いいね」を呼び 共感の輪を広げ、 コンバージョンへと つながる 仕組みが確⽴された Presented By Toshihiro Gamo
- 8. ＿＿＿_ ／ ＼ … ／ _ノ ヽ__ ＼ 「いいね！」ボタンつけたのに ／ （○）!i!i（○） ＼ さっぱり効果がでないんだお？ | （__人__） u | ＼ ）t-ﾂ ／ ／￣￣＼ / ⌒´ ＼ ／ _ノ＼ （ ;;;;( ＼＿（__） i＼(__) | （ ─）（─) );;;;) | | | （__人__） /;;／ | ﾉ l;;,´ OGPの設定してないだろう？ | ∩ノ)━・‘ OGPを設定しなけれりゃダメなんだ。 ／ ／＿ノ´ (. ＼ ／／ │ ＼ “／_＿| | ＼／ ＿＿ / Presented By Toshihiro Gamo
- 9. • 「いいね！」ボタンだけでは、 ボタンを押してくれた⼈の ウォールだけにしか リンク情報が表⽰されません リンク情報を広げるには Webページに OGPの実装が必要です Presented By Toshihiro Gamo
- 10. • OGPとはなんでしょう？ • OGPは、Facebook、mixi、 GREEなどのSNSと Webページの連携を⾏うために HTMLに記述する決まりごと • 具体的にいえば「このページには 何が書かれているのか」をメタ情 報に明記したものです 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. プロフィール画像を⽤意する 縦横３：１以下の⽐率 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
- 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. Movable TypeとFacebookの素敵な関係 • … • • • • 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
- 25. • Facebookに関する記述の多く は正確さに乏しく根拠がない • どんなに有名な⼈でも完璧な ⼈はいないので、鵜呑みにし ちゃだめ！ • 事実はFacebookにしかなく 何が真実かを知りたいならば Facebookの公式発表を ⾒て知るべき 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