2010-08-09

官方的分享按鈕 (Share Button)

一個多月前 Blogger 官方公佈了一個新功能,就是讓你能在 Blog 文章後面,補上一個分享按鈕,讓閱讀文章的讀者,如果喜歡你的文章,能更方便地透過按鈕分享到社群服務上。因為這個分享按鈕還挺小巧好用的,如果用的是官方樣板(就是沒像我愛手賤亂改的),只要兩三個步驟,就可以在 Blog 上啟用這項功能。也因為步驟太簡單,目前也只提供主流的社群服務,像是 Twitter 和 Facebook,另外還有 Email 分享(這個本來也就有)、Blogger 的 Blog This 和 Google Buzz,這樣五個按鈕一組的分享按鈕列就出現了!我好一陣子沒去動 Blogger 樣板,所以這項更新一直沒去動手,很久以前也做過「訂閱圖示」、就是讓讀者把文章加入書籤用的,所以一時心血來潮,用本文整理一下放在文章後面用來訂閱和分享的功能。

開始之前,先確定自己的 Blog 是不是有支援這項官方功能。登入管理介面,到「設計」、「網頁元素」頁面,找到「網誌文章」的區塊,點選編輯後會跳出設定畫面,勾選「分享按鈕」、看一下預覽後儲存,基本上 Blog 就支援這項功能啦,這時候來看看自己的文章,Reload 一下、如果文章後面已經出現分享按鈕,那麼後面文章也不用看了,因為你已經做完啦(代表你的樣板文件 Blogger 認得,而且程式碼有加對地方)!另外,如果有用這個分享按鈕,其實上面那個「顯示電子郵件發佈連結」就不用勾選啦,因為分享按鈕的第一個,作用就是透過電子郵件分享,功能一模一樣,留下一個就好了。

新增分享按鈕的設定畫面,勾選儲存就好了

如果使用以上安裝分享按鈕的方式還是沒顯示,或是顯示的位置不滿意,那麼就來參考一下下面的手動調整模式吧!先來點硬的,這個功能基本上會先在樣板原始碼裡硬塞入一段模組宣告,像是這樣:

<b:includable id='shareButtons' var='post'>
  <b:if cond='data:post.sharePostUrl'>
      <a class='share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
        <span class='share-button-link-text'><data:top.emailThisMsg/></span></a>
      <a class='share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
        <span class='share-button-link-text'><data:top.blogThisMsg/></span></a>
      <a class='share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
        <span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a>
      <a class='share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
        <span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a>
      <a class='share-button sb-buzz' expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=415,width=690\&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'>
        <span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a>
  </b:if>
</b:includable>

上面這段不用手動貼入,應該樣板原始碼裡都有(要「打開小裝置範本」才看得到)。有了宣告,要手動貼入的部份就是讓這個模組顯示的程式碼。當然貼在哪裡就會決定顯示的位置,我個人習慣放在文章的最後面,因為要收藏或分享,一定也是看完全文覺得好才做吧!文末的段落每個人的範本都不大一樣,但基本上是放在 post-footer 的區段下,像我的 post-footer 有三行,我找了最後一行:

<p class='post-footer-line post-footer-line-3'>

而且這行在 CSS 裡面我自己有定義「靠右」語法,所以區段下的所有元件都會自動靠右,我就不用再多塞程式碼來調整。然後是本文的重點,在下面貼入顯示分享按鈕的原始碼:

<!-- Share buttons -->
<b:if cond='data:post.sharePostUrl'>
  <div class='post-share-buttons'>
    <b:include data='post' name='shareButtons'/>  
  </div>
</b:if>

上面這段就是呼叫已經宣告的分享按鈕模組,樣板儲存、檢視文章,搞定!

如果找不到 post-footer-line-3,或是位置不滿意,可以試著擺在 line-2 或 line-1 下面,當然想放在文章一開始,像 post-header-line 或 post-body 下面都隨人高興。由於上面是用 DIV 標籤來顯示,如果要改按鈕的對齊方式,可以 K 一下 CSS 語法,加些對齊的設定到樣式定義裡面。我知道看到這裡,一定也有人想說:只支援 Twitter 和 Facebook 太少啦,能不能加入 Plurk 或是 Del.icio.us 之類的服務哩?很抱歉,網頁功能就是這樣,要簡單就沒辦法做太多彈性,官網是有承諾未來會增加多一點服務,但現階段分享按鈕就那五個。如果看得懂上面的程式碼,要用手動的方式調整分享按鈕的數量和服務也行,只要修改上面貼的那段 shareButtons 的 includable 模組宣告,自己增加背景圖、連結和圖示位置,一樣是能自訂出個人專用的分享按鈕,範例和詳情可以參考這篇文章:Blogger Share Button extended,裡面多搞了五個按鈕,有興趣自己試著做吧!

舊的和新的分享收藏工具列比一比

因為我很懶惰,所以最後我自己的 Blog 採用的方式是官方的分享按鈕加上我自己舊的訂閱圖示,兜出現在的分享工具列,哪天 Blogger 官方提供更多分享的服務按鈕,我也比較容易無痛升級啊~

回應: 3

匿名 提到...

g_f_w用户表示鸭梨很大

Jonathan Lee 提到...

請問當我已經把ShareButton的那串語法放在post-footer-line-1最後面的時候,理論上應該會出現在第一行的最末端,當我按下套用後,一切都還好好的出現在第一行最末端,但過了一陣子它都會自己跑到第二行,請問哪裡出了問題?請解救,感謝!

凍仁.翔 (Chu-Siang Lai) 提到...

酷,看來不少前輩都 hacking 過這個 ShareButton在下也分享一下點小心得囉 :P

-> 凍仁的筆記: 【Blogger】新增 Plurk 分享按鈕

張貼留言

歡迎留言或發表意見,不過要理性不做人身攻擊。匿名的朋友得到回應的速度會比較慢喔~
發問相關的禮貌和規矩請先參考這篇文章,不當留言、和本文無關的回應可能會被直接刪除無視喔!