equinox79
5/8/2012 - 5:36 AM

はてブのブログパーツを動的に読み込む実験

はてブのブログパーツを動的に読み込む実験

<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>


<p><a href="http://www.yahoo.co.jp/">yahoo</a></p>
<p><a href="http://www.google.co.jp/">google</a></p>

<script type="text/javascript">
var load_preview = function(elm){
  $.ajax({
    url : "http://b.hatena.ne.jp/entry/jsonlite/",
    dataType : "jsonp",
    data : {
      url : elm.href
    },
    success : function(json){
      if( json === null ) return;
      $(elm)
        .append( $('<br />') )
        .append(
          $('<iframe>').attr({
            marginwidth  : 0,
            marginheight : 0,
            scrolling    : "no",
            frameborder  : 0,
            src          : "http://b.hatena.ne.jp/entry.parts?url=" + encodeURIComponent(json.url),
            height       : 230,
            width        : 500
          })
        );
    },
    error : function(){
      $(elm)
        .append( $('<br /><span>load error.</span>') );
    }
  });
};

$('a').each(function(no,elm){ load_preview( elm ); })
</script>

</body>
</html>