はてなブックマーク公式サイドバーウィジェットのパラメータ一覧

背景

はてなブックマークの公式サイドバーウィジェットをブログのサイドバーに仕込む、という要件は少なくないと思います。
勢いが衰えたとはいえ、はてなブックマークでのホッテントリ入りによるPVブーストはまだまだ起こりうるようです。また、ブクマを集めた記事を一覧化しておくことは、「サイトの個性」を閲覧者に知ってもらうのに、有効な方策といえるでしょう。
この公式ウィジェットをいじくり回す機会があったので、各パラメータの値をまとめました。

ウィジェット取得方法

サイドバーウィジェットは下記リンクから取得することができます。
http://b.hatena.ne.jp/guide/blogparts.show?type=widget
デフォルトで取得できるソースは以下の通りです。

<script language="javascript" type="text/javascript" src="http://b.hatena.ne.jp/js/widget.js" charset="utf-8"></script>
<script language="javascript" type="text/javascript">
Hatena.BookmarkWidget.url   = "";
Hatena.BookmarkWidget.title = "エントリー";
Hatena.BookmarkWidget.sort  = "hot";
Hatena.BookmarkWidget.width = 0;
Hatena.BookmarkWidget.num   = 5;
Hatena.BookmarkWidget.theme = "default";
Hatena.BookmarkWidget.load();
</script>

それでは、次の項で各パラメータの値について解説します。

ウィジェットのパラメータについて

パラメータ名とデータ型、デフォルト値を表にまとめました。詳細については後述します。

param	data type	default	overview
url	String		抽出対象となるサイトURL
title	String	エントリー	ウィジェットのタイトル
sort	String	hot	エントリーの抽出・表示順
width	Number	0	ウィジェットの幅（px）
num	Number	5	抽出・表示するエントリー数
theme	String	default	ウィジェットのテーマ

Hatena.BookmarkWidget.url

urlにはエントリー抽出対象となるサイトURLを指定します。未指定の場合、はてなブックマーク全体を対象とします。

Hatena.BookmarkWidget.title

titleにはウィジェットのタイトルを指定します。未指定の場合、何も表示されません。

Hatena.BookmarkWidget.sort

sortには抽出順を指定します。
hotを指定した場合、最近ブックマークされたエントリーが抽出されます。
countを指定した場合、サイト全体で最もブックマークされたエントリーが抽出されます。
未指定の場合、hotを指定した場合と同じ値が返ります。

data	sort target
hot	新着エントリー
count	人気エントリー
	新着エントリー

Hatena.BookmarkWidget.width

widthにはウィジェットの幅（px）を指定します。
画面上で「デフォルト」を選択した場合、0が指定されますが、これは250と同じ結果が返るようです。

Hatena.BookmarkWidget.num

numには抽出するエントリー数を指定します。
どうでもいいですが、このパラメータだけ略称になっていて気持ちが悪いのは私だけでしょうか。

Hatena.BookmarkWidget.theme

themeにはウィジェットのテーマを指定します。
default、hatenadiary、nothemeという値の指定が可能であり、それ以外の値を指定した場合はdefaultと同じ表示になります。
CSSでカスタマイズする場合は、nothemeを指定するとよいでしょう（出力されるHTMLについては後述）。

data	theme
default	デフォルトテーマ
hatenadiary	はてなダイアリー向けテーマ
notheme	テーマなし

nothemeを指定した際に出力されるHTML

次のようにパラメータを指定した際に出力されるHTML（2015年10月18日9時現在）を転載します。

param	data
url	http://staff.hatenablog.com/
title	エントリー
sort	hot
width	0
num	10
theme	notheme

<div id="hatena-bookmark-widget0" class="hatena-bookmark hatena-bookmark-widget-notheme">
  <div class="hatena-bookmark-widget-title">
    <a href="http://b.hatena.ne.jp/entrylist?url=http://staff.hatenablog.com/&sort=hot">
      <img src="http://b.hatena.ne.jp/images/widget/favicon.gif">エントリー
    </a>
  </div>
  <div class="hatena-bookmark-widget-body">
    <ul>
      <li><a class="hatena-bookmark-entrytitle" href="http://staff.hatenablog.com/entry/2015/10/13/140000">スマートフォンでも「引用ストック」ボタンを表示するよ...</a><span class="hatena-bookmark-count"><strong><a href="http://b.hatena.ne.jp/entry/http://staff.hatenablog.com/entry/2015/10/13/140000">16users</a></strong></span></li>
      <li><a class="hatena-bookmark-entrytitle" href="http://staff.hatenablog.com/entry/2015/10/01/163000">編集画面にクリップボードから画像を「貼り付け」できる...</a><span class="hatena-bookmark-count"><strong><a href="http://b.hatena.ne.jp/entry/http://staff.hatenablog.com/entry/2015/10/01/163000">22users</a></strong></span></li>
      <li><a class="hatena-bookmark-entrytitle" href="http://staff.hatenablog.com/entry/2015/10/01/140000">目次記法で、続きを読む記法と併用した際の改善や、アプ...</a><span class="hatena-bookmark-count"><em><a href="http://b.hatena.ne.jp/entry/http://staff.hatenablog.com/entry/2015/10/01/140000">10users</a></em></span></li>
      <li><a class="hatena-bookmark-entrytitle" href="http://staff.hatenablog.com/entry/2015/09/28/143000">はてなブログのガイドライン改定と、SmartNewsでの独自ドメ...</a><span class="hatena-bookmark-count"><strong><a href="http://b.hatena.ne.jp/entry/http://staff.hatenablog.com/entry/2015/09/28/143000">33users</a></strong></span></li>
      <li><a class="hatena-bookmark-entrytitle" href="http://staff.hatenablog.com/entry/2015/09/20/103500">iOSアプリ「はてなブログ」バージョン3.2をリリース。文字...</a><span class="hatena-bookmark-count"><strong><a href="http://b.hatena.ne.jp/entry/http://staff.hatenablog.com/entry/2015/09/20/103500">26users</a></strong></span></li>
      <li><a class="hatena-bookmark-entrytitle" href="http://staff.hatenablog.com/entry/2015/09/09/152158">記事中の見出しから目次を自動的に作成する「目次記法」...</a><span class="hatena-bookmark-count"><strong><a href="http://b.hatena.ne.jp/entry/http://staff.hatenablog.com/entry/2015/09/09/152158">207users</a></strong></span></li>
      <li><a class="hatena-bookmark-entrytitle" href="http://staff.hatenablog.com/entry/2015/09/04/153000">他のブログで引用されている文章を、そのまま自分の記事...</a><span class="hatena-bookmark-count"><strong><a href="http://b.hatena.ne.jp/entry/http://staff.hatenablog.com/entry/2015/09/04/153000">39users</a></strong></span></li>
      <li><a class="hatena-bookmark-entrytitle" href="http://staff.hatenablog.com/entry/2015/09/03/180000">【修正済み】メールで記事を投稿した際、自身のAmazonアソ...</a><span class="hatena-bookmark-count"><a href="http://b.hatena.ne.jp/entry/http://staff.hatenablog.com/entry/2015/09/03/180000">4users</a></span></li>
      <li><a class="hatena-bookmark-entrytitle" href="http://staff.hatenablog.com/entry/2015/09/02/154500">スマートフォンで「引用スター」をつけられるようにしま...</a><span class="hatena-bookmark-count"><strong><a href="http://b.hatena.ne.jp/entry/http://staff.hatenablog.com/entry/2015/09/02/154500">104users</a></strong></span></li>
      <li><a class="hatena-bookmark-entrytitle" href="http://staff.hatenablog.com/entry/2015/09/01/172700">日常の出来事をきれいに書き残せる公式デザインテーマ「Bl...</a><span class="hatena-bookmark-count"><em><a href="http://b.hatena.ne.jp/entry/http://staff.hatenablog.com/entry/2015/09/01/172700">10users</a></em></span></li>
    </ul>
  </div>
  <div class="hatena-bookmark-widget-footer"><a href="http://b.hatena.ne.jp"><span>Hatena::Bookmark</span></a></div>
</div>

ここでデザイン改変のキモになると思われるのが、.hatena-bookmark-countです。
ブックマーク数による表示の切り替えを生かすには、以下のようなCSS指定が必要となるでしょう。

.hatena-bookmark-widget-notheme .hatena-bookmark-count {
  /* code */
}

.hatena-bookmark-widget-notheme .hatena-bookmark-count em {
  /* code */
}

.hatena-bookmark-widget-notheme .hatena-bookmark-count strong {
  /* code */
}