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

 

 

推到 Twitter!
推到 Plurk!
推到 Facebook!
版本更新回報..

由於微網誌的火紅,在台灣噗浪的使用熱潮似乎有取代原本書籤網站的趨勢,原本一堆喜歡透過書籤網站分享好康資訊的網友,似乎都漸漸改用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噗浪佈景主題

 

 

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

 

(請勿全文轉貼本站文章,歡迎「部份引用」或介紹,引用時請註明 ①網站名稱 與 ②文章網址,感謝~~ )
→ 免費訂閱最新文章:  (如何訂閱?)
本文作者:不來恩 | 發表時間:2009/06/06 | 分類: Blog, Plurk噗浪、微網誌, Twitter微網誌, WordPress 網站架設, 網頁編修、網站架設 | Trackback 引用網址     
注意事項:本站所介紹之軟體、設定或網站服務,經實際安裝測試並通過防毒軟體掃毒。但因為不同電腦環境與軟體設定可能都各有差異,建議您僅在非工作用的電腦安裝、測試,避免因為不可預知的錯誤、當機或軟硬體衝突,影響您的工作或電腦運作。另外,在進行任何重要的操作與設定之前,記得先行備份電腦中的重要資料,避免因為未依指示的不當操作或其他疏失造成資料毀損。當您依照本文所提供之訊息執行各種操作,表示您已閱讀此注意事項並同意自行承擔可能之風險與責任。

飛狼直升機 HP CQ41-105AX 64雙核獨顯強悍機 好神拖360度旋轉拖把組(拖把+脫水桶+布盤x1)

 

關於本主題有 44 個留言:

  1. [...] 程式碼的位置通常都是放在single.php佈景主題中「<h2><?php the_title(); ?></h2>」的下方。 [...]

  2. VaNeSsA 說道:

    請問我還是想知道XUITE是否可以將文章堆到噗浪嗎??
    如果可以要怎摸用耶!!

  3. [...] 如何在網站放twitter、Plurk噗浪「推文按鈕」? – 重灌狂人, [...]

  4. [...] 推文至 Plurk 與 Twitter 功能是參考重灌狂人的如何在網站放twitter、Plurk噗浪「推文按鈕」?加以修改完成! [...]

  5. Andrew 說道:

    如果要把超聯結變成圖片~~

    是在』 [推到Twitter] 『的地方改成圖片的語法嗎??

  6. 阿勒顧 說道:

    請問版大~
    我常看您的文章
    每次看都又找到我要的結果,也有看到一些新奇的東西~
    先感謝您~我也希望有一天我也能在我的blog上面分享事物

    我根據這篇文章 在我的blog上置入了程式碼~~
    可是就是出不來~~
    不知道是否能和您請教要如何解決!~
    還是msn不支援java~~@@
    有辦法改嗎。。
    我本身申請了facebook plurk twitter
    並且使用hellowtxt整合三個帳號
    可是~~好像連結不出去壓!!~~@@嗚嗚

    請幫我解解看~~thx

  7. kiki 說道:

    謝謝你嘞~~加入BLOG裡囉!!

  8. [...] This post was Twitted by howard0617 [...]

  9. 路人路過而已 說道:

    剛才已試用了這些小功能,很成功也非常方便。要感謝不來恩的大力推薦。還有…實在不知為何有人會特意上來謾罵一番…真是……

  10. 這個好玩~ 說道:

    這個好玩~我等等也來加到我的BLOG!!!
    謝謝不大啦~

  11. Goodies 說道:

    如果不嫌棄的話 這2個按鈕圖給你參考看看^^ 剛才亂弄的

    Twitter
    http://blog.roodo.com/intheplayground/3c92d289.gif

    Plurk
    http://blog.roodo.com/intheplayground/762d3d67.gif

  12. 黃鳥 說道:

    讚耶!!我連Joomla上面都裝了,雖然我目前按鈕上的中文字顯示不出來,但都推文很成功(也有中文字!)!

  13. [...] http://briian.com/?p=6313 這篇文章上有詳細的介紹,在下手殘懶的打了 [...]

  14. 路人丁 說道:

    請問不來恩,
    要如何修改已發的噗的狀態呢? ←就是』說』、』討厭』、』喜歡』的這種狀態
    我google不到怎麼改耶,還是現在不支援修改狀態? 只能刪掉重噗??

  15. JK 說道:

    其實plurk翻成噗浪真的很難聽

    而且plurk 應該是發類似 『噗樂』

    叫做噗浪 好像發浪… = =

  16. kevingo 說道:

    感謝分享 :D

  17. Dream 說道:

    老實說不大真的很「ㄎ一ㄠˋ」…
    上次才看到Funp吸引人的數量不如Plurk馬上把推文換成噗浪….

  18. 半熟英雄 說道:

    真怪
    這是不來恩分享給大家玩的
    你看的不高興就不要來看阿
    你哪隻眼睛看到不來恩叫大家要推他的文了
    屁眼嗎

  19. KUBY 說道:

    我用的是Pixnet的blog服務,裝不上去~我再佈景主題裡找不到 這一行~~

  20. Host 說道:

    這個不錯!我來放到自己部落格測試一下~~

  21. 無聊的要命 說道:

    整天噗浪噗浪的掛在嘴邊,厚顏無恥的濫用google網路資源再那裡膨風,有事沒事就要提一下你是知名部落客,不知羞到了極點

    • 約翰 說道:

      這位仁兄,你果然是無聊的要命呢。

      你從哪裡聽到不來恩說自己是知名部落客?部落格的原意是分享,正如下面一位網友回應所言,在自己的部落格分享自己找到的東西有什麼問題嗎?

      講句不好聽的:你說網路上的東西有哪一項Google找不到?全都找的到啊,只要你肯花時間精神,但這並不代表濫用google網路資源啊。何況談自己有興趣的東西又有何不對?版大又沒有收噗浪的好處。

      見不得人好就匿名謾罵的人才叫不知羞恥吧?

    • 水準 說道:

      會講這種話的人應該去國小1年級好好上課吧
      居然可以把那麼單純的一件事,把自己的缺點套在別人身上
      水準到底在哪裡?

    • 樹大招風 說道:

      人怕出名豬怕肥

  22. guest 說道:

    這是來自 http://www.macuha.com/2009/04/wordpress/plurk-this-post-wordpress-code/ 的寫法吧? 看來好像變成大大的原創了…

    • kent 說道:

      版大並沒有說過這是他的原創,我想版大的部落格原意是分享,並沒有說他四處研究原始碼並且獨創。而且如果您常常觀察版大的部落格,就可發現範圍還蠻廣的,明顯不是專門寫某些東西(如噗浪)原始碼的程式設計師。

      何況Plurk和Twitter的官方網站本來就有程式語法教學,上頭其實就有了,如果網友們願意花時間研究那數量頗為龐大的原文線上手冊和他們公布的原始碼的話….

      重要的是「分享」的精神,讓大家可以以自己熟悉的語言快速找到好用而且自己有興趣的小功能,這才是這個部落格的目的吧

      • guest 說道:

        引用別人創意來擴充或延伸,基本禮儀是要提及引用來源吧,而不是據為己有、或有意或無意的讓他人認為自己正是創意來源。

        文章寫得很詳盡,對於引用源頭卻隻字不提,其心可議。

      • 訪客 說道:

        可見你沒看完文章.. 沒看完就亂批評

  23. 艾力克 說道:

    真好玩,收下了!!

  24. 大頭猛 說道:

    其實如果有把文章貼到推推王的習慣的話
    也是可以勾選同步貼到Plurk或twitter
    再搭配噗浪可以同步到facebook之類的設定
    就有post once show anywhere的效果

  25. iTouchTW 說道:

    我有改變一下,用成圖片,不過好像還是不太完美,晚點如果有空來修圖。如果漂亮在分享給大家吧。

  26. HELLO 說道:

    請問~
    Xuite適用嗎
    怎麼用呢

  27. iTouchTW 說道:

    推,我也把我網站裝上了,這個教學超棒。

  28. 瓶貓 說道:

    這個真的太好用了,尤其是對想推文的人…
    試用過後,每台電腦都自動加入書籤來用了^^
    真的大推這篇~

  29. JC 說道:

    這個好用!我測試了一下真的可行!該篇文章的標題還可以抓到呢

  30. Wallace 說道:

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

    非常認同,剛看到這篇,馬上就推上 plurk 了~ ^^

  31. 無聊! 說道:

    誰要推你的爛文章,窮極無聊,每天灌水,還鬧不夠嗎?

  32. 拆組達人 說道:

    這個讚!
    等會就去加上我的部落格!^^

歡迎留下您的想法或意見...

暱稱:     部落格:

信箱:

(為避免垃圾訊息,全部留言需經系統管理員審核之後才會出現,請勿重複發文)

 

 

 

 ▇ 產業科技新知

 

 ▇ 其他文章

 

 

【重灌狂人】全部文章分類:

  防毒軟體 MSN, WLM 聊天軟體 Yahoo!即時通
下載、P2P YouTube Google
Firefox瀏覽器 Opera瀏覽器 Blog
好用軟體 好站推薦  
     
  Windows XP電腦密技 Windows Vista電腦密技 Mac OS 蘋果電腦密技
其他作業系統    
     
  Office文書處理 檔案管理 郵件收發
影音播放 影音剪輯 秀圖、圖片編修
網路瀏覽 網頁編修、網站架設 WordPress 網站架設
     
  硬體3C資訊 手機流行通訊 廠商新聞稿
【超級星光大道】 熱門話題 好玩
七嘴八舌 貼圖、影片分享