サムネいるつきリンクの作成

WEB制作に限らず、他サイト様を参考にさせていただく機会は非常に多い現在。参考サイト様を拝見して、簡単便利に引用元を表示出来る様にしましたので、ご参考までに。

STEP01ブックマークレットの作成

まずは、ブックマークレットを作成します。“increment Log”様から下記コードを拝借。

javascript
//descriptionの値を取得
var description = document.getElementsByName('description').item(0);
var twDescription = document.getElementsByName('twitter:description').item(0);
 
//og:descriptionは違う方法で取得
var pd = document.getElementsByTagName('meta');
var gpDescription = null;
for(i=0;i<pd.length;i++){
  if(pd[i].getAttribute("property")=="og:description"){
    gpDescription = pd[i].getAttribute("content");
  }
}
 
//descriptionの値が無い場合の処理
if(!(description == null)) {
description = description.content;
} else if(!(ogpDescription == null)) {
description = gpDescription;
} else if(!(twDescription == null)) {
description = twDescription.content;
} else {
description = '';
}
 
//ショートコード用文字列の吐き出し
window.prompt('外部リンク用ショートコード','[bm url="' + location.href + '" description="' + description + '"]]' + document.title + '[/bm]');void(0);

STEP02PHPの編集

こちらも同様に、“increment Log”様から拝借。

php
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 class="bkm">'.mb_strimwidth(esc_attr($opt['description']), 0, 140, "...","UTF-8").'</blockquote>';
 $str .= '</div></article>';
 return $str;
 }
}
add_shortcode('bm', 'shortcode_custom_bookmark');

当サイトでは、引用文でも<blockquote>を使う為、not:で属性除外をするために、便宜上”bkm”というクラスを振ってあります。
余談ですが、ツイッターを載せる際も<blockquote>が使われる為、クラスを振って一括で除外しています。

STEP03記事の作成

実際にブックマークレットを使用してみると、このようなダイアログが表示されます。

コピーした上記のコードを、投稿するとこんな感じの何も整形されていないものができます。

STEP04ブックマークレットの調整

個人的に、整形する際に、引用元サイトのドメインまでのURLを裏表示してみたいと思ったので、こんな一文を追加します。

javascript
" domain="' + location.protocol + '//' + location.hostname + '"

もっと上手な取得方法があるかも知れませんが(笑)
これにより、「http://○○○.com/」というURLが取得できます。

26行目にこの一文を追加し、下記のようになります。

javascript
//ショートコード用文字列の吐き出し
window.prompt('外部リンク用ショートコード','[bm url="' + location.href + '" domain="' + location.protocol + '//' + location.hostname + '" description="' + description + '"]' + document.title + '[/bm]');void(0);

STEP05○○

参考サイト

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です