2009年4月27日 星期一

在Blogger文章中放置噗浪與twitter推文按鈕

update:修正噗浪代碼,不需填入自己的帳號

注意:修改HTML前請先存檔備份

這是「各大共享書籤代碼

修改詳細步驟如下:
1.進入資訊主頁 > 版面配置 > 修改HTML > 把「展開小裝置範本」打勾
找到下面這段代碼
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
<----twitter與Plurk推文按鈕代碼插入處
</span>


2.在上面的藍色代碼中間插入下面twitter與Plurk推文按鈕代碼

twitter推文按鈕代碼如下:綠色的圖片連結部份,請自行找到twitter的小icon連結置入
<a expr:href='"http://twitter.com/home?status=" + data:post.title + data:post.url' target='_blank' title='推文至twitter' ><img src='圖片連結' style='border:0; weight:16px; height:16px;'/></a>

噗浪的推文按鈕代碼如下:綠色的圖片連結部份,請自行找到Plurk的小icon連結置入
<a expr:href='"http://www.plurk.com/?qualifier=shares;status=[推]" + data:post.url + " " + "(" + data:post.title + ")"' target='_blank' title='推文至plurk' ><img src='圖片連結' style='border:0; weight:16px; height:16px;'/></a>

以上代碼中的「shares」可以改成loves、likes、gives、says


補充說明:有的部落格,按鈕會擠在一起,沒有間隔,可以透過調整程式碼來加大間隔
在HTML裡找.post img,以下代碼如果沒有藍色部份請自行加入,px數值如果愈大,間隔就愈大
.post img {
  padding:4px;

16 則留言:

  1. 感謝大大的教學^^

    回覆刪除
  2. 謝謝你的教學.我在 http://wow-una.blogspot.com/2009/04/recommended.html 有將你的教學作部分內容轉載.特來告知..^^..

    回覆刪除
  3. to 湘女本無情
    好的,沒問題

    回覆刪除
  4. 哇..動作真快..馬上在這邊備註了喔
    其實我的css裡面連.post img都沒有說.剛開始我是用猜的改放在a img {xx}沒想到真的可以勒..想想反正是css乾脆我自己加上各.post img { padding:0px 5px }..結果..當然成功拉(暫時還沒發現有沒有跟那各設定相衝)..哈哈.

    回覆刪除
  5. to 湘女本無情
    有成功就好,像css的設定,也要像妳這樣比較了解程式的人才會修改

    回覆刪除
  6. 我有用您的程式
    謝謝分享

    回覆刪除
  7. 您好
    請教一下~
    文章後面的"推文人數紀錄" 要怎麼做呢??
    謝謝^^"

    回覆刪除
  8. to MeiMei
    妳指的是那裡,不太了解妳的意思

    回覆刪除
  9. 不好意思問得不夠清楚^^"
    就是您的文章一開始的右手邊的推文按鍵--推到fACEBOOK以及FUNP那個人數紀錄!! 請問那個要怎麼做呢??

    謝謝^^

    回覆刪除
  10. 建議網址後面改成這樣
    http://www.plurk.com/?qualifier=shares;status=

    這樣噗出去才會有"分享"兩個字

    裡面這段「shares」可以改成loves、likes、gives、says

    回覆刪除
  11. to J.Wen™
    感謝您的資訊提供^^

    回覆刪除
  12. 獲益不淺,特來辭謝~

    哦哦,好江湖味噢

    回覆刪除
  13. 我推這篇文到plurk,帶出來的發言如下
    http:angelo-nmb.blogspot.com/2009/04/bloggertwitter.html (bBlogger峹Pwitters)

    誰有解呀,網路上爬了文,有90%都是相同的問題,也沒有人提出解的方式

    回覆刪除

請輸入您的留言,不回答匿名者的問題,可用電子郵件訂閱回應,可用 HTML 標記,例如 <b>, <i>, <a>