ページランク表示用ブログパーツ E-Pagerank











February 09, 2009

tumblr.の写真をブログにサムネイルで表示でキタ━━━━━━(゚∀゚)━━━━━━ !!!!

テーマ:blog and what not
過去エントリー(tumblr.はじめました。iPhone風デザインで… )で、tumblr.(タンブラー)を始めたことをお話ししましたが、結構はまっています。

ヘッダー下の右側に、tumblr.のアイコンを設置したのもお話ししたのですが、ちょっとこれだけでは満足できずに、ブログにtumblr.にアップした写真のサムネイルを表示させたくなっちゃいました。

で、Googleで「tumblr ブログ 表示」で検索したみたら、ずばりのWEBサイトがありました。それは、

うっちーさん(面識はないのですが、とても勉強になるブログです(●^o^●))が運営されている「BananaBlog」です。

Tumblr の写真をブログに表示してみる|BnananaBlog
http://www.banana21.com/blog/archives/0807302005.html

このなかでは、ブログツール(パーツかな?)で探していらっしゃって、ブログパーツなら、JavaScriptをコピペするだけですので、簡単だなと思いました。そこで、紹介されていたのは、次の2つです。

TumblrCube
http://www.blog-parts.com/link/3170.htm

Tumblrss
http://blog.creamu.com/mt/2008/01/tumblrrsstumblrss.html

うっちーさんとほとんど同じ意見なのですが、TumblrCubeは、クライアント側のPCスペックが高くないとカクカクになってしまいます。また、わたしのブログには、デザイン的に浮いてしまいそうでした。

Tumblrssは、重くはないのですが、写真限定ではなく、tumblr.にアップした全てのエントリーを拾って表示したり、例えば、写真の場合、サイズをブログでの表示に合わせて変更(サムネイルに)できないという欠点がありました。

で、これも二番煎じになるのですが、うっちーさんが探していただいていた、tumblr.が公開しているTumblrAPIを使った、PHPがあったので、これを使わせていただくことにしました(プログラム(スクリプト)をいじるのは、久しぶりだったので、不安でしたが・・・。なんとかかんとか。)。

Display photos from Tumblr (using JSON method) | drupal.org
http://drupal.org/node/277619

PHP5用のスクリプトなので、PHP4しか使えない環境では、変更が必要だそうです。

で、実際に導入するにあたって、PHPが動くサーバが必要になりました。

これまでは、無料のNINJA、FC2を使っていたのですが、残念ながらこのサービスではPHPは利用不可でした。

で、無料でPHPが使えるサービスを探したのですが、なかなか見つからず、PHPが使えても、上記のスクリプトでつかっているコマンドを実行できるモジュール(cHTML、JSON)が入っていなかったりで、無料では断念しました。

で、もうせっかくなので(iBLOGのアーカイブやお勧めブログを掲載した「iBLOG iNDEX 」もあるので)、有料でも格安のレンタルサーバを探すことにして、さくらレンタルサーバとロリポップ!(LOLIPOP)に行き着きました。最終的には、価格(さくらレンタルサーバ:500円/月、ロリポップ!:263円/月(ともに税込))から、ロリポップ!にしました。両サービスとも、試用できるので、もし、導入をお考えの方は、お試しください。

このことで、わたしの重い重いブログも少し、表示が速くなったような気が…します。

さくらレンタルサーバ
http://www.sakura.ne.jp/

【お勧め】ロリポップ!
http://lolipop.jp/?mode=home

Display photos from Tumblr (using JSON method)は、通常はそのまま、HTMLの<body>タグ内にコピペ(ただし、tumblr.のURLのサブドメイン部分は、ご自身のものに変更が必要です。)するだけで問題ないのですが、ただ、写真エントリーのdiscription(概要や説明)で<a>タグを使っているのでPHPのecho文を少し変えないと、変てこなHTMLが書きだされてしまします。

変更箇所です。ご参考までに。

変更前
for ($i=0;$i<=$item;$i++) {
if ($content[$i]['type'] == 'photo') {
echo '<a href="' . $content[$i]['url'] . '"><img src="' . $content[$i][$type] . '" width="75" hspace="3" alt="' . $content[$i]['photo-caption'] . '" title="' . $content[$i]['photo-caption'] . '" /></a>';
}
}
(Display photos from Tumblr (using JSON method) | drupal.org、URL:http://drupal.org/node/277619より引用)

変更後
for ($i=0;$i<=$item;$i++) {
if ($content[$i]['type'] == 'photo') {
echo '<a href="' . $content[$i]['url'] . '"><img src="' . $content[$i][$type] . '" width="75" hspace="3" /></a>';
}
}

問題点は、$content[$i]['photo-caption']で、tumblr.のdiscription内にある<a>タグも拾ってくること。これを使っている、属性altとtitleをさくっと消しちゃったわけです。

表示させる画像も<img>タグ内の属性widthで60pxにしました。

説明がかなり長くなりましたが、こんな感じになりました。

iBLOG-タンブラーサムネイル

ここで、サムネイル写真をクリックすると、tumblr.の該当写真のページにリンクさせています。ぜひ、クリックして遊びにきてください。

同様に、

iBLOG-tumblr_link

でも、tumblr.のトップページにリンクします。

その左隣に、スライドショーへのリンクバナー

iBLOG-tumblrslideshow_link

も設置していますが、こちらは、現在工事中なので、完成したら、またエントリーでお知らせしますね。

同じことをしたい場合、アメブロの場合、ヒントとして<iframe>や属性position(HTML、CSSいずれでも可能です。)を併用することで、こんな感じで、自由に配置できます。

初心者の方には、少々難しいと思いますが、お気に召した方がいらっしゃいましたら、がんばって、やってみてください。


最後に、ちょっと用語解説。

PHPとは 【PHP : Hypertext Preprocessor】 - 意味・解説 : IT用語辞典
http://e-words.jp/w/PHP.html

スクリプトとは 【script】 - 意味・解説 : IT用語辞典
http://e-words.jp/w/E382B9E382AFE383AAE38397E38388.html
PR

コメント

[コメントをする]

1 ■無題

ヾ(@°▽°@)ノすごい濃い内容

コメント投稿

[PR]気になるキーワード