はてなブログに「あわせて読みたい」機能を追加するAlso readをリリースしました

はてなブログに関連記事や人気エントリーを表示させるブログパーツです。
一般的に「あわせて読みたい」というフレーズと一緒に表示されています。

特徴
利用方法
スクリーンショット
あれ？表示されない？(困ったときは)
諸注意など

特徴

はてなブログ(無料版)、Proのどちらでも利用可能です。
PC／スマートフォン版のどちらでも動作します。
記事上、記事下、サイドバーといったHTMLを挿入できる場所であれば、何処に置いても表示する事ができます。
リストの表示数やデフォルトのリストを指定する事ができます。*1
複数のリストを1つのページ内で表示できます。
リストに表示されなかった記事をランダムに再表示させるボタンや、詳しい一覧表示へのリンクボタン、RSSの購読ボタンが利用でき、不要なボタンを非表示にすることもできます。
CSSの知識があれば、柔軟なカスタマイズが可能です。
(上級者向け実験中) 設置の効果を確認できる　Google Analyticsの「キャンペーンパラメータ」やトラッキング用のURLタグを追加する事ができます。
GoogleAPI等の外部APIを利用しない設計の為、外部要因によるトラブルの少ない運用が可能です。*2
MIT License となります。

利用方法

表示用コードと描画用コードをそれぞれ貼り付けます。

とりあえずペタリと貼って試したい

はてなブログのデザイン設定にて、HTMLが挿入できる場所に以下のコードを貼り付けて試すことができます。

<!-- あわせて読みたい http://psn.hatenablog.jp/entry/also-read -->
<!-- 設定が含まれた表示用コード -->
<div class="js-htnpsne-awasete-module"
	 data-count="3"
	 data-mode="Popular"
	 data-title="こちらもどうぞ"
	 data-more-btn="true"
	 data-subscribe-btn="true">
</div>
<!-- あわせて読みたい 描画用コード ここから ブログ内に一つあれば大丈夫です -->
<script src="//niyari.github.io/hatenablog-modules/also-read.min.js" charset="utf-8" async></script>
<!-- あわせて読みたい 描画用コード ここまで -->

※スマートフォン版でも表示させたい場合は、続きもご覧ください。

表示用コードをはてなブログに貼り付ける

表示させたい場所に、設定を含めた「表示用コード」を貼り付けます。

一例として、以下のようなコードになります。

<!-- あわせて読みたい http://psn.hatenablog.jp/entry/also-read -->
<!-- 設定が含まれた表示用コード -->
<div class="js-htnpsne-awasete-module"
	 data-count="3"
	 data-mode="Popular"
	 data-title="タイトル"
	 data-more-btn="true"
	 data-subscribe-btn="true">
</div>

設定は

data- (設定用キー) =" (値) "

という書式になります。値は " " を利用して囲みます。

 data-count="3" data-mode="Popular"

設定と設定の間には、半角のスペースを1つ以上挿入します。

全ての設定は

<div class="js-htnpsne-awasete-module"
	 
	 (この部分に設定が入ります)
	 
	>
</div>

DIVタグの中に含まれます。閉じるタグ等を間違えて消去しないように設定します。

各種の設定

現在、設定できる項目は以下のとおりです。

表示するエントリー数の設定

data-count="3"

リストの表示個数です。1以上の整数が入ります。表示個数よりデータが多い場合は、ランダムに表示されます。

リストの種類

data-mode="Popular"

表示させるリストの種類です。

はてなブックマークの人気順を表示させる「Popular」
最近の記事を表示させる「Recent」
記事のカテゴリーから表示させる「Category」

の3つから選択します。

リストのテキスト表示

data-list-type="list"

リストの表示をiframe埋め込み型ではなくテキスト型として表示させます。

テキスト型リストの「はてなブックマーク数」の表示

data-display-bookmark_count="true"

ブックマーク数を表示させます。
「true」に設定するとはてなブックマーク数が表示されます。

タイトル

data-title="タイトル"

リストのタイトルです。

「もっと読む」ボタン

data-more-btn="true"

リストに表示されなかった一覧を表示させるボタンの表示／非表示を設定できます。
「true」に設定するとボタンが表示されます。

「feedlyで購読」ボタン

data-subscribe-btn="true"

現在選択されいるリストのRSSをfeedlyに登録するボタンの表示／非表示を設定できます。
「true」に設定するとボタンが表示されます。

カスタムCSSの利用

data-user-css="true"

カスタマイズ用のCSSを利用する設定です。あらかじめ用意されたCSSを利用せず、ご自身でデザインをカスタマイズしたい場合はtrueにします。

psn.hatenablog.jp

追加パラメータ(実験中)

data-track-parameters="#test"

(上級者向け実験中) 表示させたリストのURLに付与する追加パラメータを設定できます。

※設定方法などは予告なく変更・無効化されることがあります。

カスタマイズされた表示用コードの例となります。

<!-- あわせて読みたい http://psn.hatenablog.jp/entry/also-read -->
<!-- 設定が含まれた表示用コード -->
<div class="js-htnpsne-awasete-module"
	 data-count="3"
	 data-mode="Popular"
	 data-title="タイトル"
	 data-more-btn="true"
	 data-subscribe-btn="true"
	 data-user-css="true"
	 data-track-parameters="#test">
</div>

描画用コードをはてなブログに貼り付ける

すべての表示させたい場所に表示用コードを貼り付けたら、描画用コードを貼り付けます。

描画用コードは1か所貼り付けるだけで動作します。

遅延読み込みを行う設定が含まれています。
スマートフォンでも表示させる場合は、ブログの詳細設定→ headに要素を追加へ貼り付けます。

<!-- あわせて読みたい 描画用コード ここから ブログ内に一つあれば大丈夫です -->
<script src="//niyari.github.io/hatenablog-modules/also-read.min.js" charset="utf-8" async></script>
<!-- あわせて読みたい 描画用コード ここまで -->