Flickr Badgeをブログにつけてみる

昨日に引き続き、「ブログ」カテゴリの記事を行ってみます。昨日はブログにTwitterの最新つぶやきを表示する機能を付けてみました。今回は、Flickrにアップロードした写真をいくつかサムネールで表示する機能を付けてみます。

Flickr_badge_06 記事執筆時点。

まず、Flickrのサイトに行きます。下の方にメニューがあり、「Help」の列に「Tools」がありますから、そこをクリックします。次に表示されるページの右の方から、「Hey! Where is the badge?」と書かれたリンクをクリックします。そこが、「Flickr Badge」の作成場所です。

すでにデフォルトのBadgeが表示されていますが、ここでHTMLバージョンかFlash!バージョンかを選ぶことができます。あとあとカスタマイズすることを考えれば、HTMLバージョンの方がよいでしょう。「NEXT」をクリックして次に進みます。

Flickr_badge_01

表示する写真の種類を選びます。「Yours」は自分の写真という意味になります。「All of your public photos and video」を選ぶとすべての写真や動画になりますが、タグを指定して絞り込むこともできます。「Next」をクリックして次に進みます。

Flickr_badge_02

レイアウトを指定します。アイコンの有無、表示する写真の数、写真の選び方、大きさ、方向を指定できます。これらは、最後にはき出されるコードを修正すればカンタンにカスタマイズできますので、極端な話デフォルトでかまいません。「NEXT」をクリックして次に進みます。

Flickr_badge_03

色を設定します。背景、写真の縁、リンクテキストの色などです。背景を指定しない、縁を指定しない、なども指定できます。ここも、コードを直接修正すればカスタマイズできます。

Flickr_badge_04

最後です。コードがはき出されますので、これをコピーして自分のブログに貼り付ければOKです。

Flickr_badge_05

後の方にあるscriptタグのsrc属性の中身を変えると、表示の方法をあとからも変えることができます。shownameを0にすると、アイコンと名前の表示をなくせます。countには写真の枚数を指定できますが、10を超える数を指定しても意味がないようです。displayをrandomにすればランダム表示ができます。sizeをsにすればSquare(真四角)に、mにすればやや大きめのサイズにできます。layoutをhにすれば横方向の表示になります。

src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=3&display=latest&size=t&layout=v&source=user&user=46391599%40N08"

色などを変えるには、他の部分をいじくる必要がありますが、ここでは省略します。いろいろ試して自分だけのFlickr Badgeを作ってみましょう。

コメント