分類
blog服務

新增HEMiDEMi文章加入書籤功能

今天才發現 HEMiDEMi 有個將網頁加入HEMiDEMi書籤的功能, (其實是從這個網頁發現的: http://blog.yam.com/syshen/archives/1410294.html), 於是就著手加自己的文章, 利用 HEMiDEMi來加點人氣, 並方便用戶收藏.

連上HEMiDEMi選右上角的[工具], 再選[小貼紙產生器]後, 即可進行小貼紙的產生, 由於它沒有直接 support TT 的 blog 語法, 所以就選其他囉, 不過奇怪的是其他的 href link 最後是 void((URL))這樣的語法, 想說是不是什麼新東東, 自行先測試發現並不會發生連結的結果, 於是就先手動改一下, 並改為用 onmousedown方式(不用onclick原因如後), 產生放在 TT 上用的 HEMiDEMi 的語法, 如下:

<a href=# target=_blank  onmousedown="desc='';via='';if(document.referrer)via=document.referrer;
if(typeof(_ref)!='undefined')via=_ref;
if(window.getSelection)desc=window.getSelection();
if(document.getSelection)desc=document.getSelection();
if(document.selection)desc=document.selection.createRange().text;
this.href='http://www.hemidemi.com/user_bookmark/new?
title='+encodeURIComponent('[ ##_article_rep_title_## ]')+'&url='+
encodeURIComponent('http://diary.tw[ ##_article_rep_link_## ]')+
'&description=
'+encodeURIComponent(desc)+'&via='+encodeURIComponent(via);
return true;" ><img src="http://www.hemidemi.com/sticker/clipcolor_8015.gif" border="0"></a>

(以上的 onmousedown 的 javascript 皆無斷行, 因排版需要有略做調整, 另外TT為避免衝碼, 也將 [ ] 和 ## 間加上了空白, 另外 onclick 會有 selection focus 消失問題(在 IE 下不會), 而取不到 desc, 因為原來設計的引述功能只要反白就會自動帶出哦, 所以改用onmousedown來取得, 方便在產生 HEMiDEMi 標籤時, 帶出使用者反白的引述, 可參閱文章: http://www.quirksmode.org/js/selected.html)

其實重點在於最後的 http://www.hemidemi.com/user_bookmark/new 後面要帶一些東東, title, url, description, via, 分別是加入書籤的[標題](必填), [網址](必填), [引述](非必填), [referer](未出現在畫面上, 應是要做某種分析用), 上面的 javascript 對於 desc 及 via 兩個變數用了相當多的語法來產生, 尤其是 desc, 因為用 desc 所以code會比較大一些, 相對於client side也有一些code的下載負載.

另外採用 anchor + target=_blank 的語法就可以避開 browser 因 window.open 造成的阻擋.

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *