高度なカスタマイズを使ってサイドバーにそれぞれの記事のシェア数を表示する (未完成)

しばらく前に、はてなブログのサイドバーで「高度なカスタマイズ」というものが使えるようになりました。これを使って、「最新の記事」などでリスト表示される記事それぞれのシェア数を表示できないかなーと思ってやってみました。まぁ、結果から言うと未完成です。

とりあえず備忘録的に今回やったものを書き残しておきます。（自分用メモのようなものなので、わかりやすく書く努力はしていません。あしからず。）

高度なカスタマイズ

高度なカスタマイズは、サイドバーに追加できる「最新記事」「関連記事」「注目記事」といった記事一覧モジュールにおいて使えるものです。これは変数を用いて表示内容を自分でカスタマイズすることができます。htmlなどを自由に記述できるので、かなり柔軟なデザインが可能です。

記事ごとのシェア数を表示

この高度なカスタマイズで、表示されている記事それぞれのシェア数を表示できないかな？とやってみました。（そのうち消すと思いますが）現在このブログのサイドバー、RECENT POSTSにて使っています。消しました。

一見、それぞれのシェア数が表示できているように見えますが、実は不完全です。同じ日付の記事のシェア数が全部同じになっています。これを解決できなかったので未完成です。たぶんjavascript分かる人なら完成させることができると思います。

設置方法

シェア数の取得

まず、記事ごとのシェア数を取得する必要があります。これは、記事ページにてオリジナルのシェアボタンを表示する方法としていくつか記事があります。今回参考にしたのはゆきひーさんのものです。

まずはこれの「コピペコードjQuery」を使います。普通は「記事下」にコピペしますが、トップページでも表示したいのなら「フッター」にでもコピペするといいと思います。

高度なカスタマイズ

サイドバーの「最新記事」で「高度なカスタマイズ」にチェックを入れ、以下のように記述しました。

<script>
jQuery(function(){
  get_social_count_twitter('{Permalink}', '.twitter-count{Date}');
  get_social_count_facebook('{Permalink}', '.facebook-count{Date}');
  get_social_count_hatebu('{Permalink}', '.hatebu-count{Date}');
});
</script>
<div class="advancedlist-item">
<div class="advancedlist-image">
<a class="urllist-image-link" href="{Permalink}"><img src="{ImageURL}" class="urllist-image" title="{Title}" /></a>
</div>
<div class="advancedlist-text">
<div class="urllist-date-link">{Date}</div>
<a href="{Permalink}" class="urllist-title-link urllist-title">{Title}</a>
<div class="side-sns">
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {Permalink}" class="twitter-button" target="_blank"><i class="blogicon-twitter lg"></i><span class="twitter-count{Date} small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={Permalink}" class="facebook-button" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" ><i class="blogicon-facebook lg"></i> <span class="facebook-count{Date} small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--はてブ-->
<a href="http://b.hatena.ne.jp/entry/{Permalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i> <span class="hatebu-count{Date} small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
</div>
</div>
</div>

また、デザインcssに以下を加えています。（cssは単なる見た目なので今回の「表示する」というのとはあまり関係ありません。上述のhtml含め、好きにカスタマイズすればいいと思います。）

.advancedlist-item{
display: -webkit-flex;
display: flex;
}
.advancedlist-image{
width: 72px;
margin: 0 8px 0 0;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}

ダメな所

上のコードで一応表示されるようになったのですが、同じ日付の記事は全部同じ数になってしまいます。これは何故かと言うと「高度なカスタマイズ」に入力した.twitter-count{Date}という部分が、同じ日付だと同じになってしまうからです。記事ページに貼り付けるものは.twitter-countだけで{Date}は付いていないのですが、これを取ると日付関係なく全部が同じ数字になります。

なので、ここのクラス名を記事ごとに変えることができれば、うまく表示できると思います。各記事独自のものを出せればいいのですが、{Title}だと日本語が入ってるとうまく行かず、{Permalink}もいろいろ余計なものが混ざっているのでうまく行きません。リストの1番目は何、2番めは何、とかなにかjavascript部分をいじればできそうですが、私はそっちの知識がない（かつ勉強する気がない）のでお手上げです。

…

そんなわけで、誰かがもっとちゃんとしたのを作ってくれることを期待します。（とりあえず2,3日はサイドバーに現状のものを表示しておきますが、基本的にjQueryを読み込ませたりするのが好きじゃないので、その内消して元に戻す予定です。）

ただ高度なカスタマイズのおかげで、いろいろ幅というか可能性が広がった感がありますね。トップページや記事ページのレイアウトもこういうの使えるようになると、テーマとかもっと凝ったのができていいんですけどね。