如何在網站放Facebook臉書、twitter、Plurk噗浪「推文按鈕」?

由於微網誌的火紅在台灣噗浪的使用熱潮似乎有取代原本書籤網站的趨勢原本一堆喜歡透過書籤網站分享好康資訊的網友,

似乎都漸漸改用Plurk或twitter之類的微網誌來分享這些東西。

如果你想在你的網站或部落格放個twitter或Plurk噗浪的推文按鈕讓大家看完你的文章後可以隨手推到twitter或Plurk去跟大家分享該怎麼做呢?

繼續閱讀

推文按鈕DEMO:

[推到Plurk]   [推到Twitter]    [推到 Facebook](亦可將連結拉到瀏覽器書籤工具列當Bookmarklet用!)

延伸閱讀:

  1. [教學] 什麼是Plurk「噗浪」? 如何使用撲浪?
  2. Plurk 噗浪百大名人總整理!
  3. Plurk Rich Edit 免記噗浪語法「多功能編輯器」讓你輕鬆玩噗浪!
  4. Plurk Smile 在噗浪使用「外掛的」表情圖示!
  5. [下載] 999個超漂亮的Plurk Theme噗浪佈景主題

重灌狂人Facebook粉絲專頁:http://www.facebook.com/briiancom

 

 

Plurk噗浪推文按鈕語法:

<a href="javascript: void(window.open('http://www.plurk.com/?qualifier=shares&status=' .concat(encodeURIComponent(location.href)) .concat(' ') .concat('&#40;') .concat(encodeURIComponent(document.title)) .concat('&#41;')));">[推到Plurk]</a>

其中「?qualifier=shares」這段裡的「shares」可以改成loves、likes、gives、says...等如果對方是使用中文的Plurk介面也沒關係推文時噗浪會自動把「says」轉成「說」把「likes」轉成「喜歡」。

 

Twitter噗浪推文按鈕語法:

<a href="javascript: void(window.open('http://twitter.com/home/?status='.concat(encodeURIComponent(document.title)) .concat(' ') .concat(encodeURIComponent(location.href))));">[推到Twitter]</a>

 

Facebook 推文按鈕語法:

<a href="javascript: void(window.open('http://www.facebook.com/share.php?u='.concat(encodeURIComponent(location.href)) ));">[推到 Facebook]</a>

 

安裝、設定方法:

只要把上面兩個推文按鈕的程式碼貼上到你的網頁或部落格版面即可以下以WordPress網站為例其他PIXNET或Yam天空部落格等網站可以把在佈景主題中新增一個「自訂欄位」然後再把程式碼貼上即可。  

第1步  將上面的twitter與Plurk推文按鈕放到你的WordPress網站佈景主題中一般是在:

\wp-content\themes\佈景主題名稱\single.php

程式碼的位置一般會放在single.php佈景主題中「<h2><?php the_title(); ?></h2>」的下方或其他你要放置推文按鈕的地方。

001  

 

第2步  修改好之後文章標題下方會出現我們剛剛所貼上的兩個推文按鈕當網友們按下該按鈕之後便會自動開啟twitter或Plurk噗浪網頁並自動將你的網頁標題與網址貼上到發文框中。當然我們也可以自行做個可愛一點的圖放在網頁中吸引大家幫你推文。 

另外如果你想把推文按鈕放在文章右邊的話可以在推文按鈕的上、下方加上如下控制碼即可:

<div style="float:right;">
推文按鈕程式碼
</div>

002  

 

第3步  如圖當網友按了你網頁上的twitter或噗浪推文按鈕後推文按鈕會自動將網頁網址與標題貼上到twitter或噗浪發文框我們只要再按一下〔Plurk〕或twitter的〔Update〕按鈕即可將此訊息分享給親朋好友閱讀。

003  

 

目前實際測試在IE、Firefox、Opera與Google Chrome瀏覽器都可正常運作抓到的網址與文章標題也都可以正常顯示中文。另外以上按鈕由於有javascript的字樣在Yahoo!奇摩部落格與無名小站的限制比較多的網站都無法正常運作如果想玩些比較有趣的東西建議改用其他部落格服務。目前測試PIXNET痞客邦、YAM天空部落...等網站都可正常使用。PIXNET的設定方法請參考:如何在PIXNET網站版面加入Plurk、twitter推文按鈕

 

 


剛剛另外弄了個比較像「按鈕」的樣式貼在網頁上應該比純文字顯眼一些。大家可以再把他微調一下搭配自己的佈景主題來用。

<div style="float:right;">
<div style="width:84px;height:20px;font-size:12px;color:#FFFFFF;background-color:#33CCFF;border-style:outset;text-align:center;cursor:pointer;margin-bottom:3px;" onClick="javascript: void(window.open('http://twitter.com/home/?status='.concat(encodeURIComponent(document.title)) .concat(' ') .concat(encodeURIComponent(location.href))));" title="推薦本文到Twitter推特去!" onMouseover="this.style.color='#FFFF33';" onMouseout="this.style.color='#FFFFFF';">推到 Twitter!</div>

<div style="width:75px;height:20px;font-size:12px;color:#FFFFFF;background-color:#F37D17;border-style:outset;text-align:center;cursor:pointer;" onClick="javascript: void(window.open('http://www.plurk.com/?qualifier=shares&status=' .concat(encodeURIComponent(location.href)) .concat(' ') .concat('&#40;') .concat(encodeURIComponent(document.title)) .concat('&#41;')));" title="推薦本文到Plurk噗浪去!" onMouseover="this.style.color='#FFFF33';" onMouseout="this.style.color='#FFFFFF';">推到 Plurk!</div>

<div style="width:95px;height:24px;font-size:12px;color:#FFFFFF;background-color:#3B5998;border-style:outset;text-align:center;cursor:pointer;" onClick="javascript: void(window.open('http://www.facebook.com/share.php?u='.concat(encodeURIComponent(location.href)) ));" title="推薦本文到Facebook去!" onMouseover="this.style.color='#FFFF33';" onMouseout="this.style.color='#FFFFFF';">推到 Facebook!</div>

</div>

 

Plurk、twitter推文按鈕畫面DEMO:

延伸閱讀:

  1. 如何在PIXNET網站版面加入Plurk、twitter推文按鈕?
  2. [教學] 什麼是Plurk「噗浪」? 如何使用撲浪?
  3. Plurk 噗浪百大名人總整理!
  4. Plurk Rich Edit 免記噗浪語法「多功能編輯器」讓你輕鬆玩噗浪!
  5. Plurk Smile 在噗浪使用「外掛的」表情圖示!
  6. [下載] 999個超漂亮的Plurk Theme噗浪佈景主題
  7. Plurk This Post WordPress Code
  8. Twit This WordPress Code

最後更新:08-12, 2013 上午 1:30

TAG:
相關資訊

訪客留言:

76 Replies to “如何在網站放Facebook臉書、twitter、Plurk噗浪「推文按鈕」?”

  1. 請問如果同一個頁面有2張圖想分別分享或按讚,行得通嗎? 因為似乎都只能分享一個網址而已? 謝謝!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。