Flickrにアップされた写真にリンクされたサムネイルを表示する公式APIのおぼえがき。
上のサンプルを表示するのは以下にようになります。
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=7&display=latest&size=s&layout=y&source=user_set&user=38294520%40N06&set=72157621994617959"></script>
script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?
これがflickr.comにある本体へのURLになります。
?以降にパラメータを設定します。
◆ count= [ 1 - 10 ]
表示するサムネイルの件数を設定します。(最大10件)
◆ display= [ latest / random ]
表示する画像を latest (最新から) random (ランダム) で指定します。
◆ size= [ s / t / m ]
サムネイルの大きさを指定します。
s = 75px * 75pxの正方形にします
t = 横幅を100pxに固定して、縦幅は同じ縮小率になります
m = 横幅を240pxに固定して、縦幅は同じ縮小率になります
◆ layout = [ x / y ]
サムネイルの表示方向を x (縦) y (横) で指定します。
◆ source= [ user / user_set / group ]
表示する画像のソースを指定します(サンプルはuser_setです)。
user = 対象とするユーザIDを指定します
user_set = ユーザIDの特定セットが対象となります(userと併用します)
group = 特定グループに投稿されたユーザIDが対象になります(userと併用します)
ユーザ番号の調べ方 http://www.flickr.com/photos/38294520%40N06/
セット番号の調べ方 http://www.flickr.com/photos/38294520@N06/sets/72157621994617959/
グループ番号の調べ方 http://www.flickr.com/groups/51035577168%40N01/
複数のパラメータを設定する時は、2つ目以降のパラメータの頭に & を加えて繋いでいきます。
このScriptを<div>などで囲ってCSSを定義します。
CSSはimgタグに対しての定義となります(サンプルでは border:none; と margin-right:2px; を定義しています)。
CSSでレイヤーサイズを固定にすることで このページ 右側のような3*3の正方形も可能です。