Flickrの写真をMovableTypeに表示 (FlickrPublicPhotos Plugin)

2006_0513.jpg
flickrもProアカウントを取ったことですし、昔の写真からどんどん乗せていってるんですが、そうなるとブログ上にランダムに写真を載せたいなと思います。

で、早速チャレンジです。

調べてすぐにこれだ!と思ったのはOgawa::MemorandaさんのFlickrPublicPhotos Pluginで、これはflickrのまさにflickr内の自分の写真をさまざまな形でリストアップしてくれます。

導入に際してちょっと分からないところがありました。

必要なものに

Cal Henderson作の以下の3つのPerl Moduleがインストールされている必要があります。
Flickr::API
XML::Parser::Lite::Tree
XML::Parser::Lite::Tree::XPath

とありまして、これがよく分からない。

ちょっと挫折しかかりましたがblog:N@TURE BRAINさんのFlickrのPhotosetをMovableTypeに表示する (MTFlickrPhotosets)にこの3つのPerl Moduleのインストール方法が書かれているの発見!

これを参考にされていただきました。

インストール

MovableTypeのpluginsディレクトリにFlickrPublicPhotos.pl(入手はこちら)をアップロード。

MTCGIPath/extlib/Flickrを作成してAPI.pmをアップロード。

MTCGIPath/extlib/Flickr/APIを作成してRequest.pmとResponse.pmをアップロード。

MTCGIPath/extlib/XML/Parser/Liteを作成してTree.pmをアップロード。

MTCGIPath/extlib/XML/Parser/Lite/Treeを作成してXPath.pmをアップロード。

以上で終了。メインメニューの「利用可能なプラグインの設定」にFlickrPublicPhotos Pluginがあるか確認します。

テンプレート修正

使えるタグはこちら(FlickrPublicPhotos Plugin)で確認してください。

私はトップページの中央カラム、記事の上にスクエア画像を6個並べるようにし、写真をクリックするとミディアムサイズの画像がlightboxの効果で浮かび上がるようにしました。

写真をクリックしたらその写真のflickrのページに飛ばすのもありですがせっかくの効果を楽しみたいなと思いまして。

その代わりに右下にflickrへのリンクをつくっておきました。

<p> <MTFlickrPublicPhotos user="(ユーザーID)" random="6"> <a href="<$MTFlickrPublicPhotoImgURL size="m"$>" title="<$MTFlickrPublicPhotoTitle encode_html="1"$>" rel="lightbox"> <img class="flick_sq" src="<$MTFlickrPublicPhotoImgURL size="sq"$>" /> </a> </MTFlickrPublicPhotos> </p> <div class=" flickr_link">Flickr Photo Stream <a href="http://www.flickr.com/photos/ash427/" target="_brank">Go! <img src="http://eternalheart.com/img/flickr_logo.gif" title="Flickr" /></a> </div>

スタイルシートの修正

画像をぴったりくっつけたいのでいろいろやってみたんですが結局こんなんでできました。正解?

.flick_sq { float: left; }

もっとすっきりかけるのかもしれませんがこんなもので・・・
見せ方はいろいろ試して見たほうがいいですね。

まっ一応形になりました。

URL : http://www.eternalheart.com/cgi/mt/mt-tb.cgi/200

» Movable Type用のFlickrプラグイン from [N]
xiaostyle.orgの運用にあたり、いろいろと調べていたところ、Movable TypeにFlickrプラグインを入れてみるのも一つの方法かと思い調... 続きを読む

» Web/MovableType/Filckr from kwWiki (PukiWiki/TrackBack 0.3)
Filckr ★ ↑Flickrの画像を表示する ★ Flickrを画像置き場にしてそのリンクを張ってブログを書きたいと思います。 Mov... 続きを読む

楽天アフィリエイト

eternalheart.com

サイトのモバイル対応

サイトのモバイル対応を行いました。

携帯電話
http://www.eternalheart.com/m/

iPhone/iPod touch
http://www.eternalheart.com/i/

よろしければどうぞ~~