• かちびと.net

    Dribbbleの投稿をjQueryで自分のサイトに表示させる方法。APIを使って表示させます。JSONでデータを受け取れるので楽で良いですね。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

ちょっと調べ物をしたので備忘録です。
デザイナー専門のコミュニティサイト、
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

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services