2009年8月11日 星期二

新增Plurk、Twitter及Facebook推文按鈕


隨著網路工具發展愈來越多元的趨勢,當然部落格也要隨著時代日新月異來個更新,新增了三個部落格推文按鈕,分別是Plurk(噗浪)、Twitter(推特)及Facebook(臉書)。


其實這三個工具我很少在用,不過想想還是研究一下,畢竟最近這三者是大熱門的網路工具,參考了Browny Walking: [tip] 在 Blogger 加入 Plurk 推文按鈕Not My Business---在Blogger文章中放置噗浪與twitter推文按鈕這兩篇文章,如果你是初學者,建議使用這兩篇文章的方式即可,作者都寫得很詳細,綸太郎自己也設了一列推文工具列,和文章上方的共享書籤其實大同小異,可以說是第一代和第二代吧,也把文章原先前頭的Funp推文鈕整合到這個工具列上,讓版面看起來不致太過雜亂,不過建議比較熟悉html語法的朋友再來使用,記得修改前,一定要備份。

進入後台→版面配置→修改Html,勾選"展開小裝置範本"

先新增兩個定義,就是推文工具列(.bookmarkpush)的CSS外觀定義,還有推文工具列的圖片定義(.bookmarkpush img)這裡你可以依據你的版面自行調整,我的圖片都是60px*60px大小,你可以自行到網路上尋找適合你自己的圖片,或是用文字代替亦可。
.bookmarkpush {
padding-top: 10px;
}
.bookmarkpush img{
padding-right: 10px;
}

第一個定義是工具列與上方有10px的距離,第二個則是工具列內的圖片與右邊距離10px,這些都可自行調整。

以上這部分放在CSS區即可,即]]></b:skin>前就行了。

而以下這段則是放在內容結構區Html裡面了(以我的版面應該是在Labels這行下方,就是 <div class='post-footer-line post-footer-line-2'>......</div>這個區塊下),所以要比較熟悉版面配置的朋友再使用,不然很可能會加錯地方,因為每個模版的配置都不太一樣,在你的版面適當的位置自行加入,我是放在文章後面,訂閱文字之前,原始的語法如下,裡頭紅色的文字,及綠色圖片位址你可以換成你自己的,


<div class='bookmarkpush'>如果您也喜歡這篇文章&#65292;歡迎推文分享......<br/> <div class='funp_button' style='float:left; margin-right:10px; font-size:0px;'><data:post.url/></div> <a expr:href='&quot;http://www.plurk.com/?qualifier=shares&amp;status=&quot; + data:post.url + &quot; &quot; + &quot;(&quot; + data:post.title + &quot;)&quot;' target='_blank' title='推文至 plurk'><img src='http://sites.google.com/site/lunfiles/box/plurkc1.png'/></a>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + data:post.url' target='_blank' title='推文至twitter'><img src='http://sites.google.com/site/lunfiles/box/twitterc1.png'/></a>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='分享至 Facebook'><img src=' http://sites.google.com/site/lunfiles/box/facebookc1.png'/></a></div>

其中上方紫色的Funp按鈕,你可以選擇不加入,如果要加記得要在</head>前面加入以下這段Java Script的程式碼才能運作,
<script src='http://blogger-ext2.googlecode.com/svn/trunk/3rd/funp_button2.js'/>另外因為綸太郎的推文工具列是在文章展開後(按下繼續閱讀後)才出現分享推文的工具列,所以前後會多加上兩行敘述,
<div align='left'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
推文分享工具列程式碼
</b:if>
</div>

如果沒有加入的話,會在首頁及文章本頁都會出現推文工具列。

另外先前有跟我一樣,在文章末放入訂閱的提醒文字列(歡迎訂閱RSS,最快收到最新的文章。)者,記得上面的
</b:if>
</div>
是要加到類似以下這段語法之後
<div class='subscribe2'><a href='http://feeds2.feedburner.com/lun01' title='訂閱0與1謎詭世界'>歡迎訂閱RSS&#65292;最快收到最新的文章&#12290;</a></div>
因為有幾個朋友有使用這個工具列,所以提醒一下。


每個模版都不盡相同,要自己找到對的地方加上去即可,或是加在你原先的共享書籤後頭也行,只是圖片你要自行搜尋較小的圖,然後參考這篇單篇文章加入共享書籤(Social-Bookmarks),不過這部份就有點複雜了,只要後頭再加上
<a expr:href='&quot;http://www.plurk.com/?qualifier=shares&amp;status=&quot; + data:post.url + &quot; &quot; + &quot;(&quot; + data:post.title + &quot;)&quot;' target='_blank' title='推文至 plurk'><img src='圖片網址'/></a>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + data:post.url' target='_blank' title='推文至twitter'><img src='圖片網址'/></a>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='分享至 Facebook'><img src='圖片網址'/></a>
即可。

延伸閱讀:
Social Media Web 2.0 Cloud Icons
在文章下方放置訂閱RSS的文字敘述
Blogger template模板教學課程---概說及基本結構

31 則留言:

  1. 不知道是不是因為有使用書籤的語法,我ㄧ但使用.bookmarkpush就會沒辦法存檔。
    但是,只要拿掉那個方面的語法,還是可使用一開始你說的那種。(因為我發現用你說貼在書籤那邊的語法,推推王會不見)

    回覆刪除
  2. 貼在原始書籤後頭,因為裡面原本就有推推王了,所以我的最後的語法是沒有加上推推王的語法,所以不是不見。

    .bookmarkpush這可能和你放的位置有關,可以把它放/* Posts這區裏面,或是自己另取名稱自行定義都可以,目前我看你的版面是正常的,只是少了.bookmarkpush,會看起來擠一點。

    回覆刪除
  3. sorry,我沒說清楚,應該說會顯示多少人推薦的那個圖案沒有出現~ ^^

    目前雖然比較擠,但是的確還OK,可能明天再試看看放在posts那邊吧... ^^

    回覆刪除
  4. To 暗夜,應該是時間差吧,他會慢點出現,不是沒有出現。

    回覆刪除
  5. 感謝分享,我已經自己試成功了,之前就想加入這個功能,今天一次到位!(還好是跟你的模版一樣,較好處理)

    回覆刪除
  6. 很不錯,自己都會處理了,拍手鼓勵。

    回覆刪除
  7. 嗯嗯,諾的網站也有更新。^_^

    回覆刪除
  8. 綸太郎好久不見
    我剛成功加入這三個推文按鈕了
    感恩啦~~

    黑色童話

    回覆刪除
  9. 不客氣,你換成自己的按鈕很不錯,很配合你的版面。

    回覆刪除
  10. 很棒的教學文章
    尤其是圖很cute

    Thanks~

    回覆刪除
  11. 謝謝,我也覺得很可愛。

    回覆刪除
  12. 請問一下,要怎麼做"♠ 以下文章或許您也有興趣 ♠"?

    回覆刪除
  13. 你好,請問我有成功的加入這三個推文按鈕,但我試著將文章分享到facebook後,至facebook查看卻是沒有出現,一切過程都沒有錯誤訊息...不知道問題出在哪?

    回覆刪除
  14. 我想是因為你的瀏覽器有設定,"封鎖彈出式視窗",而轉貼至Facebook時會跳出驗證碼的視窗,他無法跳出,所以張貼無法完成,如果不想更改設定,或許試看看官方提供的語法也是可以的。

    回覆刪除
  15. 你好!發現推文plurk的按鈕按了會發現網址少了http:的"//"雙斜線。
    http:01mistery.blogspot.com/2009/08/plurktwitterfacebookbutton.html (新增Plurk、Twitter及Facebook推文按鈕)

    回覆刪除
  16. 是啊,但還是可以推文完成,我參考的那兩篇的程式碼是這樣子的,我自己也不會改程式碼。

    回覆刪除
  17. 綸太郎 你好:
    我加入推文按鈕後,是成功出現在文章下方了,但是按鈕全都變成垂直排立,不知要如何才能改成水平排列?
    http://lh3.ggpht.com/_ZJABng6zChc/S3Pwct-VgmI/AAAAAAAAAns/VjwMObtPCj0/%E6%8E%A8%E6%96%87%E6%8C%89%E9%88%95%E5%95%8F%E9%A1%8C.jpg

    回覆刪除
  18. 你把語法裡的
    img {
    border: 0;
    display: block;
    }
    其中的display: block;刪除看看,是否可以回復正常。

    回覆刪除
  19. 綸太郎:
    謝謝你!恢復正常了
    你的網誌很棒
    提供很多實用的教學
    對新手幫助很大 ^_^

    回覆刪除
  20. 不客氣,我也是在學習中。

    回覆刪除
  21. 您好,
    不好意思我想請教一下
    我使用FACEBOOK推文計數器並成功加入按鈕,
    但測試分享文章時,有些文章的文字內容不會出現,但有些卻有,不曉得您知道知道問題出在哪裡呢?@@

    謝謝

    回覆刪除
  22. 不清楚,我都自己修改。

    回覆刪除
  23. 您好,請問我的按鈕旁邊會出現白色的
    可是我的圖片是PNG透明背景圖檔
    不知道這是為什麼呢?要怎樣改呢?
    謝謝

    回覆刪除
  24. 我想可能是這個敘述.
    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
    padding: 5px;
    background: #fff;
    背景顏色.post-body img,設定成白的,你可以將相關與法刪除,例如
    background: #fff;

    回覆刪除
  25. 您好,不好意思想請問一下。
    我使用你寫的這個語法(推文分享工具列程式碼),但發現不能按下繼續閱讀後才出現分享推文工具列,依舊會出現在文章下方耶,這是為什麼呢?
    謝謝!!

    回覆刪除
  26. 因為沒有你的網址,所以沒法幫你看,你有加文章裡寫的以下語法嗎?
    <div align='left'>
    <b:if cond='data:blog.pageType == "item"'>
    推文分享工具列程式碼
    </b:if>
    </div>

    回覆刪除
  27. 你好,這是我用的http://btemplates.com/2010/blogger-template-modern-clix/ 版面網址。
    我有把文章展開後的這個語法加入,但還是沒有顯示出來。
    而且我也無法顯示出推文工具列,謝謝。
    好奇怪。

    回覆刪除
    回覆
    1. 我用你提供的模板試做是成功顯示的,可能是你有些Hacks有衝突,還是裝到錯的位置吧,建議還是用官方的模板。

      刪除
  28. !!那在請問一下,推文工具列是在文章展開後(按下繼續閱讀後)才出現的這個語法,是要放在class='post-footer-line post-footer-line-2'> 這個語法的前後嗎? 就是要放兩次?
    請問blogger本身文章就有推文工具列,但這個模板卻無法顯示出來,是還要安裝甚麼語法嗎?
    謝謝不好意思問這麼多!!:))

    回覆刪除
  29. 只要放一個即可,無法顯示的話,按下"將迷你組件範本回復為預設值"看看有無效。

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能