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プラグインを入れてみるのも一つの方法かと思い調... [Read more]

Web/MovableType/Filckr From kwWiki (PukiWiki/TrackBack 0.3)

Filckr ★ ↑Flickrの画像を表示する ★ Flickrを画像置き場にしてそのリンクを張ってブログを書きたいと思います。 Mov... [Read more]

Powered by Ajax Comments

楽天アフィリエイト

eternalheart.com

『MyMinCity』

クリックしていただくと街が育っていくゲームです。

http://negishi.myminicity.com/

どうぞアクセスしてください!

Calendar

Recent Entries
Recent Comments
Recent Trackbacks
Blog People
 
Search this site

キャッシュ使用
ダイエット中!
eternalheartの体重
 
Tetsu

2004_0104_100306.jpg

横浜で生まれ育ち、結婚後も横浜在住のハマっこです。

ワーホリで行ったオーストラリアが忘れられません。
また行きたい!!

Blog Pick up
Category
Monthly Archives
  • 2008年
    • 8 [2]
    • 7 [6]
    • 6 [3]
    • 5 [9]
    • 4 [6]
    • 3 [7]
    • 2 [2]
    • 1 [6]
  • 2007年
    • 12 [16]
    • 11 [22]
    • 10 [4]
    • 9 [3]
    • 8 [6]
    • 7 [5]
    • 6 [7]
    • 5 [5]
    • 4 [12]
    • 3 [16]
    • 2 [3]
    • 1 [13]
  • 2006年
    • 12 [19]
    • 11 [12]
    • 10 [24]
    • 9 [16]
    • 8 [24]
    • 7 [7]
    • 6 [15]
    • 5 [33]
    • 4 [20]
    • 3 [33]
    • 2 [20]
    • 1 [11]
  • 2005年
    • 12 [11]
    • 11 [5]
    • 10 [11]
    • 9 [14]
    • 8 [28]
    • 7 [10]
    • 6 [11]
    • 5 [5]
    • 4 [1]
    • 3 [1]
    • 2 [1]
    • 1 [6]
  • 2004年
    • 12 [17]
    • 11 [18]
    • 10 [3]
    • 9 [7]
    • 8 [8]
    • 7 [23]
    • 6 [9]
    • 5 [1]
    • 2 [1]
    • 1 [2]
  • 2003年
    • 12 [1]
    • 10 [3]
    • 9 [3]
    • 8 [6]
    • 7 [2]
    • 6 [3]
    • 5 [2]
    • 4 [7]
    • 3 [9]
    • 2 [7]
    • 1 [13]
  • 2002年
    • 12 [9]
    • 11 [6]
    • 10 [36]
    • 9 [25]
    • 8 [11]
    • 7 [31]
    • 6 [33]
    • 5 [16]
    • 4 [40]
    • 3 [41]
    • 2 [37]
    • 1 [36]
  • 2001年
    • 12 [20]
    • 11 [22]
    • 10 [20]
    • 8 [4]
    • 7 [6]
    • 6 [9]
    • 5 [3]
    • 3 [8]
    • 2 [6]
    • 1 [5]
  • 2000年
  • 1999年
Mail Form