あわせて読みたいウィジット

　最近、『はてなブログの記事を紹介しやすくしました。URLを貼るだけで、コンパクトに整ったブログカードを貼り付けることができます【追記あり】 - はてなブログ開発ブログ』が話題となっていますが、「あわせてウィジット」についてもブログカード形式で表示するバージョンを作成しました。旧バージョンの「あわせて読みたいウィジット」については複数の問題があるため、差し替えをお願いしているところでもあります。

　仕組み的には、取得したURLをブログカード形式で表示させるURLに変換して、内部フレームとして表示させています。ブログのHTMLソースと『新しい機能 ブログカードはサイドバーにも有効！おすすめ記事をサイドバーに設置したよ - 鈴木です。』を参考にしました。自前生成部分がオミットできるため、随分とシンプルになりました。

　複数のカードが並ぶとクドイのでブログ名を非表示にするパラメータも欲しいところですが、ブログカード形式を利用すると画像やブックマーク数取得などについて委譲できるので外部から取得して表示させるよりもリスクが低いですし、デザインについても過去より優れているものと思われます。念願のスター数表示も行われますため、これを機会にご利用いたければ幸いです。

あわせて読みたいのウィジットの設置

　以下のスクリプトをデザイン画面における記事下の部分に配置。

　CSSやブログのURL等については各自変更をお願いします。最近はスマートフォンのフッタに公式の人気記事が表示されるようになったので、スマートフォン側での動作を推奨しませんが、スマーフォン表示でも使う場合には「スマートフォンタブ」で「PCと同じHTMLを表示する」を選択するか、スマートフォン用の記事下にもコピーします。

<span id="relate_entry" class="hatena-module-foot">Now Loading...</span>
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

//ブログURL
var blogURL="http://www.ikedakana.com"

//表示件数
var maxNUM = 3;
google.load("feeds", "1");
var entries = new Array();
    
/* 配列にシャッフル機能を追加 */
Array.prototype.shuffle = function() {
    var i = this.length;
    while(i){
        var j = Math.floor(Math.random()*i);
        var t = this[--i];
        this[i] = this[j];
        this[j] = t;
    }
    return this;
}

function initializeRealateEntry() {
    var relRssUrl = 'http://pipes.yahoo.com/pipes/pipe.run?'
    + '&site=' + blogURL
    + '&entry=' +  document.location.href
    + '&_id=00b601cfe3bfb6e4ac1db6cfd7b70bf6&_render=rss';
    
    console.log(relRssUrl)
    var feed = new google.feeds.Feed(relRssUrl);
    feed.setNumEntries(37);
    
    feed.load(function(result) {
      if (result.error || result.feed.entries.length == 0) {
        return;
      } else {
        createRealateHtml(result.feed.entries);
      }
    });
}

function createRealateHtml(entries) {
    /* 1件もないなら終了 */
    if (entries.length == 0) {
        return;
    }
    
    var resultEntries = new Array();
    resultEntries.push(entries[0]);
    
    if (entries.length == 1) {
        return;
    }
    entries.shift(1);
    
    /* シャッフル */
    entries = entries.shuffle();
    for(var x = 0; x < entries.length && resultEntries.length < maxNUM; x++) {
        resultEntries.push(entries[x]);
    }
    
    if (resultEntries.length == 0) {
        return;
    }
    
    /* 指定数のHTMLを生成 */
    var resultHtml = "";
    for(var x = 0; x < resultEntries.length; x++) {
        var entry = resultEntries[x];
        var embedURL = entry.link.replace(blogURL + '/entry/', blogURL + '/embed/');
        var html = '<p><iframe src="'
          + embedURL
          + '" width="100%" height="200px" scrolling="no" frameborder="0" style="max-width: 720px; margin: 5px 0px;"></iframe></p>';
         resultHtml += html;
    }
    var container = document.getElementById("relate_entry");
    container.innerHTML = '<h3>あわせて読みたい</h3>' + resultHtml;
}

google.setOnLoadCallback(initializeRealateEntry);
</script>