2010-05-15

在 Blogger 加上各種推文按鈕

在寫完上一篇 Facebook 推文按鈕後
想一想乾脆把其他社群的推文按鈕也加上好了
這裡我做了兩個大小的推文按鈕
PS:最終版程式碼

32*32 的推文按鈕



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

display: -moz-inline-box;
display: inline-block;
height:32px;
margin:0 2px;
text-indent:-999999px;
vertical-align:middle;
width:32px;
}

.toFacebook{ background-position: 0 0; }
.toPlurk{ background-position: 0 -32px; }
.toTwitter{ background-position: 0 -64px; }
.toDelicious{ background-position: 0 -96px; }
.toTechnorati{ background-position: 0 -128px; }
.toBuzz{ background-position: 0 -160px; }


16*16 的推文按鈕



/*Social Icon*/
.social{
background:transparent url(http://www.xxx.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;
}

.toFacebook{ background-position: 0 0; }
.toPlurk{ background-position: 0 -16px; }
.toTwitter{ background-position: 0 -32px; }
.toTechnorati{ background-position: 0 -48px; }
.toDelicious{ background-position: 0 -64px; }
.toBuzz{ background-position: 0 -80px; }


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



這裡我也介紹兩種的呈現佈局

第一種直接嵌在文章的後面:
找尋 <div class='post-body entry-content'> 這一行
將下面的程式貼在 <div style='clear: both;'/> 之前

<div>
分享至 :
<a class="social toFacebook" expr:href='"http://www.facebook.com/sharer.php?u="+ data:post.url + "&amp;t=" + data:post.title' rel='external nofollow' target='_blank' title='分享至 Facebook'>Facebook</a>
<a class="social toPlurk" expr:href='"http://www.plurk.com/?qualifier=shares&amp;status="+ data:post.url + " (" + data:post.title + ")"' rel='external nofollow' target='_blank' title='分享至 Plurk'>Plurk</a>
<a class="social toTwitter" expr:href='"http://twitter.com/home?status=" + data:post.title + " "+ data:post.url' rel='external nofollow' target='_blank' title='分享至 Twitter'>Twitter</a>
<a class="social toTechnorati" expr:href='"http://technorati.com/faves?add="+ data:post.url + " " + data:post.title' rel='external nofollow' target='_blank' title='分享至 Technorati'>Technorati</a>
<a class="social toDelicious" expr:href='"http://del.icio.us/post?url="+ data:post.url + " " + data:post.title' rel='external nofollow' target='_blank' title='儲存至 Delicious'>Delicious</a>
<a class="social toBuzz" expr:href='"http://www.google.com/reader/link?url="+ data:post.url + "&amp;title=" + data:post.title + "&amp;srcURL="+data:blog.homepageUrl' rel='external nofollow' target='_blank' title='分享至 Buzz'>Buzz</a>
</div>

這會看起來像這樣:



第二種是嵌在文章資訊列上:
找尋 <div class='post-footer'> 這一行
然後向下找尋相對應的 </div>
這裡沒有比較清楚的標示
找起來會比較困難一點
將下面的程式貼在 </div> 之前

<p class='post-footer-line post-footer-line-99'><span class='post-social-icons'>
分享至 :
<a class='social toFacebook' expr:href='"http://www.facebook.com/sharer.php?u="+ data:post.url + "&amp;t=" + data:post.title' rel='external nofollow' target='_blank' title='分享至 Facebook'>Facebook</a>
<a class='social toPlurk' expr:href='"http://www.plurk.com/?qualifier=shares&amp;status="+ data:post.url + " (" + data:post.title + ")"' rel='external nofollow' target='_blank' title='分享至 Plurk'>Plurk</a>
<a class='social toTwitter' expr:href='"http://twitter.com/home?status=" + data:post.title + " "+ data:post.url' rel='external nofollow' target='_blank' title='分享至 Twitter'>Twitter</a>
<a class='social toTechnorati' expr:href='"http://technorati.com/faves?add="+ data:post.url + " " + data:post.title' rel='external nofollow' target='_blank' title='分享至 Technorati'>Technorati</a>
<a class='social toDelicious' expr:href='"http://del.icio.us/post?url="+ data:post.url + " " + data:post.title' rel='external nofollow' target='_blank' title='儲存至 Delicious'>Delicious</a>
<a class='social toBuzz' expr:href='"http://www.google.com/reader/link?url="+ data:post.url + "&amp;title=" + data:post.title + "&amp;srcURL="+data:blog.homepageUrl' rel='external nofollow' target='_blank' title='分享至 Buzz'>Buzz</a>
</span></p>

這會看起來像這樣:



Blogger 範本 (樣版)變數說明:

expr: 讓 xxx='data:var_name' 裡面可以使用變數
data:blog.homepageUrl Blog 首頁的網址
data:blog.pageTitle Blog 的標題 + 文章標題
data:blog.title Blog 的標題
data:description Blog 的描述
data:blog.url 當前頁面的網址
data:post.url 文章連結(在 Loop 裡才有用)
data:post.title 文章標題(在 Loop 裡才有用)
data:post.body 文章內容(在 Loop 裡才有用)


圖片來源:

Social Media Network Icons | Komodo Media

參考連結:

版面配置資料標記 - Blogger說明

11 回應:

HCH 提到...

想請問一下 我依照你的 第二種範例存到HTML裡 但是系統告訴我以下錯誤訊息

我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
XML 錯誤訊息: The reference to entity "t" must end with the ';' delimiter.

請問要如何解決呢?謝謝

胡忠晞 Jax 提到...

抱歉程式碼輸出時忘了在為 & 再跳脫一次
現在已經換上新的 HTML 了

HCH 提到...

謝謝!! 不好意思 ....因為是blogger新手 還有一個問題耶

關於 "(16*16按鈕的圖片網址)" 可以說的詳細一點嗎?因為我的blog 上面的icon都不會出現 謝謝!!

胡忠晞 Jax 提到...

把 Icon 的圖上傳到你的 Picasa 或其他可以放圖片的地方
然後放上你的圖片網址,如:
url(http://xxx.xxx.xxx/social_icons.png) 0 0 no- repeat;

如果是放在 Picasa 請記得使用原始大小
Picasa 所有的縮圖尺寸(size)

HCH 提到...

多謝多謝!!已經成功 :D 有空也歡迎你來逛逛...

HCH 提到...

ㄟ ....又來問問題了
圖片是已經放在picasa的 但是網址非常的長 另外因為是加密的album所以要如何取得url 我是用比較笨的方式 就是用寫文章的方式 把他先load上去 再到HTML裡去取得url 請問有比較好的方式嗎?謝謝

另外 我的Picasa3讀不到 .png的檔案 但是我有到tool哪去勾選 結果也是沒有

胡忠晞 Jax 提到...

你上面已經是最好的作法了
我試過 Picasa3 upload 但會把 PNG 的透明破壞掉
所以從文章上傳是最好的
而且圖片也自動歸類在 Blog 的目錄下

你如果要用 Picasa3 管理圖片請記得指定他的目錄和他的顯示類型
如果這樣還不行找個時間密我一下
我都會在 Gmail 的 google talk 上

HCH 提到...

謝謝你的回答 若是以後還有其他問題再來請教!!

WFU 提到...

感謝分享,很棒很實用的文章~~

陳小彬 提到...

大大您好,想請問一下我照著您的方法下去做,卻無法顯示圖示呢?

http://champ2030.blogspot.tw/

麻煩您幫我看一下謝謝

胡忠晞 提到...

你多了一個 <!--分享按鈕--> 造成CSS錯誤,刪去後應該就可以了!