WebScrap: Bloggerにテキストベースの「あわせて読みたい」を導入する

「あわせて読みたい」は面白く便利なWebサービスだが、リンク先一覧が画像で表示されるのでWebサイトのデザインとはあまり合っていなかった。そこで、見た目などがいじれるテキストベースの「あわせて読みたい」をBloggerに導入する。

使うのはSalad Days Riderのはっさくさんが公開している「あわせて読みたい JS版」を改変したものである。
大きく変更した点は、サイト名を一行で表示させ入りきらない場合は省略されるようにした。(Firefoxでは末尾に省略記号が挿入されないので注意。)

まず、Bloggerのレイアウト>ページ要素でHTML/JavaScriptのガジェットを追加し、そこに以下のコードを貼り付ける。(「あわせて読みたい」を初めて導入する場合は、一度あわせて読みたい - ブログがつながるブログパーツでブログを登録して集計が済むまで待つ。)

<!--
 「あわせて読みたい」javascript版 Blogger ver.
Edited by other
http://other-webscrap.blogspot.com/


このプラグインは「あわせて読みたい」(http://awasete.com/)のブログパーツを、公開されているAPIをもちいて、Salad Days Rider(http://sdr200.blog113.fc2.com/)のはっさくさんがfc2blogのプラグインとして製作されたものをBlogger用に改変したものです。

改造・再配布については、はっさくさんが規定したガイドラインに準拠します。
詳しくは『始めに登録が必要です - 「あわせて読みたい JS版」』(http://sdr200.blog113.fc2.com/?no=423&style2=22_latte)をご覧下さい。
-->

<style type="text/css">
<!--
.awasete_yomitai ul {
margin: 0 !important;
}
.awasete_yomitai li {
overflow: hidden;
width: 200px;
margin: 5px 0;
background: 0 top no-repeat;
list-style-image: none !important;
list-style-type: none !important;
list-style-position: outside;
font-size: 0.9em;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.awasete_favicon {
list-style-image: none;
list-style-type: none !important;
list-style-position: outside;
}
.awasete_favicon li {
width: 180px;
padding: 0 0 0 20px;
}
.awasete_provided {
margin-top: 10px;
text-align: right;
font-family: Arial, sans-serif;
}
-->
</style>

<div id="awasete_yomitai"></div>
<script type="text/javascript">
<!--
function awasete_yomitai(v){
 var list_max=10;                // 表示行数の最大値 1～10
 var favicon_visible=1;       // リンク先のfaviconの表示 1=有 / 0=無
 var elmRoot = document.getElementById('awasete_yomitai');
 var elmUl = document.createElement( 'UL' ); 

 if (favicon_visible == 1){
   elmUl.className='awasete_favicon';
 }

 elmRoot.className='awasete_yomitai';
 elmRoot.appendChild(elmUl);

 if(list_max<1 || 10<list_max){list_max=5;}
 var max = Math.min(list_max, v.length);

  for (var i = 0; i < max; i++){
    var liElement = document.createElement( 'LI'); 
    if (liElement){
      var d = v[i];
      if (favicon_visible == 1){
        liElement.style.backgroundImage='url('+d.favicon+')';
      }
      elmUl.appendChild(liElement);
      var aElement = document.createElement('A');
      aElement.href=d.url;
      aElement.target='_blank';
      aElement.appendChild(document.createTextNode(d.title));
      liElement.appendChild(aElement);
    }
  }

  document.write('<div class="awasete_provided"> by <a href="http://awasete.com/show.phtml?u=(対象となるブログトップページのURL)" target="_blank">'+'awasete.com'+ '</a></div>');

 
}
//-->
</script>
<script charset="utf-8" src="http://api.awasete.com/showjson.phtml?u=(対象となるブログトップページのURL)" type="text/javascript"></script>

そして、コード内の(対象となるブログトップページのURL)を自分のブログのトップページのURLに書き変えるだけ。
　例　http://awasete.com/show.phtml?u=http://other-webscrap.blogspot.com/

他に詳しい説明などは以下のリンクを参考にしてほしい。

2009/10/08 追記：コードを修正。