訪客留言簿

星期二, 7月 01, 2008

[教學] 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 )

2 comments:

chiung 提到...

你好,請問可以設定只讓它顯示幾則狀態在上面嗎??

wini 提到...

chiung 你好。

你要說得更清楚才行,我不知道你的「狀態」在指什麼。

 

本站著作(不包含圖片、影音以及回應留言)係採用 Creative Commons 姓名標示-非商業性-相同方式分享 2.5 台灣 (中華民國) 授權條款授權