あわせて読みたいウィジェットをGitHub経由で配信するようにした

はてなブログで表示カテゴリに関する記事を記事下に表示させる「あわせて読みたいG」 - 太陽がまぶしかったから

以前にはてなのあわせて読みたいウィジェットを作ろうと思ったやつ（はてな用の「あわせて読みたい」ウィジェット作った - タオルケット体操）の、最初に作ったっぽい人のブログエントリをみたらなんか機能とか増えまくりでめっちゃ良い感じになってた。
こんくらいいい感じだともう僕のいらんかなとも思ったけど、折角作った奴なのでGitHubでファイルを配信するところとかをパク参考にしてみた。
おかげで貼付けるコードがめっちゃ小さくなって良いことだとおもった。

ついでにリロードボタンとかの機能も追加したりしてみました。でもあんま多機能だと僕が使いこなせなくなるので、今後あんまり多機能になる予定はないです。

<div
  id="relate_entry"
  class="hatena-module-foot"
  data-limit-suggestions="5"
  data-title-suggestions="他にも読みたい">
  <h3 class="loading">Now Loading...</h3> 
</div>

<script src="//www.google.com/jsapi"></script>
<script src="//hachibeedi.github.io/hatena-modules-io/hatena_recommend_widget.js"></script>

data-limit-suggestionsに一度に表示したい数。
data-title-suggestionsにはタイトルにしたいワードを入れてください。

どちらも初期値が設定されているので、なんもしないと自動的に4とあわせて読みたいが入るようになってます。
ブログカード方式とかの選択は、なんかもうブログカードしかみんな使わないし消しちゃっていんじゃねっていう感じなので消します。

Now Loadingの文字を点滅させたいという方は以下のコードを上のやつの上のほうにはっつけましょう。

<style>
.loading {
  -webkit-animation:blink 1.5s ease-in-out infinite alternate;
  -moz-animation:blink 1.5s ease-in-out infinite alternate;
  animation:blink 1.5s ease-in-out infinite alternate;
}

@-webkit-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}

@-moz-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}

@keyframes blink{
0% {opacity:0;}
100% {opacity:1; }
} 
</style>

雑なCSSでごめんなさい。

//hachibeedi.github.io/hatena-modules-io/hatena_recommend_widget.jsのコードを参照するようにすることで、機能追加や修正の恩恵を即座に受けられるようになりますが、逆に僕がいらんことをして壊してしまう可能性もほんのちょっとだけあるので気をつけてください。
その場その場での安定板が欲しい場合は、http://hachibeedi.github.io/hatena-modules-io/hatena_recommend_widget.jsで見れるコードをいままでのように貼付けてください。

＊追記短いスクリプトですが、uglifyでの圧縮をかけて、公開URLを変更するようにしました。
新しいURLはhttps://hachibeedi.github.io/hatena-modules-io/dist/hatena_recommend_widget.jsです。まぁどれくらい使ってくれてる人がいるかはわかりませんが、今まで使ってた人が困るといけないので既存のURLのソースのそのまま残しておきます。

気が向いたら、ウィジェット自体の見た目ももうちょいカッコいい感じにするようなCSSも作りたいですね。

ソースコードは以下で

hachibeeDI/hatena-modules-io · GitHub

以上です。