太陽がまぶしかったから

C'etait a cause du soleil.

「あわせて読みたい」のブログカード化

本スクリプトは動作不能となります

はてなブログ用「あわせて読みたい」ウィジットがブログカードに

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

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

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

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

f:id:bulldra:20140814125828p:plain

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

f:id:bulldra:20140814125843p:plain

 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=""

//表示件数
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>

 なお、設置サポートや表示スタイル/アルゴリズムのカスタマイズ等のご依頼がありましたらサポートライセンスの購入をお願いいたします。

公開API活用ガイド (I・O BOOKS)

公開API活用ガイド (I・O BOOKS)

関連記事