Blogger的美化─文章加入「讚」及推文功能

Blogger本來在後台的「版面配置」的功能中有提供「顯示分享按鈕」的功能，但是網友用了非官方的模版之後，這個功能可能就會失效了，解決的方法是參考這裡

http://www.bloggerplugins.org/2010/06/official-sharing-buttons-on-blogger.html 

方法如下：

1. 進入到後台的「範本」，先將「模版」先作好備份。
2. 點選「修改HTML」，勾選 「展開小裝置」。
3. 利用 Crtl+F 的搜尋找到底下列出來的程式碼
   
   <data:post.body/>

   在下方插入以下黑色字體的程式碼，再預覽網誌的分享顯示是否正常。
   
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>4
</b:if>

   如果你只想在內文裏顯示這個分享的功能，你必須如上面所表示的那樣，在黑色字體程式碼的上下各置入紅色字體的程式碼。
   
   
4. 如下圖的紅框所標示的，「分享按鈕」已經拻復顯示了，請按「儲存範本」結束設定。

上面那張圖中，以綠色框標示的的位置，是目前大家比較盛行的Facebook「讚」的功能，而且旁邊還有計數，讓你知道有多少人喜歡這篇文章。

1.  利用 Crtl+F 的搜尋找到底下列出來的程式碼，決定這個「讚」要放在那裏。
   
   文章的標題之前
   <b:includable id='post' var='post'>

   文章的後面
   <data:post.body/>

   文章意見的下方
   <p class='post-footer-line post-footer-line-1'p>

   
2. 在上面所列出的位置中選擇一個，在所選位置底下貼入下面所列出的程式碼
   
   <div id="fb-root"></div>
<script src="http://connect.facebook.net/zh_TW/all.js#xfbml=1"></script>
<fb:like data-action='like' data-font='arial' data-layout='standard' data-send='true' data-show-faces='true' data-width='450' expr:href='data:post.url'/>

   
   1. data-action='like' → like 換成 recommend 「讚」換成「推薦」
   2. data-layout='standard' →
        1  standard-------下圖中第一個形式
        2  button_count--下圖中第二個形式
        3  box_count----- 下圖中第三個形式
   3. data-send='true' → true 改成 false 取消寄送功能
   4. data-show-faces='true' → 改成 false 別貼按讚朋友的大頭貼
      
   
   
   
   
   
3. 按「預覽」，檢查這個「讚」的按鈕是否出現在我們所預定的地方。如果沒問題就儲存範本，結束設定。

最近看到一個網站 Blogger Sentral 使用浮動式的「分享」及「讚」鈕 ，很有趣，也不會破壞版面，安裝相當簡單，不用東找西找去改寫範本中的程式碼，省事多了。以後還可以追加其它的分享進去，真是太神奇了。(20111026補充)

1. 點選「版面配置」。
2. 點選「新增小工具」。
3. 選擇「Html/javascript」按 + 加進這個功能後，會跳出一個設定視窗。請將下面程式框裏的程式碼都貼到「內容」的框中，按下「儲存」就完成了
   
   
   
   
   <!-- floating page sharers Start bloggersentral.com-->
<style type="text/css">
#pageshare {position:fixed; bottom:35%; margin-left:-117px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">分享</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div class='sbutton' id='rt'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
</div>
<div class='sbutton' id='gb'>
<script src="http://connect.facebook.net/zh_TW/all.js#xfbml=1"></script>
<fb:like layout="box_count" show_faces="false" font="" expr:href='data:post.url'/></fb:like>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://www.bloggersentral.com/">widget</a></div><!-- Do not remove this link -->
</div>
<!-- floating page sharers End -->

   
4. 儲存後，記得要這個新增加的小工具移到主要的內文區下，這樣浮動欄才不會跑錯地方。
5. 如果，顯示位置偏移，在你網頁下方有個小工具圖示，點選就可以進入設定視窗，或者可以回到「版面配置」，重新打開這個小工具，調整上方程式框裏用紅色字體及藍色字體標示出來的數值。
1. bottom:35%→表示高度，增加數值，浮動欄會往上移。
2. margin-left:-117px→表示左右位置，負值愈大，浮動欄越往左，反之，往右。
6. 調整好後，按下「儲存」，檢視網誌的浮動欄位置是否妥當。
   

參考來源：
雲端書影、晳生博客、小人物的網路搜尋天地 、Blogger Sentral、

「Blogger的美化」系列筆記

• 簡單修改
• 網頁的CSS架構
• 模版的介紹與修改
• 小工具的調整  
• 文章加入「讚」及推文功能
• 加入「相關文章」
• 增加臉書留言版
• 以圖示更換連結文字
• 加入程式窗