eternalheart.com: Flickrのサムネイルをmovabletypeに表示（mt以外のblogも）

リニューアルをして右上部にFlickrの写真を4つ並べるようにしました。

リニューアルの前まではFlickrPublicPhotos Pluginを使ってFlickrの写真を表示させていました。

非常によく出来ていて良かったのですが、写真をランダムにピックアップできません。

たくさんの写真をflickrにストックしているのに結局表示されるのは最新のn枚だけ。

少しさびしいです。

また、MTのプラグインなので、再構築をしないと表示される内容も変わりません。

そこで、上の写真のように、ランダムに写真がピックアップされて、再構築をすることなく表示する写真を変えるようにしてみました。

flickr badgeを使う

考えた方法は何にも難しいものではなくて、Flickr badgeのHTML版の方を使うというものです。

これはページを表示するたびにjavascriptがflickrから写真を呼びに行って表示させるというものです。

いろいろなパラメーターが用意されていますのでその値を変えることによって呼び出す写真の枚数や、種類などを変える事ができます。

また、flickrから呼び出されたコードは<div>でくくられ、class属性もも振られている画像なのでスタイルシートでいかようにもレイアウトを変更できます。

という事で、これを使えばランダムに写真をピックアップしてくれますし、ページを表示するたびにいろいろな写真を呼び出しますので飽きることもありません。

自分は上の写真のように4枚のスクウェアの写真を横に並べて写真に影が付くようにシャドウを書き込んだ背景画像を用意して表示してみました。

まずは元となるソースコードをFlickrから取得します。

適当にFlickr badgeのウィザードを進めていけばよいのですが、

・写真の枚数（How many photos would you like to show?の部分）
・最新の写真かランダムかの選択（Which ones?の部分）
・写真のサイズの選択（What size?の部分）

はここで指定しておくとよいです。

後から変更することも可能ですし枚数は選択肢が少ないので後から変えることもあるかと思いますが、ここで決められれば手間がかからないですもんね。

・レイアウトの選択（Which orientation would you like?の部分）

はNoneを選択しておきます。

最後まで進めると貼り付けるためのコードが表示されます。

コードの上部分がスタイルシートになっていますのでこのあたりをいろいろと変更する事によってレイアウトなどを変えることができます。

javascriptの部分(改行を加えていますが一行です。)

<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1
&count=4&display=random&size=s&layout=x
&source=user&user=●●●●"></script>

ここが写真をどうやって引っ張ってくるかの設定になっています。

見てみると大体想像が付くと思いますがcount=4の部分は写真の枚数です。

user=●●●●はユーザーを特定しています。

size=sはスクウェアサイズ、他にsize=tでサムネイルサイズとなります。

自分はこの合わせ技で満足する表示が出来ました。

参考までにソースを公開します。

HTMLの部分

<div id="flickr_badge_uber_wrapper">
<div id="flickr_badge_wrapper">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1
&count=4&display=random&size=s&layout=x
&source=user&user=40332866%40N00"></script>
<br clear="all" />
<div id="flickr_www"><a href="http://www.flickr.com">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a></div>
</div>
</div>

css部分

/*-------------------------------------
/* flickrバッジ
/*-------------------------------------*/

#flickr_badge_uber_wrapper {
background-image: url(<$MTBlogURL$>images/flickr_bg.png);
margin-top: 10px;
background-repeat: no-repeat;
height: 105px;
}
#flickr_badge_wrapper {
padding-top: 8px;
padding-left: 20px;
}
.flickr_badge_image {
margin:0 10px 2px 0;
float: left;
}
#flickr_www {
text-align:right;
padding-right: 30px;
}
#flickr_www a {
font: 11px Arial, Helvetica, Sans serif !important;
color:#3993ff !important;
}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {
text-decoration:none !important;
background:inherit !important;
color:#FFFFFF;
}