リンクカード（ブログカード）を作るブックマークレット

リンクの見栄えを良くしたくて、以下のようなリンクカード（ブログカード）を探していました。

1. 外部サービスに依存しない。（サービスの継続性の問題とパフォーマンスの点から）
2. OGP (Open Graph Protocol) に対応していないサイトへのリンクはimageやdescriptionを無理に表示しない。（関係のない画像やコンテンツが表示されることがあるので）
3. 仕様が開示されている。（カスタマイズ可能）
4. StackEdit の Markdownで利用可能。（シンプルなHTMLであること）

なかなか良いものが見つからず、<blockquote> で代用したりしていたのですが、以下のサイトを見つけました。

はてな風のブログカードをブックマークレットから作ってみよう！ | 株式会社グランフェアズ

こんにちは、めぐたんです。 ブログを書いていると、参考記事や過去に書いた記事など別ページへのリンクを貼る機会が何かと多くあります。…

www.granfairs.com

　（これはリンク先のブックマークレットで作ったリンクカードです。）

詳しくはリンク先を見ていただければ分かるのですが、外部サービスへの依存がほとんどなく（favicon 表示のみ）、そのため表示も高速です。

画像も og:img のみの表示です。画像がない場合も違和感のないデザインです。

ブックマークレット（JavaScript）ですので使いやすくカスタマイズも可能です。

また、使用しているタグも <div> のみですので、ブックマークレットから出力された HTML をそのまま StackEdit に貼り付けて使うことができます。

カスタマイズ

そのままでも充分使えるのですが、ブックマークレットの JavaScript を少しカスタマイズしてみます。

タイトル

obj.title = $('title').text();

でタイトルを取得しているのですが、document.title 以外に title 要素を使ったものが引っかかることがある（Qiitaなど）ので、

obj.title = document.title;

にしておきます。

テキスト部分

'<p>' + obj.desc + '</p>'

で <meta name ="description" content=""> の内容を表示しているのですが、description がないサイトへのリンクだと、undefinedと表示されてしまいます。undefined の場合、自分で説明を上書きすれば良いのですが、以下のようにしてundefined を一旦消すことにします。

'<p>' + (obj.desc || '') + '</p>'

リンク

私の場合、内部リンクは別ウィンドウで開きたくないので、target="_blank" は消しておきます。（テキスト部分と画像部分の2箇所。）

URL

URL とホスト名は canonical 属性の設定があれば、そちらを使うようにします。

obj.url = document.URL;
obj.domain = location.host;

を

obj.url = $('link[rel=canonical]').attr('href') || document.URL;
var m = obj.url.match(/^https?:\/\/([^/]+)/);
obj.domain = m[1];

に変更します。

favicon

favicon は Google の API を使って取得しているのですが、Google は http / https 間の接続を認めていないので、"http://www.google.com/" を "//www.google.com/"に変更しておきます。

CSS

CSSも少しだけいじりました。favicon の padding が継承されていたので 0 をセットしたのと、favicon 右のドメインが下付きになっていたので、vertical-align: middle; を追加しました。

.blogCardFooter a img {
  margin-right: 5px;
  padding: 0;
  vertical-align: middle;
}

修正後のブックマークレット

ブログカード

株式会社グランフェアズ様、とても役立つ情報ありがとうございました。

How to get Label Count outside widgets in Blogger

Blogger’s data tag “label.count” is only available within Labels widgets.

About data:label.count - Google Product Forum

productforums.google.com

To get the label count (post number per label) outside the widget, you need to use JavaScript.

This is the simple JavaScript snippet: store the pair of the “Label Name / Count” from the Labels widget into an object (aka associative array).

JavaScript

var labelCounts = {};
var label = document.getElementById('Label1');
// 'div ul li' is for List, 'div>span' is for Cloud 
var elms = label.querySelectorAll('div ul li, div>span');
[].forEach.call(elms, function(elm) {
  if (elm.childElementCount == 2) {
    labelCounts[elm.children[0].innerHTML] = Number(elm.children[1].innerHTML.replace(/[()]/g, ''));
  }
});

Then, you can get the count of labelName by:

JavaScript

labelCounts["labelName"]

Prerequisite

1. Labels widget ID is “Label1”.
2. Check “Show number of posts per label” in “Configure Labels”.

Blogger 外部リンクを別ウィンドウ（タブ）で開く（jQueryなし）

リンクを別ウィンドウ（タブ）で開くように設定することには賛否両論がありますが、やってみたかったのでやりました。

以下のスクリプトを [テーマ] -> [HTMLの編集] で</body> の直前に挿入し、保存すれば外部リンクが別ウィンドウ（タブ）で開くようになります。

JavaScript

<script type='text/javascript'>
    var rex = new RegExp('^(https?:)?\\/\\/(?!' + location.hostname + ')');
    [].forEach.call(document.getElementsByTagName('a'), function(elm) {
      if (rex.test(elm.href)) {
        elm.target = '_blank';
      }
    });
</script>

補足

• </body> の直前に置く前提です。<head> に書きたい場合は、

document.addEventListener('DOMContentLoaded', function() {
  /* write here */
});

　　で括ってください。

• モバイルでは無効にしたい場合、

  if (!/(\?|&)m=1/.test(location.search)) {
      /* write here */
  }

　　で括ってください。
　　Bloggerではモバイルの場合、クエリ文字列がm=1となるので、それを利用しています。

• Blogger の [HTMLの編集] で保存すると、' は ' （数値文字参照）に変換されます。これを避けたい場合は、CDATA セクションで括ってください。

//<![CDATA[
  /* write here */
//]]>

参考記事

以下の記事を参考にしました。

もうjQueryには頼らない！素のJavaScriptでDOMを操作するための基礎知識 - WPJ

古いブラウザーのサポートが必要ないなら、もうjQueryを使わなくてもいいかもしれません。ネイティブなDOM APIの使い方をサンプルとともに解説します。

www.webprofessional.jp