OGPってなんでしょう？
•
1 gefällt mir•1,410 views
2011.06.11 Facebookアプリつくろう会LT資料。「試してみました」的内容になっています。 2012.09にURL Linter(デバッガー)の情報を追記しました。
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (19)
Ähnlich wie OGPってなんでしょう？
Ähnlich wie OGPってなんでしょう？ (20)
OGPってなんでしょう？
- 1. OGPってなんでしょう？ ＠Facebookアプリつくろう会 れれのーと(@rerenote)
- 2. はじめに このスライドは2011年6月11日に開催された 「Facebookアプリつくろう会」での発表内容に 一部内容を加えたものです。 2011年6月時点の情報を元に 作成されていますので情報が古い場合があります。 必ず最新の情報をご確認ください。 このスライドでは 「あんずもじ」を使用しています。 http://www8.plala.or.jp/p_dolce/ れれのーと
- 3. OGPとは？ • Open Graph Protocol • 「いいね！」と深い関係あり ☛ The Open Graph Protocol http://ogp.me/
- 4. 見覚えはありませんか？
- 6. OGPに対応するには？ HTMLのmeta情報として記述します <html lang=“ja” xmlns:og=“http://ogp.me/ns#”> <head> <meta charset=“utf-8” /> <title>サイトタイトル</title> <meta property=“og:title” content=“コンテンツタイトル” /> <meta property=“og:type” content=“コンテンツ種類” /> <meta property=“og:url” content=“サイトURL” /> <meta property=“og:image” content=“画像URL” />
- 7. 付加できる情報 • コンテンツの基本情報 • 連絡先情報1(住所/緯度/経度) • 連絡先情報2(メール/電話番号/FAX) • 音声や動画
- 8. BASIC METADATA • title コンテンツのタイトル • type コンテンツの種類 • image コンテンツのイメージ画像 • url コンテンツのPermalink • description コンテンツの説明 • site_name サイト名
- 9. og:typeについて コンテンツ内容のカテゴリを設定できる • Activity • People • Businesses • Places • Groups • Products & Entertainment • Organizations • Websites
- 10. それでは とっととやってみます
- 11. 用意するもの • Facebookのアカウント ×1 • Webサイト ×1 →今回は3ページから構成されるサイトを 急ごしらえで用意しました
- 12. 1. いいね！ボタンの設置 • サイトを登録し アプリIDを取得
- 13. 1. いいね！ボタンの設置 • Facebookコネクトで ページに設置する コードを取得 ・設置するページのURL ・見た目と機能
- 14. 1. いいね！ボタンの設置 • iframe用と XFBML用の 貼り付け用コードを ゲットします
- 15. あとは貼り付ければOK
- 16. この段階で「いいね！」すると？ もの足りない(´・ω・｀)
- 17. OGP情報を追加します <html lang=“ja” xmlns:og=“http://ogp.me/ns#”> <head> <meta charset=“utf-8” /> <title>rerenoteテストサイト「顔芸」</title> <meta property=“fb:admins” content=“ユーザーID” /> <meta property=“og:title” content=“タイトル” /> <meta property=“og:type” content=“article” /> <meta property=“og:url” content=“ページURL” /> <meta property=“og:site_name” content=“サイト名” /> <meta property=“og:image” content=“画像URL” /> <meta property=“og:description” content=“説明” /> <link rel=“stylesheet” href=“css/base.css” type=“text/css” /> </head>
- 18. じゃ、やってみる
- 20. 「いいね！」すると？ あれ？
- 21. 有効な管理人リストが提供されていません。 「fb:app_id」メタタグ または 「fb:admins」メタタグを使って、 コンマ区切りのリストとして 管理人リストを指定する必要があります。
- 22. 合っているのにどうして？
- 23. 合っているのにエラーが出るよ？ (Facebookの)キャッシュ乙！ というケースが多いです テスト中などコードが安定していない時は キャッシュにくれぐれも注意しましょう
- 24. じゃ、デバッグどうすればいいの？ URL Linterというデバッガーが Facebookから提供されています OGPのタグを設置・変更したら Facebook側でどのように解釈されるか URL Linterで確認するようにしましょう 実行時にキャッシュも クリアしてくれるんだよ ☛ URL Linter https://developers.facebook.com/tools/lint/
- 25. まとめ • 「いいね！」ボタン設置は意外とあっけなく できたよ • OGPも基本中の基本はすぐにできるね • Facebookをターゲットにしている場合は URL Linter(デバッガー)を活用しようね！