2007年3月5日 星期一

HEMiDEMi JSONP - 誰收藏/迴響討論本文

HEMiDEMi 提供了書籤收藏者與迴響的 RSS 可以利用,讓 HEMiDEMi 的使用及推廣變的很容易。
然而,如果能夠提供 JSONP 的格式,然後利用 Ajax 的方式呼叫,這樣能夠應用的範圍更廣更方便了,除了現有的 Scriptlet 外,任何 Blog 的主人能夠使用 JSONP 的 API 來自已寫 callback ,來客製化呈現效果。
所以能很容易呈現像 digg 的收藏或迴響人數小貼紙效果,或迴響跑馬燈等.....
##CONTINUE##







ScreenShot:

ALL-IN-One 線上體驗:
http://blogger.ext2.googlepages.com/hemidemijsonptest


將 HEMiDEMi RSS 轉 JSONP:
我為 HEMiDEMi 利用 Yahoo Pipes 寫一個 Pipes ,也就是把這個 Convert Wrapper 的重責大任就交給了 Yahoo!
Yahoo 自家的服務主機決對是快/穩/永續,由於不是使用阿土伯的個人主機,大家可以安啦~~
再加上 Pipes 可以被大家自行 clone 備份/修改,很符合阿土伯我要的 open 分享原則。

阿土伯的 Pipes URL:
http://pipes.yahoo.com/pipes/WrTsvJ3H2xGe5V4j00qv4w/


它接受傳入二個參數:
  • urlmd5 - 也就是您收藏在 HEMiDEMi URL 的 md5 值。如: 17fc22b61f683ac80f3b17d2df9d779a
    這部份產生後面js會自動為您算出。
  • hemitype - 可以傳入 users 和 comment ,分別則是收藏者及迴響。
OK! 利用這個 Pipes , HEMiDEMi 等於提供了 RSS/JSON/JSONP 的 API 給各位使用了。


HEMiDEMi Javascript API:
HEMiDEMi Pipes 提供了您 JSON / JSONP 的方式,所以您可以在 Server-Side 利用 JSON 處理資料。
亦可以在 HTML + Javascript 使用 JSONP 的方式來處理資料。

阿土伯亦寫了一個小小的 Javascript 供大家直接引用,它 hosted 在 code google , 同樣的精神,open and share.
首先先引入 javascript:

<script type="text/javascript" src="http://blogger-ext2.googlecode.com/files/hemidemi_json.js"></script>

然後您則可利用:
hemidemi_users(url,callback) - 即可得到收藏者 JSONP , 並呼叫您的 callback handle function
hemidemi_comments(url,callback) - 即可得到迴響者 JSONP , 並呼叫您的 callback handle function

hemidemi_users, hemidemi_comments 會自動為您產生 callback handle wrapper function, 為您處理資源善後的動作(清除 script tag )
url 不傳值,則會自動抓取目前網頁。
callback 不傳值,則會自動呼叫 defaultHandleHemidemi 的 Function .


手動建立 JSONP 的呼叫:
createJSONP(url) - 則會動態得到 JSONP 的呼叫.


當然,為了方便大家使用,阿土伯實作了幾個範例 Scriptet:
UPDATED: 全面取消使用 document.write 已達到 Blogger 相容,這點和 CK 不同~~ 請更新~

CK 誰在 HEMiDEMi 收藏了我? 相對應的 scriptlet:

<div id="hemidemi_users_box" class="hemidemi_box"></div>
<script type="text/javascript" src="http://blogger-ext2.googlecode.com/files/hemidemi_json.js"></script>
<script type="text/javascript" src="http://blogger-ext2.googlecode.com/files/scriplet_hemidemi_users.js"></script>

應用到的 css style,請參考 CK 的教學,CK 的教學寫的非常清楚哦。

CK 誰在 HEMiDEMi 背後講我? 相對應的 scriptlet:
應用到的 css style,請參考 CK 的教學,CK 的教學寫的非常清楚哦。

<div id="hemidemi_comments_box" class="hemidemi_comments"></div>
<script type="text/javascript" src="http://blogger-ext2.googlecode.com/files/hemidemi_json.js"></script>
<script type="text/javascript" src="http://blogger-ext2.googlecode.com/files/scriplet_hemidemi_comments.js"></script>


收藏人數小貼紙:

<div id="hemidemi_users_count_box" class="hemidemi_count"></div>
<script type="text/javascript" src="http://blogger-ext2.googlecode.com/files/hemidemi_json.js"></script>
<script type="text/javascript" src="http://blogger-ext2.googlecode.com/files/scriplet_hemidemi_users_count.js"></script>


迴響人數小貼紙:

<div id="hemidemi_comments_count_box" class="hemidemi_count"></div>
<script type="text/javascript" src="http://blogger-ext2.googlecode.com/files/hemidemi_json.js"></script>
<script type="text/javascript" src="http://blogger-ext2.googlecode.com/files/scriplet_hemidemi_comments_count.js"></script>

應用到的 css style:

.hemidemi_count {
float: left;
width: 51px;
height: 52px;
background: transparent url(http://blogger.ext2.googlepages.com/shade-hemi.gif) no-repeat scroll 0%;
margin: 2pt;
padding:0pt;
font-size:85%;
text-align:center;
}

.bookmark_count {
color: white;
margin: 0px 0px;
padding: 6px 0px;
}


最後,利用 JSONP 發揮大家的想法,做出各總種 HEMiDEMi 應用出來吧~~~ :D



Technorati Tags: ,
張貼留言