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


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

2010年2月19日 星期五

新增Google Buzz 評論按鈕及Facebook Share推文分享計數按鈕


為了跟得上資訊潮流的腳步,綸太郎也稍微調整部落格的模板,提高網站的互動性,增加了最近新的工具Google Buzz的評論按鈕,也一併增加Facebook 分享數量按鈕(share count button)的功能,讓自己的文章有更多的機會讓他人閱讀到,只要小小的動作,就可以分享好文給大家,何樂而不為呢?

【新增Google Buzz評論按鈕】
按鈕的語法為
<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Bookmark To Google'><img alt='Google Buzz it' border='0' src='圖片網址' title='Google Buzz it'/></a>
也有JavaScript語法
<a href='javascript:var%20b=document.body;var%20GR________bookmarklet_domain=&quot;http://www.google.com&quot;;if(b&amp;&amp;!document.xmlVersion){void(z=document.createElement(&quot;script&quot;));void(z.src=&quot;http://www.google.com/reader/ui/link-bookmarklet.js&quot;);void(b.appendChild(z));}else{}'>
<img src="圖片網址" border="0" title="Google Buzz Share Buttons PSD" alt="Google Buzz Share Buttons PSD" alt="Share on Google Buzz"/></a>

兩種皆可用。

Google Buzz的圖片有很多種,看你的版面適合哪種,下載到自己的空間即可,由於是png圖片,所以是透明圖層的背景,不限於白色,會比較適合各種顏色的模版使用。

長方形的 89*24px


大圖的正方形 58*72px



小圖的正方形58*72



參考來源:
Google Buzz Share Buttons PSD

【新增Facebook 分享數量按鈕】
這個Facebook官網上即有提供,請參考分享 | Facebook


看你喜歡哪種的,將程式碼複製到你的模板內即可,但由於綸太郎的按鈕背景為深藍色,圖片會有一塊正方形,很醜,所以不適合用,另外和其他按鈕並排時,在IE底下瀏覽會被推到下方去,除非我把它排列在第一位,也就是Funp推文按鈕前才不會被擠到下方去。


所以我想Facebook 的分享按鈕預設是套用在白色的背景,所以我就將按鈕放在文章日期的那個區段,用小按鈕來配合日期欄的版面。



如果你也想放Facebook的按鈕在文章區的不同區塊位置,可以參考這篇
Blogger Widgets: Facebook Share Count Buttons For Blogger

有人或許會問要放在模板的何處,我想大部分的模板都有社會書籤的功能,將語法和他們放在一起即可,看你要他顯示在何處,自己再將語法置入即可,通常是 post-footer-line-1或是 post-footer-line-2,如果想放在本文上,可參考
將Google AdSense放入本文裡
單篇文章加入共享書籤(Social-Bookmarks)
,大概是類似的作法即可達成。
不過這個Facebook分享按紐,是分享到個人的塗鴉牆上,而無法選擇分享到自己的粉絲專頁,所以還是要透過網誌的設定,自動轉貼到塗鴉牆上,不過我覺得更新太慢,都是用手動的轉貼。

其實綸太郎裝了這個東西後有點被嚇到,最近寫的日本櫻花前線系列文章,2010 年櫻花前線預測搶先報,居然被分享83次,另一篇也有56次,可見Facebook現在的傳播能力是大過很多媒介了,因為很多資訊都需要登入FB或是和對方成為朋友,偶爾才會知道有人轉貼你的文章,所以經營Facebook的粉絲專頁也是相當重要的,會幫你的部落格帶來流量,也可和網友互動,有興趣的朋友可以貼上這兩個功能貼紙,幫自己的部落格增添人氣吧。



2010.11.3更新
因位目前Facebook改版後,share功能已經拿掉,如果需要的朋友可以參考這篇,
Facebook share counter button推文計數按鈕如何安裝

15 則留言 :

  1. 首先,多謝綸太郎的分享,令我更認識blogger。在這裡,我希望作些分享。

    blogger的meta-description,會附加於每一頁,對facebook分享來說,實在是很大影響。facebook會提取meta資料作分享內容,但meta就會令每一頁都只會出現同一篇網頁描述。
    利用Abin's Tech Note的讓側邊列(Sidebar) 的元件只在首頁顯示/不顯示,就可以令meta只在首頁出現,這樣做也有助優化SEO。
    這是我小小的分享,希望對各位有所幫助。

    回覆刪除
  2. 謝謝你提供的資訊,第二點我有空再來測試看看,感恩。

    回覆刪除
  3. 我有個facebook Shares 的問題想請教..
    我在自己的網頁上安裝了Shares按鈕,
    但我按Shares時只可出現自己網頁的網止,
    圖片同文字都沒有出現.
    請問可教我一次安裝Shares按鈕可出圖片同文字的安裝?
    謝謝!

    回覆刪除
  4. 就是利用facebook提供的語法,我不曉得為什麼你的沒有出現文字與圖片,你可以看看http://brownywalking.blogspot.com/2009/10/blogger-facebook.html這篇,看看是否對你有幫助。

    回覆刪除
  5. 綸太想請問一下,我照指示安裝以後,我把語法放在post-comment-link後面,在每篇文章內頁可以看到推文數字(例 http://www.eversearch.net/2010/03/blog-post_12.html ),但在首頁却只能看到預設沒有數字的推文鈕,要如何做才能在首頁每篇文章標題都能看到推文數字呢?謝謝您~

    回覆刪除
  6. 你好,為什麼我裝完之後那按鈕會出現在文章下方?而不是出現在標題左方呢?
    要如何設置?謝謝

    回覆刪除
  7. To Even,目前你的網站看不到有fb的工具.

    回覆刪除
  8. To Peter,你可能要加上float:left;的語法.

    回覆刪除
  9. 請問綸太郎,目前使用的是新的模板,如果想和您一樣把facebook share按鈕放在日期旁邊,我該怎麼做呢??謝謝您~

    回覆刪除
  10. 我是在 <b:if cond='data:post.dateHeader'>
    <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>
    後面加上
    <span style='float:right;'>
    <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
    <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
    </span>
    你展開小裝置範本找看看應該有關於data:post.dateHeader這段的後面加上即可。

    回覆刪除
  11. 謝謝您的回覆,但是我貼在您說的位置之後,他現他有出現icon但是不能按,這又是怎麼回是ㄌㄟ?謝謝您!!

    回覆刪除
  12. 其實不是不能按,可以觀察比較下面的有些是可以按的,但範圍很小,應該是被標題擋住,你可以新設一個定義
    h2.date-header {
    line-height: 1.8em;
    margin-top: 5px;
    }
    這是日期區的定義,你的模板沒有定義這個元素,連文章主文區.post-outer都沒有定義,讓標題區和日期區沒法明確分開,所以才會這樣。

    回覆刪除
  13. 版主你好:

    瀏覽貴網頁讓我獲益良多,能否再請教一下,
    你每篇文章的右上角都有「share」標籤,這是
    怎麼做的?

    能否煩請指點?

    謝謝。

    回覆刪除
  14. 參考最新這篇吧,http://01mistery.blogspot.com/2010/11/fb-share-counter.html 寫在留言太多了,乾脆發文。

    回覆刪除

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

Related Posts Plugin for WordPress, Blogger...