2009/08/13

PhotoShareのブログパーツ(テスト)

追記:その3を書きました。
その2を書きました。
iPhoneを購入してからというものPhotoShareの魅力にすっかりはまってます^^
調べたらJSONPに対応してましたので、テスト的にブログパーツを書いてみました。
(最新のサムネイル画像を表示させるだけの超シンプルなパーツです)
callback関数名はhandlePhotoShareで固定なようです。
(xxx.json&callback=hogeとして、ちっとも出来ずはまってましたが、xxx.jsでOKでした)

データ形式は以下。見れば大体何のデータかはわかると思います。

handlePhotoShare([
{
"title": "\u713c\u304d\u3068\u3093\u304b\u3064 \u306a\u3046",
"created_at": 1250074141,
"image": "http://images.bcphotoshare.com/storages/1557861/medium.jpg?from=js",
"thumbnail": "http://images.bcphotoshare.com/storages/1557861/thumbnail.jpg?from=js",
"thumbnail_68": "http://images.bcphotoshare.com/storages/1557861/thumb68.jpg?from=js",
"url": "http://www.bcphotoshare.com/photos/114653/1557861?from=js",
"author": {
"name": "nakahide",
"url": "http://www.bcphotoshare.com/photos/114653/"
}
},

ブログパーツのスクリプトです。
使い方は簡単。
以下の最後のほうにある"114653"という数字を自分のPhotoShareID(Web版PhotoShareにログインしてMyPhotoを表示させたときのURLにあります)に変更して、自分のブログに貼り付けるだけです。

<div id="title"></div>
<div id="thumbnail"></div>
<script type="text/javascript">
function handlePhotoShare(data){document.getElementById('title').innerHTML = data[0].title;
document.getElementById('thumbnail').innerHTML = '<a href="' + data[0].url +'"><img src="' + data[0].thumbnail + '" border="0"></a>';}
</script>
<script type="text/javascript" src="http://feeds.bcphotoshare.com/users/114653.js"></script>

3 件のコメント:

Satoshi さんのコメント...

Life is beautifulの中島です。ちゃんと動いていることを確認しました。テストありがとうございます。

konot さんのコメント...

はじめまして。tweet拝見して参りました。PhotoShareの画像の表示にはRSSプラグインなどを試し頓挫していましたので助かりました。ありがとうございます^^。

なかひで さんのコメント...

なかひで です。
コメントありがとうございます。
PhotoShare、フォローさせていただきました。よろしくお願いします。:ー)