外部リンクをサムネイル付きで表示するには「ShareHtmlメーカー」を使う方法があります。
私の場合は、ShareHtmlメーカーを知る前にこちらのショートコードを発見して以来ずっと使ってます。(以下の外部リンクもこのショートコードで表示してます)
【HTML5対応】WordPressの記事でサムネイル画像つきリンクを表示させるショートコードを実装してみたり | アンギス
ほにゃららでお馴染みでお馴染みの次男さんのところの記事(Feedlyがイマイチ見づらいと思って拡張を探してみたらええの見つけた、Feedly Reader)...
functions.phpファイルにソースコードを記述し、記事編集画面にショートコードを入力するとサムネイル付きの外部リンクHTMLが生成される、といったモノです。めっちゃ使いやすくて感謝してます。
そして、このショートコード用に専用のブックマークレットを用意したワケなんです。
ShareHtmlを使ってHTML生成でも問題無いのですが、ショートコードの利点はソースコードを修正するだけで全ての記事に反映される所です。
ショートコードを実装するソース
ブックマークレットの前に、このショートコードを実装するソースコードをちょこっと拝借。
function shortcode_custom_bookmark($opt, $content = null) {
/* デフォルトの設定 */
$width = 150; // サムネイルの横幅
$class = 'bookmark cf'; // 全体を覆うclass
$text = 'リンク'; // アンカーテキストがなかった時のテキスト
/* デフォルトの設定ここまで */
if(!empty($opt['url']) && preg_match('/^(https?|ftp)(:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+$,%#]+)$/', $opt['url'])) {
if(!empty($opt['width']) && preg_match('/^[0-9]+$/', $opt['width'])) $width = $opt['width'];
$height = round($width * 0.75);
if(!empty($content)) $text = esc_attr($content);
if(!empty($opt['class']) && preg_match('/^[a-zA-Z0-9 -_]+$/', $opt['class'])) $class .= ' '.$opt['class'];
$str = '<article class="'.$class.'"><figure><a href="'.$opt['url'].'" target="_blank"><img class="bookmark_thumb" align="left" border="0" src="http://s.wordpress.com/mshots/v1/'.rawurlencode($opt['url']).'?w='.$width.'" alt="'.$text.'" width="'.$width.'" height="'.$height.'" /></a></figure><div class="bookmark_container"><header><h3><a href="'.$opt['url'].'" target="_blank">'.$text.'</a></h3> <a href="http://b.hatena.ne.jp/entry/'.$opt['url'].'" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/'.$opt['url'].'" alt="はてブ数" /></a></header>';
if(!empty($opt['description'])) $str .= '<blockquote>'.mb_strimwidth(esc_attr($opt['description']), 0, 140, "...","UTF-8").'</blockquote>';
$str .= '</div></article>';
return $str;
}
}
add_shortcode('bm', 'shortcode_custom_bookmark');
10,14行目のエスケープ処理は元のソースでhtmlspecialcharsが使われていたのですが、WordPress用のエスケープ処理関数「esc_attr」に変更しています。(こちらにしないとエスケープしきれない文字があったので。WordPressのせい?)
外部リンク先の概要表示はpタグではなく引用のblockquoteタグに変更しています。
CSSのスタイリングに関してはこのショートコードを公開してるページにサンプルがあります。
ショートコードの使い方
ソースコードをfunctions.phpに記述した後、以下のようにショートコードを記事本文に入力すると使えます。
[bm url="http://example.com" description="ページの概要・説明(任意)"]ページのタイトル[/bm]
でも、一々URLやタイトル、概要をコピーして貼り付けしてると(少しだけど)時間が掛かるんですよね。
そして本題ですが、リンク表示したいページの「URL」「タイトル」「概要」を一発で自動的に取得し、ショートコード用のソースを吐き出すブックマークレットを用意したんです。
ショートコード用のブックマークレット
そのページ情報を取得するブックマークレットはこちらのリンクです
こちらのリンクをChromeやFirefoxならブックマークバーにドラッグ&ドロップでお気に入り登録、IEなら「右クリック > お気に入りに追加」で登録出来ます。
登録したら、リンク表示したいページでお気に入り内の「GetLinkCode」をクリック。そうするとダイアログに);void(0);
最初にdescriptionの値を変数に格納し、if文で無い場合の処理をしています。
最後に文字をダイアログで表示するprompt関数で、ショートコード用の文字列を結合して出力しています。
このjavascriptをブックマークレット用に1行にまとめて<a>タグのhref属性に放り込んでブックマークレット完成。
<a href="javascript:var%20description%20=%20document.getElementsByName('description').item(0);var%20twDescription%20=%20document.getElementsByName('twitter:description').item(0);var%20pd%20=%20document.getElementsByTagName('meta');var%20gpDescription%20=%20null;for(i=0;i<pd.length;i++){if(pd[i].getAttribute('property')=='og:description'){gpDescription = pd[i].getAttribute('content');}}if(!(description%20==%20null))%20{description%20=%20description.content;}%20else%20if(!(gpDescription%20==%20null))%20{description%20=%20gpDescription}%20else%20if(!(twDescription%20==%20null))%20{description%20=%20twDescription.content;}%20else%20{description%20=%20'';}window.prompt('外部リンク用ショートコード','[bm%20url=%22'%20+%20location.href%20+%20'%22%20description=%22'%20+%20description%20+%20'%22]'%20+%20document.title%20+%20'[/bm]');void(0);">GetLinkCode</a>
ブックマークレット作成で参考になったページ
まず、タイトルやURL取得に関してこちらの記事が参考になりました。(もろパクリ)
指先ひとつでページのタイトルとURLをコピーしたい!ブックマークレットでその願い、叶えます♪ | oki2a24
追記(2013年2月4日)。具体的な手順を書きましたのでよろしければご参照ください。 タイトルと URL をコ…
metaタグのproperty属性を取得する方法はこちらのソースコードを参考にしました。
javaScriptでmeta内のproperty属性から画像を取得する方法| 絶版あかみる
閲覧ページなどのメタ画像を取得 1つ前の記事、「「あみあみ」A8.netブック...
次いで、ブックマークレットの作成はこちらのページを参考にしています。
Bookmarkletの作成方法(基礎)-ブックマークレット活用術
ブックマークレットの作成から活用までを紹介しています。
ショートコードの利点を考えなければShareHtmlのブックマークレットでも全く問題ないのですが、私の場合はショートコードをすでに利用していたので、こちらに対応したブックマークレットを用意することにしました。
photo credit: Dmitry Baranovskiy via photopincc