Drawer|web制作に関するネタの引き出しサイトweb制作に関するネタの引き出しサイトTwitterFacebookRSS登録TOPページに戻るJavascriptJavaScriptを使って、自サイトでの「はてなブックマーク」の人気記事一覧を表示するJavaScriptを使って、自サイトでの「はてなブックマーク」の人気記事一覧を表示する2012年12月10日Javascriptソーシャルブックマークの「はてなブックマーク」。それをブックマーク数が多い順で並べる方法をJSで試したので、ご紹介です。簡単に設置ができるのですが、デザインの柔軟性にはかけるのでJSで簡単にできないかなと思った次第です。以下がブログパーツを設置したサンプルです。はてブ人気エントリーをパーツで設置APIを呼び出すまずはその人気エントリーを取得するAPIのアドレスが以下になります。http://b.hatena.ne.jp/entrylist/json?sort=count&url=[サイトのURL]&callback=hatebuCallback[サイトのURL]に自分のサイトのアドレスを。callbackの後ろはあとで書くJSのfunctionの名前に合わせます。ページのタイトル(文字数が多いと途中で...になる。実際に表示させるデータは読み込めたので、これを実際に整理して表示させます。読み込む先のHTMLを以下にしました。id="hatebuList"></div>そして、JSはこんな感じ。jQuery使ってますので先に読み込んで下さい。今回はdiv>ul>liになるようにしました。0){$("#hatebuList").append("<p>データを読み込めませんでした。')</span></li>');}}}</script>functionの後ろをcallbackの箇所と合わせます。ifの{}中が読み込めなかった用。elseが読み込めた場合の処理。以下がそのサンプルページです。はてブ人気エントリーをJSで設置これで自由な形で出来るので、デザインの幅が広がるかと思います。両方を比べてみたら、そんなに変わらなかったです。作り方が悪いとかあるかもしれませんが。他にもこのような記事がありますInstagramのapiを使って写真を表示する2013年まとめ、こんな記事書いた。Drawerこのサイトについてホームページ制作のマークアップエンジニアをしています。このブログはWebに関する記事を扱っています。自分で作ったものや試したもの調べたものを紹介しています。webdrawer.netページTOPへ戻る。