FlickrExを導入してみた

役立つ(と思う)おはなし

写真をFlickrからリンクしてきたとき、写真の下にExif情報を自動表示してくれる"FlickrEx"を導入してみました。

かんたんな手順



  1. ブログ設定の"デザイン設定"から"カスタマイズ"->"+モジュールを追加"

  2. 本文に本家様の"初級編"からスクリプトを丸コピー。タイトルは適当に。

    <script type="text/javascript">
    //var FLICKREX_API_KEY = "18c9f79a96fd34c3b3f16a93fb0a5d3c";
    //var FLICKREX_EXIF_FORMAT = "%camera% / %Focal Length% / f/%aperture% / ISO %ISO Speed% / %Exposure% sec / %Exposure Bias% EV / %Software%";
    //var FLICKREX_EXIF_JQUERY_SELECTOR = "#content img";
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//github.com/drikin/FlickrEx/raw/stable/flickrex.min.js"></script>
<script src="//github.com/drikin/FlickrEx/raw/stable/exifex.min.js"></script>


  3. "//var FLICKREX_EXIF_FORMAT ="の行から"//"を削除して記述有効化。

  4. "var FLICKREX_EXIF_FORMAT ="の後に表示したいものを書く。

      • FlickrのExif dataで表示される項目名を"%"で囲めば対応するものが表示されます。
      • 区切り文字(/やら,やらスペースやら)は入力したとおりに表示されます。
      • htmlタグも使用できました。
      • うっかりダブルクォーテーションで全体を囲うのを忘れない・消さないよう注意。(期待通り表示されないな、と思ったらやらかしてた...)

  5. 文字デザインを変えるときはCSSでも。"デザインCSS"に書く。

    6. 見た目のカスタマイズ
    付加されたExif情報には.flickr-exifというクラス名が適応されてるので、CSSを追加することで文字サイズなどの見た目を調整出来ます。たとえばExif情報を少し小さく表示したかったら
    .flickr-exif {
    font-size: small;
    }
    みたいな感じでカスタマイズできます。


  6. なお、モバイルでは表示されない模様です。



導入にあたり以下のエントリーが参考になりました。ありがとうございます!
ブログに載せるFlickr写真にExif情報を自動表示 by FlickrEx - always one step forward
[D] Flickr画像に自動的にExif情報を付加するブログパーツ FlickrEx - Drift Diary XV




最後に、現在こんな記述で運用しておりますの紹介。↓

  • サイドバーモジュール側
<script type="text/javascript">
//var FLICKREX_API_KEY = "18c9f79a96fd34c3b3f16a93fb0a5d3c";
var FLICKREX_EXIF_FORMAT = "<strong><i>%Object Name%</i></strong><br>%camera% | f/%aperture% | %Exposure%sec | ISO%ISO Speed% | %Exposure Bias%EV | %Software%";
//var FLICKREX_EXIF_JQUERY_SELECTOR = "#content img";
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//github.com/drikin/FlickrEx/raw/stable/flickrex.min.js"></script>
<script src="//github.com/drikin/FlickrEx/raw/stable/exifex.min.js"></script>

.flickr-exif {font-size: x-small;}