全くタイトルの通りなんですが、今更ながら写真共有サイトのFlickrにハマッています。
随分前にアカウントだけは取得してたんですが、どうしても英語に慣れることができずにしばらく放置していました。
ところがWordPressに移行したおかげ(?)で海外のサイトにぶち当たる経験が多くなり、自然と英語恐怖症が緩和していきました。
というわけで、8月に行った台湾旅行の写真をとりあえずアップしてサイドバーに表示してみました。
WordPressのプラグインを使っても同じようなことができるんですが、今回はFlickrのサイト内で作ることができる純正バッジを使いました。
この純正バッジを見付ける前はプラグインを使ってゴニョゴニョとやってみたんですがどうしても自分の気に入る感じにならなかったので、「困った時にはGoogle先生や!」ということでガサガサ検索したところ、次のような記事を見付けました。
flickrユーザーが、自分のブログ等にflickr上の写真を表示するためのバッジ。こちらでジェネレイトする事のできる純正のflickrバッジをCSSレイアウトにカスタマイズしたものです。右カラム内にあるものがそうです。mBlog – CSS Based FlickrBadge
純正のバッジだと写真の数が1、3、5、10枚のどれかしか選択できませんが、ソースを弄ることで何枚でもオッケーみたいです。
サイドバーに表示することを考えると6とか8枚など偶数がいいですよね。
上記のサイトにある通りにそのままコピペしてもいいんですが、弄るの大好きな私は当然ゴニョゴニョやっちゃいました。
参考になるか分かりませんが、自分用のメモ書きも兼ねて載せときます。
<div id="flickr-badge"> <p id="flickr-www"><a href="http://www.flickr.com"><strong>www.flick<span>r</span>.com</strong></a></p> <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=6&display=random&size=s&layout=v&source=user&user=12095433%40N02"></script> </div>
ここで、以下の記事にもあるように<script>~</script>にある「user=12095433%40N02」のところは各自のアカウントに沿って変更して下さい。
「user=」ユーザーIDの指定。最低限ここだけは変更しないと意味がありません。
example:55561732%40N00
自分もそうですが、flickr内で固有のハンドルを使っている人はURLに自分のIDが出ません。そういう方はidGettrというサイトで自分のIDが何であるかを調べる事ができます。自分の場合は「55561732@N00」なので、「@」部分が「%40」になり、「55561732%40N00」となります。
mBlog – CSS Based FlickrBadge
#flickr-badge {
width: auto;
}
#flickr-badge img {
margin: 0 8px 8px 0;
padding: 5px;
border: 1px solid #bababa;
}
#flickr-badge img:hover {
background: #3993ff;
}
p#flickr-www {
font-size: 11px;
margin-bottom: 5px;
}
p#flickr-www a:link, p#flickr-www a:visited {
color: #3993ff;
}
p#flickr-www a:hover, p#flickr-www a:active {
color: #3993ff;
text-decoration: underline;
}
p#flickr-www strong span {
color: #ff1c92;
}
これでサイドバーに綺麗に表示されるようになりました。
ランダム表示に設定しているので過去の写真も埋もれずに済むのでいい感じかなと思います。
ちなみに、Flickr関連で試してみたWordPressのプラグインは以下の2つです。
どちらもデータベースのエラーが出てしまったんですが、とうとう解決できずに断念しました(笑)