はてなお気に入りAPIを使ってブログパーツ作例

Tweet

機能変更、お知らせなど - はてなの日記 - はてなのお気に入りユーザーの情報を取得できる「お気に入りAPI」（Favorites API）を公開しました [hatena.g.hatena.ne.jp]

本日、はてな内のお気に入りのユーザー情報を取得できる「お気に入りAPI」（Favorites API）を公開しました。

ということで、

はてなお気に入りAPIを使ってブログパーツ？を作ってみたけれども、僕の作り方が悪いので、jsのファイル名が固定なのです。ｗ

filename: hatena_fav.js （UTF-8で保存してね）

/* --------------------------------------------------------------
   hatena_fav.js : hatenaお気に入り画像表示ブログパーツ
   (要prototype.js)
   (c)CL 2007.9.13
   ----------------------------------------------------------- */
 
 
// hatenaFav: はてなお気に入りアイコン表示オブジェクト
 
var hatenaFav ={
  
  replaceId: 'hatena_fav',
  
  onLoad: function() {
    hatenaFav.showHtml ();
    hatenaFav.addScript();
  },
  
  showHtml: function () { // scriptタグの位置特定、callback差込用HTMLを挿入
    var objElement = document.createElement('span'); 
    objElement.innerHTML=''
    + '<div id="' 
    + this.replaceId
    + '"></div>'
    + '';
    var scripts = document.getElementsByTagName('script');
    var objScript = scripts[ scripts.length - 1 ];
    for (var i = 0; i < scripts.length; i++) {
      if ( (scripts[i].getAttribute('src') ) &&
           (scripts[i].getAttribute('src').match(/hatena_fav.js$/) ) ){
        objScript = scripts[i]
      }
    }
    objScript.parentNode.insertBefore(objElement, objScript);
  },
  addScript: function() { // JSONPをサーバにリクエスト
    var msec = (new Date()).getTime();
    var script = document.createElement('script'); 
    script.id = 'http://s.hatena.ne.jp/'
              + hatenaUser
              + '/favorites.json?callback=hatenaFav.showList';
    //        + '&cache=' + msec ;
    script.charset = 'UTF-8';
    script.src     = script.id; 
    document.lastChild.appendChild(script);
  },
  
  showList: function(json) { // JSONPコールバック実行部
    if (json == null) return;
    var loop = json.favorites;
    var html = '';
    for (var i = 0; i < loop.length; i++) {
      var hatenaId = loop[i]['name'];
      html += '<a href="http://d.hatena.ne.jp/'
            + hatenaId
            + '/" target="_blank">'
            + '<img src="http://www.hatena.ne.jp/users/'
            + hatenaId.slice(0, 2)
            + '/'
            + hatenaId
            + '/profile_s.gif" width="16" height="16"'
            + ' border="0" title="id:'
            + hatenaId 
            + '" alt="'
            + hatenaId 
            + '" /></a>';
    }
    if ( $(this.replaceId) ) {
      Element.update( $(this.replaceId), html );
    }
  }
}
 
// onLoadイベントハンドラに追加（prototype.js）
 
Event.observe(window, 'load', hatenaFav.onLoad, false);

貼るときは、

  <div class="counter" id="hatena_fav_wrapper"
    style="text-align:left;" align="left">
    <div style="background-color:#ddd; padding:1px; font-size:12px;text-align:center;"><a
    href="http://blog.dtpwiki.jp/dtp/2007/09/api_60ed.html">はてなお気に入りAPI</a></div>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript">
       hatenaUser = 'C_L';
    </script>
    <script type="text/javascript" charset="utf-8"
      src="hatena_fav.js"></script>
  </div>

貼ってみると、

こんな感じ。ブログパーツとかいいつつ、幅とか全然決めてなくて、マジ画像だけしか出ません。飾りは自分でつけてください。

～～～

会社で似たようなやつを仕事で作ったのですが、人をクリックするとディスアピアするというブラックな作りでしたが（そんなの仕組むなよ）、この作例の場合は、その人のはてなダイアリーが表示されると思うよ。

2007.09.14 00:01 投稿　大野 義貴 [Web] | 固定リンク |