Flickrのバッジを使ったMoblog

サイドバーに設置してあるMoblogについて質問があったので自分用のメモを兼ねてエントリしておきます。

まず、必要なもの。

  • Flickrアカウント(フリーでもProでも可)
  • iPhone(他の携帯でも可)
  • JavaScriptが設置出来るBlog

次にFlickrの純正バッジ生成ページでコードを生成します。

  • 種類はAn HTML badgeを使用します。
  • 表示する画像は自分(Yours)任意のSetに入っているもの(Public content from one of your sets:)を出すように設定。
    ここでは携帯用にMOBLOGというセットを作っておいてそれを指定しています。
    (先にセットを作っておかないと指定できません)
  • レイアウトはicon & screenname無し、写真数1、最新(Most recent)、サイズはMid-size、並べる方向はVertical(実は一枚なのでどれでもいい)を選択しておく
  • カラーではNo background、No borderにしてLinks、Textはそのままで次へ

これでFlickr側のコードが出来たのでここから必要なコードだけ抜き出して改造していきます。

吐き出されるコードがTABLEを使っているのと、最近ではJavaScriptをOFFにしている人はほとんどいないと思うので、必要なのは18行目だけ。
JavaScriptをDIVで囲んでCSSを付けてやります。
ウチではこんな感じ。(実際はCSSは外部に書いています)

<style type="text/css">
.mo {width:188px; text-align:center; padding: 35px 12px 51px 11px; background: url(http://zero-hl.ddo.jp/DL/blog_dl/moblog.png) no-repeat left top;}
.mo img {background-color:#fff; padding:3px; border:1px solid #ddd;}
</style>
<div class="mo"><script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=1&amp;display=latest&amp;size=m&amp;layout=v&source=user_set&user=85063250%40N00
&set=72057594110602844"></script></div>

※JavaScript内は改行せずに記入します。

出来上がりはこんな感じ

あ、iPhoneからアップロードされる写真に自動で上で設定した任意のSetに入るようにするのを忘れずに。
ウチではiPhoneからFlickrへのアップロードされる写真はBrightkite経由にしているのでそちらで設定しています。
もちろんFlickr純正のメール投稿でも設定がありますのでそちらを使ってもOKです。

Flickrのバッジを使ったMoblog” への2件のフィードバック

  1. 詳しい解説ありがとうございます。
    理屈はなんとなく分かりました。
    backgroundで指定している画像は自作でしょうか。この画像がかっこ良いなあと思っています。

  2. > Junさん
    背景も自作ですよ。よかったらcssの部分にアドレスがあるので持って行って下さい。

コメントを残す