[教學] Plurk 的 Widget 樣式修改方法 (2008.07.01)

前言

感謝 hz 通知我 Widget 有更新了。 :)

看完後還是覺得舊版好的話，請再參考 [教學] Plurk 的 Widget 樣式修改方法 。

Plurk 在七月一號左右有更換了新版 Widget 要用的程式碼（這裡是指要給你貼在網頁上那段），舊的還是可以用，不過新的看起來也不錯，總之我先列一下新舊兩種，後面再來慢慢介紹新版的特色。（註：下面的 id 數字都是我的）

• 舊版程式碼: <script type="text/javascript" src="http://www.plurk.com/static/widget/plurkwidget.js?user_id=36551&height=300&interval=20"></script>

• 新版程式碼: <div style="width:200px; height:375px;"><iframe src="http://www.plurk.com/getWidget?uid=36551&h=375&w=200&u_info=2&bg=cf682f&tl=cae7fd" width="200" frameborder="0" height="375" scrolling="no"></iframe><div style="float: right; padding: 1px;"> <a href="http://plurk.com/" target="_blank" style="font-size: 10px !important; color: #999 !important; border: none; text-decorate: none;" title="Plurk - A Social Journal for your life">Plurk.com</a></div></div><img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/CIMP/bT*xJmx*PTEyMTQ5MTM2NTg3MzkmcHQ9MTIxNDkxMzY2MTY2MSZwPTI3MTM3MSZkPSZuPSZnPTE=.jpg" />

分析新版程式碼(某種語言的參數部分)

新版程式碼有內建很多常用參數了，所以只要改改內建程式碼也就好了。（想快點動手修改的請跳到 分析新版程式碼(樣式相關部分) 一節）

總之新版程式碼大致分成三個部分： div(iframe + div) + img ，最後那個 img 用途不明先不管，這裡先從 iframe 裡的某種語言的參數部分開始介紹。

http://www.plurk.com/getWidget?uid=36551&h=375&w=200&u_info=2&bg=cf682f&tl=cae7fd

• ?uid=36551 -- uid 就是設定使用者 ID 的，前面的問號「?」只是要從網址下指令給 Server 程式時，要宣告開始下指令用的符號而已。（大概啦）
• &h=375 -- h 在這指的是高度(height)。
• &w=200 -- w 在這指的是寬度(width)。
• &u_info=2 -- u_info 這參數目前我還看不出來用途。
• &bg=cf682f -- bg 可以設定最外圍上下兩條背景的顏色(16進位、rrggbb)。
• &tl=cae7fd -- tl 可以設定裡面留言區域背景的顏色(16進位、rrggbb)。

嗯嗯，總之大致上裡面的參數就是這樣子的意思啦，不過不重要，因為除了使用者 ID 跟兩種背景色外，高寬都受限於另一處的設定，所以不必理會這段參數也無妨。（呃）

分析新版程式碼(樣式相關部分)

上面也提過了，新版程式碼大致分成三個部分： div(iframe + div) + img ，重點還是在 div() 這邊，後面的 img 目前看不出重要性。（我猜 img 那段可能是跟什麼計數器有關係吧）

不過因為 iframe 裡的那堆參數程式碼幾乎動不了背景色以外的樣式，所以你的網站沒有擋掉元素內嵌 CSS 還啥的（就是在起始標籤裡塞 CSS 的），或是只想改改背景色而已的，幾乎不必去理會那段參數。

總之接下來直接先從官方預設在程式碼裡的 CSS 開始說明，請自己動手把複製下來的 div() 那段程式碼分行一下會比較容易閱讀。

1. <div style="width:200px; height:375px;"> -- 管最外圈那層框框的寬高用的，下面第二項寬高想更動時，這一項也要記得更改，不然第三、四項包住的 Plurk.com 超連結文字的位置看起來會很奇怪。
2. <iframe src="[中略]" width="200" frameborder="0" height="375" scrolling="no"></iframe> -- 管最外圈那層框框裡面的使用者區域的寬高用的，這區域包含了使用者資料跟留言。（想改背景色的請參考上一節、另外 frameborder 跟 scrolling 都沒必要改就是）
3. <div style="float: right; padding: 1px;"> -- 設定 Plurk.com 超連結文字 所在的這區域位置跟四邊內間距(padding)用的；覺得靠左比較好的，可以把 right 改成 left 。
4. <a href="[中略]" target="_blank" style="font-size: 10px !important; color: #999 !important; border: none; text-decorate: none;" title="[中略]"> -- 超連結文字樣式，沒啥好說明的，會 CSS 的可以隨便改寫無妨。

動手修改 Widget 樣式

很遺憾，這次的 Widget ，光靠 CSS 是修改不了的，因為 iframe 裡的是跨網域的網頁資料，所以放在你網站底下的 CSS 資料不會套用在 Plurk.com 網域下的網頁上。

不過新版的 Widget 程式碼只有要求你「要有 iframe 、而且 iframe 的 src 中記得要寫 id 參數」而已，所以你也只要想辦法修飾 iframe 就夠了（請參考前面兩節），不過我猜測只要有辦法弄個 JS 碼去取得這些資料的話，應該還是有辦法修改的。

至於不喜歡新版的，問我也沒用，跟 Plurk 官方建議比較快啦，我也是試了十幾分鐘才想到跨網域問題的。 _A_

（對了，我剛發現舊版的 JS 檔裡也有寫很多 class 名稱供參考耶，之前怎麼完全沒發現。 orz ）