Dribbbleの投稿をjQueryで自分のサイトに表示させる

Ads

ちょっと調べ物をしたので備忘録です。
デザイナー専門のコミュニティサイト、
Dribbbleの投稿を自分のサイトに表示
させる方法。APIとjQueryを使って表示
させて見ます。日本ではDribbbleの利
用者は少なそうですけど・・

Dribbbleはデザインなどの成果物を投稿し合うコミュニティサイトです(多分。よく知らない)。最近はフリーで配布されるようなアイコン集などにもDribbbleのアイコンが含まれているみたいです。

この、Dribbbleへの投稿内容を自分のサイトに表示させる、というのが今日の内容です。

Sample

僕はDribbble使った事ないので他の方のID借りた。thx:Jonathan Quintin

投稿のサムネとリンクだけのシンプルなものです。

コード

$.getJSON("http://api.dribbble.com/players/ユーザーID/shots?callback=?", function(data) {
           $.each(data.shots, function(index, shot) {
               $("#dribbble").append("<a href='" + shot.url + "' target='_blank'><img src='" + shot.image_teaser_url + "' /></a>");
           });
       });

JSONデータで受け取れるのでそのまま普通にeachで回します。

<div id="dribbble"></div>

あとはセレクタに指定した要素を用意すればそこに表示されます。

他にもタイトル(shot.title)とかコメント数(shot.comments_coun)とかショートコード(shot.short_url)とか作成日(shot.created_at)とか取れます。以上です。APIは以下をご確認下さい。眠い。

Dribbble API βββeta