FacebookのOGPをページ内で確認するブックマークレット(雑)

このエントリーをはてなブックマークに追加

FacebookのOGPをページ内で確認するブックマークレット(雑) FacebookのOGPを簡単に確認するためのChrome拡張作ったよー : 異聞録 @ikkoとかでブックマークレットやFirefoxアドオン、ChromeエクステンションなどFacebookのOGPを確認できるものが紹介されていました。
ただ、デバッガーページに飛ばされるのがなんともだったので、ページ内でざっくり確認できるようにしたブックマークレットを作りました。

例えばMACHI Café×アーティストコラボタンブラーで適用してみると下記のようにページ内の左上にFacebook内で表示されるような感じで乗っかってきます。

ちなみにサンプルのページ内は下記のようなソースです。 <meta property="og:site_name" content="MACHI Cafe'×アーティストコラボタンブラー">
<meta property="og:title" content="MACHI Cafe'×アーティストコラボタンブラー">
<meta property="og:type" content="website">
<meta property="og:description" content="あなたのマチが、どこでも、カフェになる。有名アーティストがデザインしたマチカフェタンブラーを数量限定販売。">
<meta property="og:image" content="http://machicafe.lawson.jp/images/common/ogimg.jpg">
<meta property="og:url" content="http://machicafe.lawson.jp/">

ここからog:site_name、og:title、og:description、og:image、og:urlを取ってきて表示しています。

やっているのは単純にjQueryなので
$("meta[property='og:url']").attr("content");
とかで持ってきた値を表示させただけです。

値がない時はundefinedのままなど、かなり雑ですがざっくり確認するようにいかがでしょうか。
下記をドラッグしてご利用ください。

OpenGraph Check

sponsors

コメントする

記事作成:
記事URL:

TOP > > > FacebookのOGPをページ内で確認するブックマークレット(雑)