[勇み足]ShareHtmlのサムネイル画像を自動でog:imageにするカスタマイズ[WordPress]

ShareHtml ×og:image
スポンサーリンク

ShareHtml ×og:image
サムネイル付のわかりやすいリンクを作成することができる、ShareHtmlというブックマークレットがあります。
使っているブロガーさんも多いですよね。

ShareHtmlとFocusHtmlもリニューアルしました♪ | 普通のサラリーマンのiPhone日記

そんな、ShareHtmlですが、デフォルトだとサイト自体のスクリーンショットをサムネイルになります。

「でーじてとこん」の、てとこんさんが、自分のサイトへのリンクを貼る場合に、WordPressのアイキャッチ画像を表示できるように改造していました。

ShareHtmlのサムネイル画像が自動でアイキャッチ画像になる様に改造しました。簡単!ほぼコピペでできます![WordPress]
でーじてとこん

サイト全体のスクリーンショットよりも、記事のアイキャッチ画像の方がよりリンク先のイメージが湧きやすく、とてもいいですよね。

ただし、これが機能するのは自分の記事にリンクを貼る場合に限られます。

このブログもWordPressをつかっていますので、てとこんさんの改造にヒントを得て、他のサイトへのリンクの場合も同じようなことができないか、ぼくも改造してみました。
そこそこうまく行っている気がするので、手順を紹介しますね。

1.OpenGraph.phpを準備

OGPを超簡単にパース可能なPHPスクリプト OpenGraph.php-ITかあさん

上記記事で紹介されていた、OpenGraph.phpを使います。
ダウンロードは、以下より。

opengraph/OpenGraph.php at master · scottmac/opengraph · GitHub

上記ページのコードをコピーまたは、ダウンロードします。

002
そして、自分のWordPressで使っているテーマフォルダの中に、「OpenGraph.php」という名前で置きましょう。

2.functions.phpに追記

次に、同じくテーマフォルダの中にある、functions.phpに以下のコードを追記します。

003
//外部サイトのOG:image取得するショートコード
function get_ogimage($atts, $ogimage_url = null ){
	//OGPを簡単パースするOpenGraphを読み込み
	require_once('OpenGraph.php');
	//og:imageを取得するURLを指定
	$graph = OpenGraph::fetch($ogimage_url);
	//取得したog:imageを出力
	return($graph->image);
}
add_shortcode('og_image', 'get_ogimage');

3.ShareHtmlをカスタマイズ

そして、ShareHtmlで使用しているコードの画像を出力している部分をカスタマイズします。
004

imgタグのsrc属性にある「${posturl}」を[og_image][/og_image]という文字ではさんであげます。
※表示のため全角にしていますが[]は半角にしてください。

作業は以上で完了です。このカスタマイズした、ShareHtmlで出力したコードを貼ると

ShareHtmlのサムネイル画像が自動でアイキャッチ画像になる様に改造しました。簡単!ほぼコピペでできます![WordPress]
でーじてとこん

こんな感じで表示されるかと思います。

注意点!

ただし、あくまでサイトに設定されている、og:imageを取得して表示する改造です。
そもそも、og:imageが設定されていないサイトでは画像を取得することができませんのでご注意ください。

また、以下の記事では、てとこんさんのカスタマイズを、Chromeの拡張機能「Create Link」で実現しています。

[M] 内部リンクにサムネイル表示させるカスタマイズが捗りそうだったので導入してみた | mbdb (モバデビ)
mbdb

↑こちらを参考に、今回のぼくのカスタマイズも、「Create Link」に応用できると思いますので、Create Linkユーザの方は是非ご参考に。

パっと思いつきで実装してみたので、あんまり検証していませんし、スマートなコードではないと思います。

もし、お役に立てそうだったら、ご自身のwordpressのテーマのバックアップをとった上で、試してみてくださいね。

02/18 16:31 以下追記

なんかできたとおもってたけど、@cazukiさんから上記のように指摘を頂きました。
そうだ、これ画像直リンクってことになりますね。完全に失念してた、いかんいかん。

ということで、「これいけるんじゃないの!?」って調子にのってブログ記事にしたはいいものの、よく考えると推奨されるカスタマイズではありませんでした。
完全に勇み足です。

↑こんな感じで@cazukiさんがつぶやいている通りですね。

ということで、またなんか考えます。期待させてしまってごめんなさい!

スポンサーリンク

twitterもやっています

更新情報などをつぶやいています。フォローしていただくと、フォロー返しに行きます。

ShareHtml ×og:image