2007年8月13日 星期一

推推王 推文按鈕貼紙 加強版

利用推推王官方 javascript 改良了一下, 提供一個以 DOM 操作為主的版本.歡迎官方直接引用.

加強了以下二點:
1. 解決在各 Blog 平台上部份網誌會造成畫面一片白的問題.
2. 一顆/多顆 按鈕語法統一.
3. 支援 Blogger-ext2, 在 Blogger 系統中換頁, 小按鈕依然能生效.

##CONTINUE##
解決畫面一片白:
由於已有許多網友反應, 加了 推推王 推文按鈕貼紙 後, 有時畫面會一片白.
在Blogger加入推推王按鈕導致不明反白的解法 , 問題2, 問題3
這在 Blogger 系統最為明顯, 因為 Blogger 系統的 Sidebar, 換頁都是使用 javascript 動態 產生, 所以只要在 onload 前, 推推王的 javascript 執行到, 而推推王的 javascript 僅有三行, 也就是利用 document.write 產生一個 iframe.這時的 document 就僅剩下一個 iframe , 所以您會得到一片白.
請大家忘了 document.write 這個 n 年前的遺產吧.. 以 DOM 來提供小工具.

按鈕語法統一:
使用此一加強版, 不再分一個按鈕或多個按鈕, 您只要使用單一的語法即可. 而語法中也看不到 javascript , 只是一個 div 的語法, 您可以輕輕鬆鬆放入 推推王推文按鈕.

使用方式:
放在網頁 <head> 位置加入 或 加入 html/javascript 網頁元素:
程式碼:

<script src='http://blogger-ext2.googlecode.com/svn/trunk/3rd/funp_button2.js' ></script>


放在按鈕位置的
程式碼:

<div class="funp_button" style="font-size:0px;">網址</div>

如果不打就直接用貼紙所在頁面的網址.

就是這麼容易, 不管幾顆都是一樣.


如何在 Blogger 系統中使用:
1.範本 => 版面配置 => 修改 HTML => 勾選「展開小裝置範本」 => 在 </head> 前加入

<script src='http://blogger-ext2.googlecode.com/svn/trunk/3rd/funp_button2.js' ></script>

2. 找到 <p><data:post.body/><p> 在 <p><data:post.body/><p> 前加入按鈕語法

<div style='float:right; margin-left:10px; font-size:0px;' class="funp_button"><data:post.url/></div>

style 說明可參考 funP Button On Blogger

如何在天空(yam) 系統中使用:
1.管理者後台 => 功能設定 => 個人資料 => 部落格描述: 中填入

<script src='http://blogger-ext2.googlecode.com/svn/trunk/3rd/funp_button2.js' ></script>

2. 在發表網址時, 在 "追加內容" 加入按鈕語法

<div style='float:right; margin-left:10px; font-size:0px;' class="funp_button"></div>

3. sample.


PS. 黑米小按鈕也是存在相同的問題. 請看這篇留.

16 則留言:

Unknown 提到...

rack大...
收到你的連結囉...感恩啊...超方便啊..~

Brian Yang 提到...

你好 我是funP的humblebird,問了感謝你對我們的支持,我們想送你一件funP Polo衫.麻煩到funP送訊息給我(ID= humblebird) 留下你的地址跟聯絡方式,謝謝.

Jackbin 提到...

你的程式都不錯,推一下~ ^^

匿名 提到...

能不能教教我樂多網誌怎麼用這個orz,好困擾....

Unknown 提到...

Dear chiaki:
樂多和天空(yam)一樣的用法, 在個人資料中加入 script, 然後在新增文章時, 在追加內容或內容中插入上面說明之 div 語法即可.

空中的人形醫生 提到...

在firefox中會推文失敗,
推薦網址會出現一堆< wbr >

Unknown 提到...

Dear qq0526:
因為 funp 於 8.22 改版成 alpha4.
已配合改版並上傳更新了.

空中的人形醫生 提到...

還是一樣耶。@@
而且我發現hemidemi的也是會失敗。
網址會變成這樣
http://racklin.< wbr >blogspot.com/20< wbr >07/08/ifunp-fun< wbr >pcom-alpha4.htm< wbr >l

但是hemidemi用官方的推文貼紙就不會有這個問題了。

thinkerCKD 提到...
作者已經移除這則留言。
thinkerCKD 提到...

阿土伯你好

請問一下,如果要使用其他樣式的推推王貼紙,應該修改程式中的什麼部分?

另外,貼紙是否能出現在 post footer的位子,而不要顯示在文章裡或是標題旁邊?

謝謝你!

匿名 提到...

阿土伯您好,您的推出的推文按鈕出了問題 ...

問題是會在推文的網址加入一堆 wbr ...

匿名 提到...

您好
我在funP中有文章被推,可是套用你的元件後,雖然可以出現funP的圖案(沒被推的淺綠色圖),但卻沒有人數,請問這是發生了什麼問題呢?

Unknown 提到...

Dear Anita:
有關 wbr 的問題, 阿土伯測試並無發生, 您可以按按看阿土伯部落格的 funp 按鈕.

另,可否提供您的 blog URL, 我幫您查看看.

Richard Huang 提到...

我加入黑米和推推

我的網站在IE看起來OK,可是在firefox看起來不OK是為什麼嗎?有人可以跟我說什麼問題嗎?
www.iphoneapp.tw

Unknown 提到...

Dear Richard 理查:
請問您說不 OK 是什麼問題, 我用 Firefox 看您網誌, funp/hemi 都有出現.

Natasha 提到...
作者已經移除這則留言。