在 Blogger 加上各種推文按鈕(修正Plurk 的Bug)

網友提出了 Plurk 的 bug
說實在的找了半天的文件
Blogger 並沒有可以直接使用的參數
看來又只能依靠 JavaScript 來處理這種鳥問題了

最終版程式碼
在 Blogger 加上各種推文按鈕

CSS 程式碼

/*Social Icon*/
.social{
background:transparent url(http://www.xxxx.com/social_icons.png) 0 0 no-repeat;
/*16*16按鈕的圖片網址*/

display: -moz-inline-box;
display: inline-block;
height:16px;
margin:0 4px;
text-indent:-999999px;
vertical-align:middle;
width:16px;
opacity:0.75;
overflow:hidden;
}
.social:hover{
opacity:1;
}

a.toFacebook{ background-position: 0 0; }
a.toPlurk{ background-position: 0 -16px; }
a.toTwitter{ background-position: 0 -32px; }
a.toTechnorati{ background-position: 0 -48px; }
a.toDelicious{ background-position: 0 -64px; }
a.toBuzz{ background-position: 0 -80px; }
a.toDigg{ background-position: 0 -96px; }
a.toStumbleUpon{ background-position: 0 -112px; }
a.toDesignFloat{ background-position: 0 -128px; }
a.getAtomRSS{ background-position: 0 -144px; }
a.toReader{ background-position: 0 -160px; }

首先打開『版面配置』→『修改HTML』
將『展開小裝置範本』打勾
找到 ]]></b:skin> 將 CSS 的程式貼在上一行
小技巧：所有的瀏覽器都有搜尋功能 (Ctrl + F)，只要搜尋 "skin" 就可以找到這行了

HTML 程式碼

找尋 <div class='post-footer'> 這一行
然後向下找尋相對應的 </div>
這裡沒有比較清楚的標示
找起來會比較困難一點
將下面的程式貼在 </div> 之前

<div class='post-footer-line post-footer-line-99'>
 <span class='post-social-icons' name='post-social-icons' expr:t='data:post.title' expr:u='data:post.url' expr:h='data:blog.homepageUrl'></span>
</div>

JavaScript 程式碼

找尋 </body> 這一行,將 JavaScript 的程式貼在上一行

<script type="text/javascript">
var data = [
    {&quot;c&quot;:&quot;toFacebook&quot;, &quot;u&quot;:&quot;http://www.facebook.com/sharer.php?u=$url$&amp;t=$title$&quot;,&quot;t&quot;:&quot;Facebook&quot;},
    {&quot;c&quot;:&quot;toPlurk&quot;, &quot;u&quot;:&quot;http://www.plurk.com/?qualifier=shares&amp;status=$url$ ($title$)&quot;,&quot;t&quot;:&quot;Plurk&quot;},
    {&quot;c&quot;:&quot;toTwitter&quot;, &quot;u&quot;:&quot;http://twitter.com/home?status=$title$ $url$&quot;,&quot;t&quot;:&quot;Twitter&quot;},
    {&quot;c&quot;:&quot;toTechnorati&quot;, &quot;u&quot;:&quot;http://technorati.com/faves?add=$url$ $title$&quot;,&quot;t&quot;:&quot;Technorati&quot;},
    {&quot;c&quot;:&quot;toDelicious&quot;, &quot;u&quot;:&quot;http://del.icio.us/post?url=$url$ $title$&quot;,&quot;t&quot;:&quot;Delicious&quot;},
    {&quot;c&quot;:&quot;toDigg&quot;, &quot;u&quot;:&quot;http://digg.com/submit?phase=2&amp;url=$url$&amp;title=$title$&quot;,&quot;t&quot;:&quot;Digg&quot;},  
    {&quot;c&quot;:&quot;toStumbleUpon&quot;, &quot;u&quot;:&quot;http://www.stumbleupon.com/submit?url=$url$&amp;title=$title$&quot;,&quot;t&quot;:&quot;Stumble Upon&quot;},
    {&quot;c&quot;:&quot;toDesignFloat&quot;, &quot;u&quot;:&quot;http://www.designfloat.com/submit.php?url=$url$&amp;title=$title$&quot;,&quot;t&quot;:&quot;Design Float&quot;},
    {&quot;c&quot;:&quot;toReader&quot;, &quot;u&quot;:&quot;http://www.google.com/reader/link?url=$url$&amp;title=$title$&amp;srcURL=$home$&quot;,&quot;t&quot;:&quot;Google Reader&quot;},
    {&quot;c&quot;:&quot;toBuzz&quot;, &quot;u&quot;:&quot;http://www.google.com/buzz/post?url=$url$&quot;,&quot;t&quot;:&quot;Buzz&quot;},
    {&quot;c&quot;:&quot;getAtomRSS&quot;, &quot;u&quot;:&quot;/feeds/posts/default&quot;, &quot;t&quot;:&quot;Atom / RSS&quot;}   
];


var list=document.getElementsByName(&#039;post-social-icons&#039;);

for (var li=0,ll=list.length; li&lt;ll; li++){
    var title=encodeURIComponent(list[li].getAttribute(&#039;t&#039;));    
    var url=encodeURIComponent(list[li].getAttribute(&#039;u&#039;));    
    var home=encodeURIComponent(list[li].getAttribute(&#039;h&#039;));
    var temp=&quot;分享至 &amp;#65306;&quot;;
    for (var di=0,dl=data.length; di&lt;dl; di++){
        var href=data[di].u.replace(&quot;$title$&quot;,title).replace(&quot;$url$&quot;,url).replace(&quot;$home$&quot;,home);
        temp+=&quot;&lt;a class=&#039;social &quot;+data[di].c+&quot;&#039; href=&#039;&quot;+href+&quot;&#039; title=&#039;分享至 &quot;+data[di].t+&quot;&#039;&gt;&quot;+data[di].t+&quot;&lt;/a&gt;&quot;
    };
    list[li].innerHTML=temp;
};
</script>

JavaScript 原始碼

var data = [
    {"c":"toFacebook", "u":"http://www.facebook.com/sharer.php?u=$url$&t=$title$","t":"Facebook"},
    {"c":"toPlurk", "u":"http://www.plurk.com/?qualifier=shares&status=$url$ ($title$)","t":"Plurk"},
    {"c":"toTwitter", "u":"http://twitter.com/home?status=$title$ $url$","t":"Twitter"},
    {"c":"toTechnorati", "u":"http://technorati.com/faves?add=$url$ $title$","t":"Technorati"},
    {"c":"toDelicious", "u":"http://del.icio.us/post?url=$url$ $title$","t":"Delicious"},
    {"c":"toDigg", "u":"http://digg.com/submit?phase=2&url=$url$&title=$title$","t":"Digg"},  
    {"c":"toStumbleUpon", "u":"http://www.stumbleupon.com/submit?url=$url$&title=$title$","t":"Stumble Upon"},
    {"c":"toDesignFloat", "u":"http://www.designfloat.com/submit.php?url=$url$&title=$title$","t":"Design Float"},
    {"c":"toReader", "u":"http://www.google.com/reader/link?url=$url$&title=$title$&srcURL=$home$","t":"Google Reader"},
    {"c":"toBuzz", "u":"http://www.google.com/buzz/post?url=$url$","t":"Buzz"},
    {"c":"getAtomRSS", "u":"/feeds/posts/default", "t":"Atom / RSS"}   
];


var list=document.getElementsByName('post-social-icons');

for (var li=0,ll=list.length; li<ll; li++){
    var title=encodeURIComponent(list[li].getAttribute('t'));    
    var url=encodeURIComponent(list[li].getAttribute('u'));    
    var home=encodeURIComponent(list[li].getAttribute('h'));
    var temp="分享至 ：";
    for (var di=0,dl=data.length; di<dl; di++){
        var href=data[di].u.replace("$title$",title).replace("$url$",url).replace("$home$",home);
        temp+="<a class='social "+data[di].c+"' href='"+href+"' title='分享至 "+data[di].t+"'>"+data[di].t+"</a>"
    };
    list[li].innerHTML=temp;
};

圖片來源：

Social Media Network Icons | Komodo Media