flickrにアカウントをもっていて、たまに撮った写真とかを適当にアップしてたりするのですが、このflickrにあげた画像をこのサイトや他のサイトでも表示させたい！　ということで、まずは簡単に、自分のアカウントの画像を人気のある順に表示させるということに挑戦というか、組み込みをしたいとおもいます。flickrはAPIとかも提供してるので、そもそもflickrを選んで使っているってコトもありますので。

まずは、flickrのサービスページで概要をチェック。
http://www.flickr.com/services/

ITproの記事に沿って
http://itpro.nikkeibp.co.jp/article/COLUMN/20061101/252356/

まずは、Yahoo.comのAPI KEYを取得

flickrのIDを持っていない場合は、サインアップが必要ですが、IDを持っている場合は、そのまま
Explore　> Flickr Services
から、　"Your API Keys"　をクリックして、APIキーの発行を行います。そのさいに、商用、非商用など利用用途の申請、何に使うかなんていうことを申請しておきます。

Javascriptファイルの記述

/*

date-posted-desc	アップロード日時の新しい順

date-posted-asc	アップロード日時の古い順

date-taken-asc	撮影日時の古い順

date-taken-desc	撮影日時の新しい順

interestingness-desc	人気の高い順

interestingness-asc	人気の低い順

relevance	関連度の高い順

*/
// 画像検索を行う関数

function photo_search ( param ) {

// APIリクエストパラメタの設定

param.api_key  = '*********************************';

param.method   = 'flickr.photos.search';

param.per_page = 4;

param.sort     = 'interestingness-desc';

param.format   = 'json';

param.jsoncallback = 'jsonFlickrApi';

 // APIリクエストURLの生成(GETメソッド)

var url = 'http://www.flickr.com/services/rest/?'+

obj2query( param );
 // script 要素の発行

var script  = document.createElement( 'script' );

script.type = 'text/javascript';

script.src  = url;

document.body.appendChild( script );

};
// 現在の表示内容をクリアする

function remove_children ( id ) {

var div = document.getElementById( id );

while ( div.firstChild ) { 

div.removeChild( div.lastChild );

}

};
// オブジェクトからクエリー文字列を生成する関数

function obj2query ( obj ) {

var list = [];

for( var key in obj ) {

var k = encodeURIComponent(key);

var v = encodeURIComponent(obj[key]);

list[list.length] = k+'='+v;

}

var query = list.join( '&' );

return query;

}
// Flickr検索終了後のコールバック関数

function jsonFlickrApi ( data ) {

// データが取得できているかチェック

if ( ! data ) return;

if ( ! data.photos ) return;

var list = data.photos.photo;

if ( ! list ) return;

if ( ! list.length ) return;
 // 現在の表示内容（Loading...）をクリアする

remove_children( 'photos_here' );
 // 各画像を表示する

var div = document.getElementById( 'photos_here' );

for( var i=0; i<list.length; i++ ) {

var photo = list[i];
 // a 要素の生成

var atag = document.createElement( 'a' );

atag.href = 'http://www.flickr.com/photos/'+

photo.owner+'/'+photo.id+'/';

atag.target = '_blank';
 // img 要素の生成

var img = document.createElement( 'img' );

img.src = 'http://static.flickr.com/'+photo.server+

'/'+photo.id+'_'+photo.secret+'_s.jpg';

img.style.border = '0';

atag.appendChild( img );

div.appendChild( atag );

}

}

HTMLファイル側の記述

<script type="text/javascript"><!--


window.onload = function () {


photo_search({ user_id: '***********' });


}


--></script>


<div id="photos_here">Loading...</div>

flickr-search.js　を作成して、ID、表示の設定を入力して所定のディレクトリにアップします。

あとは、スタイルを揃えてアップするだけで、flickrにアップされた写真を表示することができます。

flickrにアップしてある写真