Tag Archives: flickr

WordPressにFlickr画像を添付＆リンク

Posted on by
Reply

WordPressはoEmbedというのに対応していて、YoutubeやFlickrのURLを記事に貼り付けるだけで、メディアを埋め込むことができる。

これはこれで便利なのだが、先日FlickrのURLを貼りつけた際に、画像は埋め込まれる一方で、大元のページ上にリンクが貼られないことが気になった。
（ちなみに、A要素で囲んだときには、メディアが埋め込まれない。。。）

これでは、人様の写真を紹介するつもりでも、結果的にパクったことになってしまう。
（リンクをはってもパクってることには変わりないかもしれないけど。）

Flickrにリンクをはるフィルタープラグイン

以下のソースをテーマファイルのfunctions.php内にコピペするか、この記事を参考にして簡単プラグインを作成して、その中にコピペする。

add_filter('oembed_result', 'filter_flickr', '', 3);

function filter_flickr($html, $url, $args){
    if (preg_match('/http:\/\/(www\.)?flickr\.com\/.*/', $url)) {
        return "<a href=\"{$url}\">{$html}</a>";
    } else {
        return $html;
    }
}

上記を上手く適用できると画像にリンクが貼られる。
ちなみに正規表現をimg要素にマッチするようにすれば、その他の画像共有サイトにも対応できるような気もする。

ちなみに

oEmbedの結果はキャッシュされるらしく、保存済みの投稿には適用されない。
そんなときは、保存しなおすと適用される。

実は、これに気がつかなくて、すごーくハマった。

Flash iTunes Cover Flow + Flickr API

Posted on by
8

Flash iTunes Cover Flowをカスタマイズして、FlickrのJSON APIを読み込めるようにしました。

これを利用すれば、Flickrの画像検索ページを作成するのも簡単です。

また、ご自身の画像を手軽にスライドショーにするブログパーツとしても利用しやすいと思います。

概要

このパッケージは、FlickrのJSON APIを読み込んで、上記のようなスライドショーを出力するための一連のファイルが含まれています。

パッケージ内には、

  • iTunesAlbumArt.fla
  • iTunesAlbumArt.swf
  • load_image.php
  • cacheディレクトリ
  • 各種ドキュメント

等が含まれています。

なお、このパッケージは、WEBER DESIGN LABS様がMITライセンスで配布しているものに対して、Flickr JSON APIに対応するよう独自の修正を加えています。

従いまして、このパッケージに関するお問い合せをWEBER DESIGN LABSにされませんようお願い申し上げます。

動作環境

PHP + GD2が必要です。

ダウンロード

以下のリンクからダウンロードしてください。
ダウンロード（Download）

利用方法

添付のドキュメントを参照してください。

オリジナルとの相違点

  • XMLの代わりにFlickrAPIのJSONを読み込むようになっています。
  • 日本語が表示されます。
  • 画像までのパスがHTMLからの相対パスだったものをswfのカレントディレクトリ内に固定しました。
  • Flickrから画像を取得してサムネールを生成するload_image.phpというファイルが追加されています。

ライセンス

本家と同じくMITライセンスとします。

ただし、気に入っていただけた方からの寄付は歓迎します。

Flickr APIを使う

Posted on by
Reply

すぐに忘れてしまうので、ソースをメモ

実際のデモ

以下の画像は実際にFlickr APIを利用して、natureで検索してヒットした画像を人気順に8件表示するという処理を行っています。
JavaScriptなので、このBloggerでも動きます。

設置方法

以下は、flickr_photosという値のID属性をもつDIV要素内に写真をだーっと並べるだけのサンプルです。

Flickr APIでJSONデータを取得する

JSON Response Formatのページなどを参考にしてJSONを取得する。

以下のソースを適当に設置する

JSONを取得するためのコードより前に記述しておく必要があります。

function jsonFlickrApi( obj ){
  if( obj.stat != 'ok' ){
    return false;
  }

  document.getElementById('flickr_photos').innerHTML = '';
  document.getElementById('flickr_photos').style.textAlign = 'center';
  var p = obj.photos;

  for( var i=0; i<p.photo.length; i++ ){
    var id = p.photo[i].id;
    var owner = p.photo[i].owner;
    var secret = p.photo[i].secret;
    var server = p.photo[i].server;
    var farm = p.photo[i].farm;
    var title = p.photo[i].title;
    var ispublic = p.photo[i].ispublic;
    var isfriend = p.photo[i].isfriend;
    var isfamily = p.photo[i].isfamily;

    var url = 'http://www.flickr.com/photos/'+owner+'/'+id+'/';
    var oimg = 'http://static.flickr.com/'+server+'/'+id+'_'+secret+'.jpg';
    var simg = 'http://static.flickr.com/'+server+'/'+id+'_'+secret+'_s.jpg';

    var img = document.createElement('IMG');
    img.src = simg;

    var link = document.createElement('A');
    link.title = title;
    link.href = url;
    link.insertBefore(img, null);

    document.getElementById('flickr_photos').insertBefore(link, null);
  }
}

弊社が運営するエコ生活でも使ってます。