v 新增Plurk、Twitter及Facebook推文按鈕 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...