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. 黑米小按鈕也是存在相同的問題. 請看這篇留.
張貼留言