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

# 背景

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

# ウィジェット取得方法

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

```html
<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**|

```html
<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指定が必要となるでしょう。

```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 */
}
```