原作者：にわとり 來源：Chickenstrip
在 CC-BY-NC-SA 3.0 規範下分享這則漫畫
2008/08/11
Plurk - Badges
昨天 Plurk 出了點小問題，所有的人都突然達到涅槃（見下方說明），因而在主控台多出一顆淺藍色的太極圖示。後來在晚間左右修復了，而大多數人也渡過虛榮（？）的一天。為了應景，這篇文章來介紹一下 Plurk 的徽章有哪些。
上圖由左至右依次為：
此法取自 @ZenElements，至少要擁有一個徽章才能使用。以這個做法為基礎，我開發出了加掛 badge 到第二排的方法（須自行合成一塊 183x87 透明大底）：
另外我也自製了幾個 badge，歡迎下載使用：Sorry's Funny Plurk Badges。
上圖由左至右依次為：
- 邀請超過 10 位朋友
- 邀請超過 25 位朋友
- 邀請超過 50 位朋友
以上三個項目大家都很熟了。 - Plurk 社群站台建立者
這個是指你建立了一個“專門”用來介紹／討論／研究 Plurk 的網站，貢獻卓著並且被 Plurk 發現和認可。這個標準似乎很高，連之前提過的 Karma Trend 作者 @ryanlim 都沒拿到此 badge。 - 擁有超過一百則回應的 plurk（未上線）
就是擁有百層大樓啦。這個標準在國外達成者並不多見，但台灣這邊倒是挺多，因為台灣很多使用者都拿 Plurk 當 MSN 用。（茶） - Plurk 翻譯者
不論數量多寡，只要有參與 PCTP 的工作就算。 - 透過 Plurk widget 邀請到超過 N 位使用者（未上線）
不知道屆時標準會訂在多少。 - 涅槃
Nirvana，亦即 karma 超過 80。 - （不明）
- 擁有超過 50 位粉絲
- Plurk 元老
很早就註冊 Plurk 的使用者
.award_bar
{
width: 200px;
}
.award_bar img
{
padding-right: 48px;
background: url(my_badge.jpg) no-repeat right;
}
此法取自 @ZenElements，至少要擁有一個徽章才能使用。以這個做法為基礎，我開發出了加掛 badge 到第二排的方法（須自行合成一塊 183x87 透明大底）：
.award_bar
{
width: 183px;
height: 95px;
background-image: url(my_badges.png);
background-repeat: no-repeat;
background-position: bottom;
overflow: visible;
}
.award_bar img
{
padding-right: 96px;
padding-bottom: 48px;
}
另外我也自製了幾個 badge，歡迎下載使用：Sorry's Funny Plurk Badges。
2008/07/24
Plurk - CSS
自從 Plurk Collaborative Translation Project （註一）啟動以後，Plurk 團隊的動作頻頻。不但修掉幾個老問題，在時間軸的操作介面和功能上也有不少改進。有些細心的人或許也發現到，Plurk 系統對於效能方面做出的一些改變。撇開這些不談，這兩天出現了一項讓許多人非常興奮的新功能：自訂 Plurk 頁面的 CSS（註二）。廢話不多說，這裡來介紹一下細節。
◆ 修改方式：畫面左上角「我的檔案 edit」→「自訂外觀」，裡面有一個大大的框框可以編輯 CSS。
◆ 一些已知可以自訂的項目：
◆ 一個換掉各大項目底色與底圖的簡單範例：
◆ 另一個簡單範例，使用單張大圖作為背景，並且將一些元件改成可透視：
◆ 參考鏈結：
◆ 沒有主機放圖檔的人，可以試試 tinypic.com。
◆ 幾個成品：
註二：自訂 CSS 需要 25 以上的 Karma。
廣告：如果按這裡註冊 Plurk 帳號，就相當於被我推薦，會自動變成我的 follower 而看到我的訊息。
※2008/8/14 更新：Plurk 將自訂 CSS 所需的 25 Karma 門檻取消了。
◆ 修改方式：畫面左上角「我的檔案 edit」→「自訂外觀」，裡面有一個大大的框框可以編輯 CSS。
◆ 一些已知可以自訂的項目：
- body
- #timeline_holder
- #dashboard_holder
- #plurk-dashboard
- #karma
- #top_bar
- #page_title
- #top_login
- #footer
- #bottom_line 時間軸刻度線
- #dash-segment 整個控制面版的一般文字
- #dash-stats 統計數據的項目名稱
- #dash-stats table td 統計數據的數值
- .day_bg 分割線的陰影
- .div_inner 時間軸內
- .plurk_cnt 單則未展開未讀時
- .plurk_box 展開單則頂端左右兩邊
- .info_box 展開單則最底下
- .response_count 單則右邊的回應數
◆ 一個換掉各大項目底色與底圖的簡單範例：
/* 主背景（下方控制面板外圍的地方） */
body
{
background: #CF682F url(my_background.gif);
background-repeat: repeat;
background-attachment: fixed;
}
/* 時間軸 */
#timeline_holder
{
background:#CAE7FD url(my_timeline.gif);
background-repeat: repeat;
}
/* 控制面板 */
#plurk-dashboard
{
background: #BE5C2F url(my_dashboard.gif);
background-repeat: repeat;
}
/* Karma 的文字顏色 */
#karma
{
color: #FFE400;
}
◆ 另一個簡單範例，使用單張大圖作為背景，並且將一些元件改成可透視：
body
{
background: #000000 url(full_screen.jpg);
background-repeat: repeat;
}
#timeline_holder
{
background: none;
}
.plurk_cnt
{
opacity: 0.75;
filter: alpha(opacity=75);
}
#top_bar
{
opacity: 0.5;
filter: alpha(opacity=50);
}
#top_login
{
opacity: 0.5;
filter: alpha(opacity=50);
}
#plurk-dashboard
{
background: #808080;
opacity: 0.5;
filter: alpha(opacity=50);
}
#bottom_line
{
background: none;
opacity: 0.5;
filter: alpha(opacity=50);
}
◆ 參考鏈結：
◆ 沒有主機放圖檔的人，可以試試 tinypic.com。
◆ 幾個成品：
- 柔美派：@of_sasa
- 華麗風：@KateJ
- 游泳池：@Eveian
- 楓葉鼠：@risser
- 更多作品展示
（位於 Flickr，其中部份有附安裝鏈結，可供懶得設計者直接套用。底下亦同。） - PlurkThemes.com
- PlurkTemplates.com
- Plurk K! | Kustomized CSS Theme
- Plurk Customized Theme Emporium
- Letters-To-You Designs
註二：自訂 CSS 需要 25 以上的 Karma。
廣告：如果按這裡註冊 Plurk 帳號，就相當於被我推薦，會自動變成我的 follower 而看到我的訊息。
※2008/8/14 更新：Plurk 將自訂 CSS 所需的 25 Karma 門檻取消了。
2008/06/25
Plurk - Widget
Plurk 的官方版 widget 無法修改 logo，導致許多人 CSS 改了老半天，把所有的顏色都和 blog 調到一致了，最後卻和這顆火腿不搭：
另外原始版本還有 SMALL 模式顯示亂掉、interval 功能在 IE 下不會動的問題。因此我花了一點時間把程式簡化，拿掉不需要的部份，調整了參數傳入方式並加上註解。有興趣的人可以把底下整段複製走，修改必要的參數與色彩後，加進 Blogger 裡。（別家的部落格我沒測過，請自行實驗，能用就算賺到）
修改重點：
<style type="text/css">
.plurk-widget {
font: 11px 'Lucida Grande', 'Lucida Sans Unicode','Lucida Sans Regular', Tahoma, Verdana, sans-serif;
background: #cf682f; /* 主版底色 */
/* background: url('http://www.plurk.com/static/theme/image/wallpaper.png'); 主版底圖 */
padding: 4px;
border: 1px solid #a14a19; /* 主版外框 */
max-width: 300px;
width: auto; /* Widget 寬度 */
position: relative;
padding-top: 40px;
color: black; /* 文字顏色 */
text-align: left;
padding-bottom: 0;
}
.plurk-widget a {
color: #126cb8 !important; /* 鏈結, 包括個人暱稱與回應 */
padding: 0 !important;
border: none !important;
background: none;
text-decoration: underline;
}
.plurk-widget img {
border: none !important;
}
.plurk-widget a:hover{
text-decoration: underline!important;
}
.plurk-widget .plurk-logo {
display: block;
padding: 0;
margin: 0 6px 8px 0;
width: 40px; /* logo 寬度 */
position: absolute;
right: 0;
top: 4px;
height: 31px;
padding: 0 !important;
}
.plurk-widget .plurk-timeline {
clear: both;
overflow-x: hidden;
overflow-y: scroll;
background: #cae7fd; /* 時間軸底色 */
/* background: url('http://www.plurk.com/static/theme/image/water.gif'); 時間軸底圖 */
word-wrap: break-word;
border: 1px solid #99705f; /* 時間軸外框 */
padding: 3px 8px;
}
.plurk-widget .plurk-nickname {
color: black;
text-decoration: none;
font-weight: bold;
}
.plurk-widget .plurk-message {
background: url(plurk-widget-separator.gif) repeat-x left bottom;
padding: 6px 0 10px 0;
margin: 0 0 4px 0;
}
.plurk-widget .plurk-meta {
font-size: 0.9em;
text-align: right;
color: #578ebd; /* 留言時間文字顏色 */
padding-top: 2px;
}
.plurk-widget .plurk-qualifier {
border-right: 1px solid #333;
border-bottom: 1px solid #333;
}
.plurk-widget .plurk-empty {
margin: 5px 0 0 0;
padding: 10px;
background-color: #F0F8FF;
color: #4c8cc2;
text-align: center;
border: 1px solid #4c8cc2;
}
.plurk-widget .plurk-empty strong {
font-weight: bold;
color: black;
display: block;
}
.plurk-widget .call-action{
font-size: 0.9em;
color: #fadfd0;
padding: 10px 0 5px 0;
}
.plurk-widget .call-action a{
color: #5a3f30 !important; /* 最底下的廣告鏈結文字顏色 */
text-decoration: underline;
font-weight: normal;
}
</style>
<script id="PlurkWidgetScript" type="text/javascript">
/**
* Plurk Widget
* ------------
*
* Supported parameters:
*
* - PWARG_USERID the user_id whose plurks we want to display
* - PWARG_HEIGHT the height in pixels (has no effect if CSS is disabled)
* - PWARG_NOCSS set to "true" if you don't want any CSS applied
* - PWARG_INTERVAL the reloading interval in seconds
* (30 per default, 0 for no reloading at all.)
* - PWARG_CHUNK the number of plurks in the widget
* - PWARG_WIDGETLOGO the logo we want to display
*
* If you are an advanced user and want to style the widget with custom CSS,
* here are the classes the widget uses:
*
* plurk-widget the overall div that wraps the widget
* plurk-logo a div that is usually used to display the logo
* plurk-timeline the div containing the messages on the timeline
* plurk-loading-pane a div that is displayed while data is retrieved
* plurk-message a div that contains the message of a user
* plurk-nickname a link to the users's profile
* plurk-qualifier the span for the qualifier
* plurk-qualifier-x the span for the qualifier x (x == says, thinks etc)
*
* For further information, you can reference the css file at
* http://www.plurk.com/static/widget/widget.css
*
* (c) Copyright 2008 by Galt Networks.
*
* Permission is hereby granted, free of charge, to any person obtaining a
* copy of this software and associated documentation files (the "Software"),
* to deal in the Software without restriction, including without limitation
* the rights to use, copy, modify, merge, publish, distribute, sublicense,
* and/or sell copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included
* in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
* DEALINGS IN THE SOFTWARE.
*
* ------------
* Original version of this script:
* http://www.plurk.com/static/widget/plurkwidget.js
*
* Modified by Sorry (http://www.plurk.com/user/sorry)
* Version 0.3
* 2008/6/25
*/
;(function() {
// globals and constants
var
PWARG_SERVERURL = 'http://www.plurk.com',
PWARG_USERID = 1418700, /* from_uid=xxxxxxx */
PWARG_HEIGHT = 300, /* Widget 高度 */
PWARG_NOCSS = 'true',
PWARG_INTERVAL = 0,
PWARG_CHUNK = 10,
PWARG_WIDGETLOGO = 'http://www.plurk.com/static/creatures/small/1.png', /* 上方的 logo */
QUALIFIER_COLORS = {
is: '#e57c43', says: '#E2560B', feels: '#2D83BE',
thinks: '#689CC1', wants: '#8DB241', wishes: '#5BB017',
has: '#7A9A37', loves: '#B20C0C', hates: '#111111',
asks: '#8361bc', will: '#B46DB9', was: '#525252',
had: '#8C8C8C', likes: '#CB2728', shares: '#A74949',
gives: '#620E0E'
},
TIME_UNITS = [
[60 * 60 * 24 * 30, 'month'],
[60 * 60 * 24 * 7, 'week'],
[60 * 60 * 24, 'day'],
[60 * 60, 'hour'],
[60, 'minute']
],
widget, lastRequest, fish, timeline, options;
// general purpose helpers
function each(s, f) {
if (!s) return; var r;
if (s.length !== undefined)
for (var x = 0, y = s.length; x < y; ++x) {
if (typeof (r = f.call(s[x], x)) !== 'undefined')
return r;
}
else for (var k in s)
if (typeof (r = f.call(this, k, s[k])) !== 'undefined')
return r;
}
// formatting
function timedelta(d) {
var delta = ((new Date()).getTime() - d.getTime()) / 1000, value;
return each(TIME_UNITS, function() {
if ((value = Math.floor(delta / this[0])) > 0)
return value + ' ' + this[1] + (value != 1 ? 's' : '');
}) || '0 minutes';
}
// DOM
function $fnGetElmt(n) { return document.getElementsByTagName(n)[0]; }
function $fnCreateElmt(n, a) {
var rv = document.createElement(n);
each(a, function(k, v) { rv.setAttribute(k, v); });
return rv;
}
function $$fnAppendElmt(p, n, a) { return p.appendChild($fnCreateElmt(n, a)); }
function $fnAppendText(n, t) { n.appendChild(document.createTextNode(t)); return n; }
function $fnAppendHtml(n, h) { var t = $$fnAppendElmt(n, 'span'); t.innerHTML = h; return n; }
// CSS
function css(n, a, c) {
each(a, function(k, v) { n.style[k] = v; });
if (c) n.className = c; return n;
}
function hide(e) { e.style.display = 'none'; return e; }
function show(e) { e.style.display = ''; return e; }
// communication system
if (!this.$__plurkWidgetReceiveData) {
$__plurkWidgetReceivers = [];
$__plurkWidgetReceiveData = function(data) {
$__plurkWidgetReceivers[data.receiverID](data);
}
}
var receiverID = $__plurkWidgetReceivers.length;
$__plurkWidgetReceivers.push(function(data) {
lastRequest.parentNode.removeChild(lastRequest);
if (data.plurks) updatePlurks(data.plurks, data.private);
lastRequest = null;
});
// widget code
function initializeWidget() {
if (PWARG_NOCSS !== 'true')
$$fnAppendElmt($fnGetElmt('head'), 'link', {
href: PWARG_SERVERURL + '/static/widget/widget.css',
rel: 'stylesheet',
type: 'text/css'
});
css(widget, {visibility: 'hidden'});
var logo = css($$fnAppendElmt(widget, 'a', {href: PWARG_SERVERURL + '/redeemByWidget?from_uid=' + PWARG_USERID}), {
background: 'url(' + PWARG_WIDGETLOGO + ') no-repeat 0 0'
}, 'plurk-logo');
timeline = css($$fnAppendElmt(widget, 'div'), {
height: (PWARG_HEIGHT || 300) + 'px'
}, 'plurk-timeline');
fish = css($$fnAppendElmt(timeline, 'div'), {
background: 'url(' + PWARG_SERVERURL + '/static/loading.gif) no-repeat center center',
height: '90px'
}, 'plurk-loading-pane'),
callLink = $$fnAppendElmt(widget, 'div'),
callLink.innerHTML = '<a href="'+ PWARG_SERVERURL + '/redeemByWidget?from_uid=' + PWARG_USERID
+ '">一起來體驗 Plurk 吧</a>',
callTo = css(callLink, null, 'call-action');
requestPlurks();
if (PWARG_INTERVAL && PWARG_INTERVAL !== '0')
setInterval(requestPlurks, (parseInt(PWARG_INTERVAL, 10) || 30) * 1000);
}
function requestPlurks() {
if (lastRequest) return;
hide(fish);
lastRequest = $$fnAppendElmt($fnGetElmt('head'), 'script', {
type: 'text/javascript',
src: PWARG_SERVERURL + '/API/Widget.getUserPlurks?'
+ 'user_id=' + PWARG_USERID
+ '&receiver_id=' + receiverID
+ '&per_chunk=' + PWARG_CHUNK
});
}
function updatePlurks(plurks, is_private) {
timeline.innerHTML = '';
timeline.appendChild(show(fish));
if (plurks.length) each(plurks, function(idx) {
var plurk = css($$fnAppendElmt(timeline, 'div'), null, 'plurk-message');
$fnAppendText(css($$fnAppendElmt(plurk, 'a', {href: PWARG_SERVERURL + '/user/' + this.username}),
null, 'plurk-nickname'), this.username);
if (this.qualifier != ':') {
$fnAppendHtml(plurk, ' ');
var shade = QUALIFIER_COLORS[this.en_qualifier];
$fnAppendText(css($$fnAppendElmt(plurk, 'span'), {
backgroundColor: shade,
padding: '0 3px 0 3px',
color: 'white'
}, 'plurk-qualifier plurk-qualifier-' + this.en_qualifier),
this.qualifier);
}
$fnAppendHtml(plurk, ' ' + this.content);
$fnAppendText($$fnAppendElmt($fnAppendText(css($$fnAppendElmt(plurk, 'div'), null, 'plurk-meta'),
timedelta(this.pub_date) + ' ago | '), 'a', {
href: PWARG_SERVERURL + '/p/' + (this.id).toString(36),
target: '_blank'
}), this.responses == 1 ? '1 response' : this.responses + ' responses');
});
else {
var empty = css($$fnAppendElmt(timeline, 'div'), null, 'plurk-empty');
$fnAppendText($$fnAppendElmt(empty, 'strong'), 'Ouch. ');
$fnAppendText(empty, is_private
? '抱歉, 你設定了 private 屬性, 別人不能讀取你的 plurk. 這個 widget 沒有東西可以顯示.'
: '你沒有 plurk 可以顯示. 先去寫個幾句吧 :).'
);
}
hide(fish);
css(widget, {visibility: 'visible'});
}
// widget setup
widget = css($fnCreateElmt('div'), null, 'plurk-widget');
var options = document.getElementById('PlurkWidgetScript');
options.parentNode.replaceChild(widget, options);
initializeWidget();
})();
</script>
最後，不管你改爛了什麼，都不要來找我。我一概不負責任。
另外原始版本還有 SMALL 模式顯示亂掉、interval 功能在 IE 下不會動的問題。因此我花了一點時間把程式簡化，拿掉不需要的部份，調整了參數傳入方式並加上註解。有興趣的人可以把底下整段複製走，修改必要的參數與色彩後，加進 Blogger 裡。（別家的部落格我沒測過，請自行實驗，能用就算賺到）
修改重點：
- 有加「/* */」附註的行，是較有機會改動的地方。
- CSS 中的 background 可以選擇用顏色或底圖，我放了範例，但最後記得留下一筆就好。
- JavaScript 裡面有一排連續的「PWARG_xxx」是參數設定，大部份和原本的名稱一樣。
- PWARG_USERID：請參考 Plurk 畫面右下方「Share your plurk page with friends: 」的格子裡，「from_uid=」接著一串數字，把它填進去。當然如果你暗戀我的話，不改也沒關係。
- PWARG_WIDGETLOGO：請自行製作適當大小的 logo，並同時調整 CSS 中的圖寬。
<style type="text/css">
.plurk-widget {
font: 11px 'Lucida Grande', 'Lucida Sans Unicode','Lucida Sans Regular', Tahoma, Verdana, sans-serif;
background: #cf682f; /* 主版底色 */
/* background: url('http://www.plurk.com/static/theme/image/wallpaper.png'); 主版底圖 */
padding: 4px;
border: 1px solid #a14a19; /* 主版外框 */
max-width: 300px;
width: auto; /* Widget 寬度 */
position: relative;
padding-top: 40px;
color: black; /* 文字顏色 */
text-align: left;
padding-bottom: 0;
}
.plurk-widget a {
color: #126cb8 !important; /* 鏈結, 包括個人暱稱與回應 */
padding: 0 !important;
border: none !important;
background: none;
text-decoration: underline;
}
.plurk-widget img {
border: none !important;
}
.plurk-widget a:hover{
text-decoration: underline!important;
}
.plurk-widget .plurk-logo {
display: block;
padding: 0;
margin: 0 6px 8px 0;
width: 40px; /* logo 寬度 */
position: absolute;
right: 0;
top: 4px;
height: 31px;
padding: 0 !important;
}
.plurk-widget .plurk-timeline {
clear: both;
overflow-x: hidden;
overflow-y: scroll;
background: #cae7fd; /* 時間軸底色 */
/* background: url('http://www.plurk.com/static/theme/image/water.gif'); 時間軸底圖 */
word-wrap: break-word;
border: 1px solid #99705f; /* 時間軸外框 */
padding: 3px 8px;
}
.plurk-widget .plurk-nickname {
color: black;
text-decoration: none;
font-weight: bold;
}
.plurk-widget .plurk-message {
background: url(plurk-widget-separator.gif) repeat-x left bottom;
padding: 6px 0 10px 0;
margin: 0 0 4px 0;
}
.plurk-widget .plurk-meta {
font-size: 0.9em;
text-align: right;
color: #578ebd; /* 留言時間文字顏色 */
padding-top: 2px;
}
.plurk-widget .plurk-qualifier {
border-right: 1px solid #333;
border-bottom: 1px solid #333;
}
.plurk-widget .plurk-empty {
margin: 5px 0 0 0;
padding: 10px;
background-color: #F0F8FF;
color: #4c8cc2;
text-align: center;
border: 1px solid #4c8cc2;
}
.plurk-widget .plurk-empty strong {
font-weight: bold;
color: black;
display: block;
}
.plurk-widget .call-action{
font-size: 0.9em;
color: #fadfd0;
padding: 10px 0 5px 0;
}
.plurk-widget .call-action a{
color: #5a3f30 !important; /* 最底下的廣告鏈結文字顏色 */
text-decoration: underline;
font-weight: normal;
}
</style>
<script id="PlurkWidgetScript" type="text/javascript">
/**
* Plurk Widget
* ------------
*
* Supported parameters:
*
* - PWARG_USERID the user_id whose plurks we want to display
* - PWARG_HEIGHT the height in pixels (has no effect if CSS is disabled)
* - PWARG_NOCSS set to "true" if you don't want any CSS applied
* - PWARG_INTERVAL the reloading interval in seconds
* (30 per default, 0 for no reloading at all.)
* - PWARG_CHUNK the number of plurks in the widget
* - PWARG_WIDGETLOGO the logo we want to display
*
* If you are an advanced user and want to style the widget with custom CSS,
* here are the classes the widget uses:
*
* plurk-widget the overall div that wraps the widget
* plurk-logo a div that is usually used to display the logo
* plurk-timeline the div containing the messages on the timeline
* plurk-loading-pane a div that is displayed while data is retrieved
* plurk-message a div that contains the message of a user
* plurk-nickname a link to the users's profile
* plurk-qualifier the span for the qualifier
* plurk-qualifier-x the span for the qualifier x (x == says, thinks etc)
*
* For further information, you can reference the css file at
* http://www.plurk.com/static/widget/widget.css
*
* (c) Copyright 2008 by Galt Networks.
*
* Permission is hereby granted, free of charge, to any person obtaining a
* copy of this software and associated documentation files (the "Software"),
* to deal in the Software without restriction, including without limitation
* the rights to use, copy, modify, merge, publish, distribute, sublicense,
* and/or sell copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included
* in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
* DEALINGS IN THE SOFTWARE.
*
* ------------
* Original version of this script:
* http://www.plurk.com/static/widget/plurkwidget.js
*
* Modified by Sorry (http://www.plurk.com/user/sorry)
* Version 0.3
* 2008/6/25
*/
;(function() {
// globals and constants
var
PWARG_SERVERURL = 'http://www.plurk.com',
PWARG_USERID = 1418700, /* from_uid=xxxxxxx */
PWARG_HEIGHT = 300, /* Widget 高度 */
PWARG_NOCSS = 'true',
PWARG_INTERVAL = 0,
PWARG_CHUNK = 10,
PWARG_WIDGETLOGO = 'http://www.plurk.com/static/creatures/small/1.png', /* 上方的 logo */
QUALIFIER_COLORS = {
is: '#e57c43', says: '#E2560B', feels: '#2D83BE',
thinks: '#689CC1', wants: '#8DB241', wishes: '#5BB017',
has: '#7A9A37', loves: '#B20C0C', hates: '#111111',
asks: '#8361bc', will: '#B46DB9', was: '#525252',
had: '#8C8C8C', likes: '#CB2728', shares: '#A74949',
gives: '#620E0E'
},
TIME_UNITS = [
[60 * 60 * 24 * 30, 'month'],
[60 * 60 * 24 * 7, 'week'],
[60 * 60 * 24, 'day'],
[60 * 60, 'hour'],
[60, 'minute']
],
widget, lastRequest, fish, timeline, options;
// general purpose helpers
function each(s, f) {
if (!s) return; var r;
if (s.length !== undefined)
for (var x = 0, y = s.length; x < y; ++x) {
if (typeof (r = f.call(s[x], x)) !== 'undefined')
return r;
}
else for (var k in s)
if (typeof (r = f.call(this, k, s[k])) !== 'undefined')
return r;
}
// formatting
function timedelta(d) {
var delta = ((new Date()).getTime() - d.getTime()) / 1000, value;
return each(TIME_UNITS, function() {
if ((value = Math.floor(delta / this[0])) > 0)
return value + ' ' + this[1] + (value != 1 ? 's' : '');
}) || '0 minutes';
}
// DOM
function $fnGetElmt(n) { return document.getElementsByTagName(n)[0]; }
function $fnCreateElmt(n, a) {
var rv = document.createElement(n);
each(a, function(k, v) { rv.setAttribute(k, v); });
return rv;
}
function $$fnAppendElmt(p, n, a) { return p.appendChild($fnCreateElmt(n, a)); }
function $fnAppendText(n, t) { n.appendChild(document.createTextNode(t)); return n; }
function $fnAppendHtml(n, h) { var t = $$fnAppendElmt(n, 'span'); t.innerHTML = h; return n; }
// CSS
function css(n, a, c) {
each(a, function(k, v) { n.style[k] = v; });
if (c) n.className = c; return n;
}
function hide(e) { e.style.display = 'none'; return e; }
function show(e) { e.style.display = ''; return e; }
// communication system
if (!this.$__plurkWidgetReceiveData) {
$__plurkWidgetReceivers = [];
$__plurkWidgetReceiveData = function(data) {
$__plurkWidgetReceivers[data.receiverID](data);
}
}
var receiverID = $__plurkWidgetReceivers.length;
$__plurkWidgetReceivers.push(function(data) {
lastRequest.parentNode.removeChild(lastRequest);
if (data.plurks) updatePlurks(data.plurks, data.private);
lastRequest = null;
});
// widget code
function initializeWidget() {
if (PWARG_NOCSS !== 'true')
$$fnAppendElmt($fnGetElmt('head'), 'link', {
href: PWARG_SERVERURL + '/static/widget/widget.css',
rel: 'stylesheet',
type: 'text/css'
});
css(widget, {visibility: 'hidden'});
var logo = css($$fnAppendElmt(widget, 'a', {href: PWARG_SERVERURL + '/redeemByWidget?from_uid=' + PWARG_USERID}), {
background: 'url(' + PWARG_WIDGETLOGO + ') no-repeat 0 0'
}, 'plurk-logo');
timeline = css($$fnAppendElmt(widget, 'div'), {
height: (PWARG_HEIGHT || 300) + 'px'
}, 'plurk-timeline');
fish = css($$fnAppendElmt(timeline, 'div'), {
background: 'url(' + PWARG_SERVERURL + '/static/loading.gif) no-repeat center center',
height: '90px'
}, 'plurk-loading-pane'),
callLink = $$fnAppendElmt(widget, 'div'),
callLink.innerHTML = '<a href="'+ PWARG_SERVERURL + '/redeemByWidget?from_uid=' + PWARG_USERID
+ '">一起來體驗 Plurk 吧</a>',
callTo = css(callLink, null, 'call-action');
requestPlurks();
if (PWARG_INTERVAL && PWARG_INTERVAL !== '0')
setInterval(requestPlurks, (parseInt(PWARG_INTERVAL, 10) || 30) * 1000);
}
function requestPlurks() {
if (lastRequest) return;
hide(fish);
lastRequest = $$fnAppendElmt($fnGetElmt('head'), 'script', {
type: 'text/javascript',
src: PWARG_SERVERURL + '/API/Widget.getUserPlurks?'
+ 'user_id=' + PWARG_USERID
+ '&receiver_id=' + receiverID
+ '&per_chunk=' + PWARG_CHUNK
});
}
function updatePlurks(plurks, is_private) {
timeline.innerHTML = '';
timeline.appendChild(show(fish));
if (plurks.length) each(plurks, function(idx) {
var plurk = css($$fnAppendElmt(timeline, 'div'), null, 'plurk-message');
$fnAppendText(css($$fnAppendElmt(plurk, 'a', {href: PWARG_SERVERURL + '/user/' + this.username}),
null, 'plurk-nickname'), this.username);
if (this.qualifier != ':') {
$fnAppendHtml(plurk, ' ');
var shade = QUALIFIER_COLORS[this.en_qualifier];
$fnAppendText(css($$fnAppendElmt(plurk, 'span'), {
backgroundColor: shade,
padding: '0 3px 0 3px',
color: 'white'
}, 'plurk-qualifier plurk-qualifier-' + this.en_qualifier),
this.qualifier);
}
$fnAppendHtml(plurk, ' ' + this.content);
$fnAppendText($$fnAppendElmt($fnAppendText(css($$fnAppendElmt(plurk, 'div'), null, 'plurk-meta'),
timedelta(this.pub_date) + ' ago | '), 'a', {
href: PWARG_SERVERURL + '/p/' + (this.id).toString(36),
target: '_blank'
}), this.responses == 1 ? '1 response' : this.responses + ' responses');
});
else {
var empty = css($$fnAppendElmt(timeline, 'div'), null, 'plurk-empty');
$fnAppendText($$fnAppendElmt(empty, 'strong'), 'Ouch. ');
$fnAppendText(empty, is_private
? '抱歉, 你設定了 private 屬性, 別人不能讀取你的 plurk. 這個 widget 沒有東西可以顯示.'
: '你沒有 plurk 可以顯示. 先去寫個幾句吧 :).'
);
}
hide(fish);
css(widget, {visibility: 'visible'});
}
// widget setup
widget = css($fnCreateElmt('div'), null, 'plurk-widget');
var options = document.getElementById('PlurkWidgetScript');
options.parentNode.replaceChild(widget, options);
initializeWidget();
})();
</script>
最後，不管你改爛了什麼，都不要來找我。我一概不負責任。
2008/06/24
Plurk - Hints
這篇寫一點跟 Plurk 的用法和注意事項。
◆ 修改 Plurk 介面語系：在畫面左下角的下拉式選擇即可。
◆ 修改 Plurk 發言語系：「Private plurks, languages & options」→「Plurk language」→「Chinese (Traditional)」。在回應的時候，只能使用對方的語系。手機環境下只能使用英語語系。
◆ 貼圖片的方法：直接把圖片網址貼進去。YouTube 的影片也可以這樣貼。
◆ 文字格式：
效果：「stewwu 請上人事行政局網站看**停班停課消息**」
嫌麻煩的話，Firefox 使用者也可以安裝 maxchu 所開發的 Greasemonkey Script：Plurk Rich Edit。
◆ 外掛
◆ 鍵盤快速鍵：
◆ 滑鼠停在 Profile 的照片上稍候，照片會放大並變得清晰。
◆ 滑鼠停在回應上稍候，右邊會出現該筆回應的時間；停在回應者的暱稱上稍候，右邊會出現淺藍色的倒三角形，按下叫出小選單可顯示該使用者的相關資訊。該選單中的「Block」可以將該使用者的所有發言消音。
◆ 展開單則 Plurk 後，有一個「mute」按鈕，可以讓系統不再對你通知該則 Plurk 的更新。
◆ 安裝 Firefox add-on Stylish，搭配 dogg 介紹的方法可以將 Karma 數字從畫面中隱藏起來。
◆ 廣告：如果按這裡註冊 Plurk 帳號，就相當於被我推薦，會自動變成我的 follower 而看到我的訊息。
◆ 噗海無邊，回頭是岸。
◆ 修改 Plurk 介面語系：在畫面左下角的下拉式選擇即可。
◆ 修改 Plurk 發言語系：「Private plurks, languages & options」→「Plurk language」→「Chinese (Traditional)」。在回應的時候，只能使用對方的語系。手機環境下只能使用英語語系。
◆ 貼圖片的方法：直接把圖片網址貼進去。YouTube 的影片也可以這樣貼。
◆ 文字格式：
- **粗體** ： **粗體**
- *斜體* ： *斜體*
- __底線__ ： __底線__
- `address` ： `address`
- http://aigrette.blogspot.com/ ： http://aigrette.blogspot.com/
- http://aigrette.blogspot.com/ (My Blog) ： My Blog
- @sorry ： Sorry
效果：「stewwu 請上人事行政局網站看**停班停課消息**」
嫌麻煩的話，Firefox 使用者也可以安裝 maxchu 所開發的 Greasemonkey Script：Plurk Rich Edit。
◆ 外掛
- Onion and Plurk by Akhmad Fathonih
- 洋蔥頭這樣用更爽 by JiaYun
◆ 鍵盤快速鍵：
- ←：時間軸左捲
- →：時間軸右捲
- ＆：捲到目前時間
- Ｖ：切換到新留言模式／全部模式
- Ｍ：全部標示為已讀
- Ｕ：更新以取得新留言
◆ 滑鼠停在 Profile 的照片上稍候，照片會放大並變得清晰。
◆ 滑鼠停在回應上稍候，右邊會出現該筆回應的時間；停在回應者的暱稱上稍候，右邊會出現淺藍色的倒三角形，按下叫出小選單可顯示該使用者的相關資訊。該選單中的「Block」可以將該使用者的所有發言消音。
◆ 展開單則 Plurk 後，有一個「mute」按鈕，可以讓系統不再對你通知該則 Plurk 的更新。
◆ 安裝 Firefox add-on Stylish，搭配 dogg 介紹的方法可以將 Karma 數字從畫面中隱藏起來。
◆ 廣告：如果按這裡註冊 Plurk 帳號，就相當於被我推薦，會自動變成我的 follower 而看到我的訊息。
◆ 噗海無邊，回頭是岸。
2008/06/23
Plurk
這幾天試玩 Plurk，慢慢體會到它如何黏住使用者的道理。除了特殊的時間軸界面，Karma System 也是蠻重要的一個項目。Karma 的作用類似積分，使用者在系統中待得越久、有越多有價值發言、介紹越多人註冊，都會提升 Karma；反過來說，很久不上線、類似 spam 行為的灌水、申請將別人納入好友被拒等等（表示不受歡迎），則會減少 Karma。越高的 Karma 可以 unlock 越多個人化功能，所以也有人對此斤斤計較，甚至有 Karma Trend 之類的邊際系統出現。
每一則發言稱為一則「Plurk」，而每則 Plurk 之前的 be 動詞／助動詞稱為「Qualifier」。Qualifier 具有多種顏色，方便快速地區分不同屬性的發言。由於 be 動詞助動詞都是英語系的東西，對中文使用者很難派上用場，前幾天我索性翻譯了一份繁中版寄給 Plurk 開發團隊。很快地對方有了回應，並且也將成品上線。這裡要給他們的高效率拍拍手，現在 Plurk 玩起來更親切了。
有個特殊的翻譯順便在這裡解釋一下。對 Qualifier 中的「Share」，我翻譯了「分享」和「推」兩個版本，告訴他們說「分享」是精準的翻法，而「推」有「推薦」之意，但是會好玩得多，請他們自行決定。結果他們選擇了「推」，這表示他們挺有玩心的。
（後來如預料之中，「推」這個字引起鄉民的不小反應，哈。）
後記：我看到有人問說，「hate」何不翻成「恨」？呃，其實我本來想翻成台灣通用發語詞、鏗鏘有力的經典國罵「※」。但是這樣一翻，Plurk 可能會被列入十八禁網站，掙扎再三之下，最後選擇了「討厭」，走俏皮路線安全些。
廣告：如果按這裡註冊 Plurk 帳號，就相當於被我推薦，會自動變成我的 follower 而看到我的訊息。
訂閱：
文章 (Atom)