Blogger 電腦版行動版文章中安裝社群分享按鈕

這篇的規劃需求是想在 Blogger「行動版 ( 手機版 )」及「電腦版」網站的文章頁面，標題下方及文章最下面的作者區塊上方，安裝「社群分享按鈕」。Facebook、G+、Twitter、LINE 分享按鈕，是這次設置的主要分享源。

在這兩個區間安裝「分享按鈕」有個好處，在用手機瀏覽網頁時，這段區間顏色區塊大，放入較多按鈕擠到第二排也不至於感覺肥大。而文章標題下方的「分享按鈕」，我們一樣選擇數值式按鈕，讓來訪文章頁面的訪客知道這篇文章的熱門度！

首先，我們可以觀察一下完成後的「行動版網站」(*「STEP 3-2」的文末可觀看「電腦版網站」的完成圖 ) ，如下圖綠色框格部份。

設定流程

開啟「自訂」Blogger 行動版範本
範本中找查需要置入分享按鈕的程式碼區段
文章內頁加入社群分享按鈕程式碼
部署分享按鈕「JS、CSS」

設置前準備

若對編譯 Blogger 的 HTML 模板還不太熟悉，建議先執行『備份 Blogger 模板 (範本)』的動作，以防原始模板資料遺失。

設定教學

Step 1

開啟「自訂」Blogger 行動版範本

如果想在行動版網站中添加額外的小工具、CSS、廣告或是分享按鈕，就得開啟 Blogger 行動版範本的「自訂」功能。可以前往「自訂 Blogger 行動版範本與自適應設計原理」的「STEP 1 使用自訂 Blogger 行動版範本」，查看開啟「自訂」 Blogger 行動版的步驟。

Step 2

範本中找查需要置入分享按鈕的程式碼區段

接下來，點選【範本 \ 編輯HTML】

在程式碼頁框裡面用滑鼠左鍵點一下，並按下鍵盤組合件【Ctrl + f】 ( 按著 Ctrl 再按一下 f ) ，在出現的搜尋框中輸入「<data:post.body/>」按下鍵盤【Enter】

此時在程式碼區間，可以找到兩處有「<data:post.body/>」的程式碼片段。

2-1「行動版」範本的文章內頁程式代碼資料

第一處「<data:post.body/>」為「行動版」範本的文章內頁程式代碼資料，如果模板改的很亂不確定是否為手機段的區間，可以在「<data:post.body/>」上方搜尋是否有「<b:includable id='mobile-post' var='post'>」字段，整個 Blogger 模板只會有一處。如下圖：

圖：手機模板

2-2「電腦版」範本的文章內頁區塊的程式代碼資料

接著，滑鼠點一下程式碼頁框裡的「搜尋框」，再按下鍵盤上的【Enter】，可以找到另外一處「<data:post.body/>」為「電腦版」範本的文章內頁區塊的程式代碼資料。

如果模板改的很亂不確定是否為「電腦版範本」的區間，可以在「<data:post.body/>」上方搜尋是否有「<b:includable id='post' var='post'>」字段，整個 Blogger 模板只會有一處。如下圖：

圖片：電腦模板

Step 3

文章內頁加入社群分享按鈕程式碼

找到要置入按鈕代碼的位置後，接下來就可以開始加入按鈕代碼了。我們先從「行動版」範本的文章內頁開始安裝。

3-1安裝「行動版網頁」分享按鈕在文章內頁

更換以下代碼至「Step2-1」中 ( 圖：手機模板 ) 包含有「<data:post.body/>」字段，第二個綠色大框框裡面的整個區段


<!-- 行動版網站文章上方分享按鈕開始 -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='mobile-share-box'>
<span class='post_social'>
<!-- Facebook -->
<div class='fb-like' data-action='recommend' data-colorscheme='light' data-layout='button_count' data-send='false' data-show-faces='false'/>
<!-- Google+ -->
<div class='g-plus-1'><div class='g-plus' data-action='share' data-annotation='bubble'/></div>
<!-- twitter -->
<a class='twitter-share-button' data-lang='zh' href='https://twitter.com/intent/tweet'>Tweet</a>
</span>
</div>
</b:if>
<!-- 行動版網站文章上方分享按鈕結束 -->
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
<!-- 行動版網站文章下方分享按鈕開始 -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='mobile-share-box'>
<span class='post_social'>
<!-- Facebook -->
<div class='fb-like' data-action='recommend' data-colorscheme='light' data-layout='button_count' data-send='false' data-show-faces='false'/>
<!-- Google+ -->
<div class='g-plus-1'><div class='g-plus' data-action='share' data-annotation='bubble'/></div>
<!-- twitter -->
<a class='twitter-share-button' data-lang='zh' href='https://twitter.com/intent/tweet'>Tweet</a>
<!-- line -->
<div class='line-it-button' style='display: none;' data-type='share-a' data-lang='zh-Hant' ></div>
</span>
</div>
</b:if>
<!-- 行動版網站文章下方分享按鈕結束 -->

(* 這一步，我們要在行動版網頁的文章內頁，文章內容的最上方和最下方安裝分享按鈕。)

到這裡，我們就在「行動版網站」文章內頁的上方和下方部署完成分享按鈕了。接著，用手機前往自己 Blogger 的「行動版網站」，就可以看到文章內頁已顯示分享按鈕了。

(* 如果要使用電腦前往自己網站的「行動版網頁」，在網站首頁網址後方加上『?m=1』就可以即時顯示「行動版網頁」。)

3-2安裝「電腦版網頁」分享按鈕在文章內頁

接下來可以著手安裝「電腦版網頁」的分享按鈕了。在【Step2-2】裡 ( 圖：電腦模板 ) 中的「<data:post.body/>」字段上方(* 【Step2-2】橘色框框 )，我們置入『電腦版網站文章上方分享按鈕』的程式碼。


<!-- 電腦版網站文章上方分享按鈕開始 -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-box'>
<span class='post_social'>
<!-- Facebook -->
<div class='fb-like' data-action='recommend' data-colorscheme='light' data-layout='button_count' data-send='false' data-show-faces='false'/>
<!-- Google+ -->
<div class='g-plus-1'><div class='g-plus' data-action='share' data-annotation='bubble'/></div>
<!-- twitter -->
<a class='twitter-share-button' data-lang='zh' href='https://twitter.com/intent/tweet'>Tweet</a>
</span>
</div>
</b:if>
<!-- 電腦版網站文章上方分享按鈕結束 -->

(* 這一步，我們要在「電腦版網頁」文章內頁，文章內容的最上方安裝分享按鈕。)

接著在【Step2-2】裡 ( 圖：電腦模板 ) 的「<data:post.body/>」字段下方不遠處可以看到「<b:if cond='data:post.hasJumpLink'>」字段，再往下可以找到「<div class='post-footer'>」字段
我們將『電腦版網頁內文下部分享按鈕』放在「<div class='post-footer'>」的上面 (* 【Step2-2】藍色框框 )。


<!-- 電腦版網站文章下方分享按鈕開始 -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-box'>
<span class='post_social'>
<!-- Facebook -->
<div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false'/>
<!-- Google+ -->
<div class='g-plus-1'><div class='g-plus' data-action='share' data-annotation='vertical-bubble'/></div>
<!-- twitter -->
<a class='twitter-share-button' data-count='vertical' data-lang='zh' href='https://twitter.com/intent/tweet'>Tweet</a>
</span>
</div>
</b:if>
<!-- 電腦版網站文章下方結束 -->

(* 這一步，我們要在「電腦版網頁」文章內頁，文章內容的最下方安裝分享按鈕。)

在按下儲存範本後，前往 Blogger 前台的文章內頁，就可以看到「電腦版網頁」的按鈕成功安裝完成了！

Step 4

部署分享按鈕「JS、CSS」

4-1部署分享按鈕「JS」

我們在「STEP 3」完成的分享按鈕代碼，還需要呼叫「FB、G+ 、Twitter、LINE」官方打包好的函式庫，這樣我們安裝的分享按鈕才會開始作動。

接著在範本中搜尋「</body>」，將以下資源放置在「</body>」的上方。


<!-- 文章分享按鈕 FB G+ Twitter LINE 調用 js -->
<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.8&appId=705978772813024";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
  window.___gcfg = {lang: 'zh-TW'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));
//]]>
</script>
<script src='//scdn.line-apps.com/n/line_it/thirdparty/loader.min.js' async='async' defer='defer' type='text/javascript'/>
<!-- 文章分享按鈕 FB G+ Twitter LINE 調用 js -->

4-2部署分享按鈕「JS、CSS」

由於我們在「STEP 3」分享按鈕，在高度上可能會不一致，所以我們可以加入一小段「CSS」，來調整按鈕的整體高度，這樣畫面看起來較為美觀。接著可以搜尋範本中的「]]></b:skin>」，在「]]></b:skin>」的上方加入以下代碼，即可完成分享按鈕「CSS」的部署。


.share-box,.mobile-share-box {width:100%; height:auto; margin-left:0px; margin-bottom:30px; margin-top:10px; position:relative; text-align: left;}
.post_social {display: inline-flex;margin:0 0 0 10px;}
.fb-like,.fb-share-button,.g-plus-1,.twitter-share-button,.line-it-button {margin:0 0 0 10px;}

或是可以搜尋範本中的「</head>」，在「</head>」的上方加入以下代碼，即可完成分享按鈕的「CSS」部署。


<style type='text/css'>
.share-box,.mobile-share-box {width:100%; height:auto; margin-left:0px; margin-bottom:30px; margin-top:10px; position:relative; text-align: left;}
.post_social {display: inline-flex;margin:0 0 0 10px;}
.fb-like,.fb-share-button,.g-plus-1,.twitter-share-button,.line-it-button {margin:0 0 0 10px;}
</style>

(* 以上兩種 CSS 部署方式，選其中一種使用即可。)

FB、G+、Twitter、LINE 官方分享按鈕的其他尺寸

如果想要更換分享按鈕的尺寸，可以參考 FB、G+、Twitter、LINE 官方網站的按鈕設置頁。

Facebook 官方：FB 分享按鈕

G+ 官方：G+分享按鈕

Twitter 官方：Tweet 官方分享按鈕

LINE 官方：使用 LINE 傳送

技巧小貼士：

本文應用到的「<data:post.body/>」為純文章內文資料的部份。
(* 不包含「文章標題、日期、張貼者、意見、標籤」及「留言版」的區域。)

我們在安裝「社群分享按鈕」時，使用「<b:if>」判斷式「頁面類型data:blog.pageType」應用「文章頁面== "item"」，讓「社群分享按鈕」只在文章頁面出現。

「<b:includable id='mobile-post' var='post'>」為「手機模板 ( 行動版範本 )」的主要文章內容區塊。
「<b:includable id='post' var='post'>」為「電腦模板 ( 電腦版範本 )」的主要文章內容區塊。

小結

更動到 HTML 模板 ( 範本 ) 的地方很多，請一定要備份 Blogger 模板後再做更改的動作。動手做的同時，若有疑問或卡住，也歡迎反饋喲！

搜尋此網誌

技研可樂