Blogger 行動版安裝社群分享按鈕

這次的設置，主要是想安裝「LINE、Google+、Facebook 及 Twitter」的社群分享按鈕，在「Blogger 行動版網頁」上，裝設的位置安排在文章頁腳作者區塊的下方。

雖然行動裝置上的社群分享源已經很完善，不過在文章尾增加一個 LINE 的分享按鈕，除了可以提醒經過的朋友可以用 LINE 分享文章之外，提供一個直接按就可以觸發分享的動作也許是更直觀方便的選擇！

若你的網站也在 Blogger ，想為自己的「行動版網站 ( 移動版 )」加入額外的「社群分享按鈕」，可以接著往下觀看以下的相關設置流程。

設定說明

大家如果用手機瀏覽自己的 Blogger 行動版網頁會發現，在文章最下方頁腳區塊預設的分享按鈕為一個土色隱藏跳出式按鈕，及一個 Google+ 數值式分享按鈕。如下圖：

完成後的狀態為，去除內建的 Google+ 按鈕，保留土色的跳出式按鈕，增加 LINE 及 Facebook 、 Google+ 、 Twitter 等數值式按鈕。如下圖：

相關連結

Line 官方網站｜用 Line 傳送「https://media.line.me/howto/zh-hant/」

範例 DEMO 頁面｜行動版網頁：「行動版」

設置流程

1. 開啟「自訂」Blogger 行動範本
2. 範本中找查需要置入分享按鈕的程式碼區段
3. 文章頁腳加入社群分享按鈕程式碼
4. 部署分享按鈕「JS、CSS」
5. 隱藏行動範本跳出式按鈕

設置前準備

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

設定教學

Step 1

開啟「自訂」Blogger 行動範本

如果想在行動版網站中添加額外的小工具、CSS、廣告或是分享按鈕，就得開啟 Blogger 行動版範本的「自訂」功能。

登入 Blogger 後，前往 Blogger 後台，「範本〉行動服務」點擊【 齒輪 】。

在跳出來的畫面中圈選，『⓪ 是，在行動裝置上顯示行動範本」〉「選擇行動範本 \ 自訂」〉【儲存】。

Step 2

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

接著點擊【範本〉編輯 HTML】。

滑鼠點一下程式碼內頁，按下鍵盤中的【Ctrl + f】 ( 按著 Ctrl 再按一下 f )。在搜尋框中輸入「data:top.showMobileShare」並按下鍵盤的【Enter】，可以看到以下程式碼區間。

<div class='post-footer-line post-footer-line-2'>
  <b:if cond='data:top.showMobileShare'>
    <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
      <a href='javascript:void(0);'><data:shareMsg/></a>
    </div>
  </b:if>
  <b:if cond='data:top.showDummy'>
    <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
  </b:if>
</div>

下圖為範本中「行動版網站」頁腳作者區塊，分享按鈕更改前的程式碼區間。

Step 3

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

接著將「STEP 2」中找到的程式碼，使用以下程式碼替換掉整個綠色框框的內容。

<div class='post-footer-line post-footer-line-2'>
  <b:if cond='data:top.showMobileShare'>
    <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
      <a href='javascript:void(0);'><data:shareMsg/></a>
    </div>
  </b:if>

<!-- 隱藏 Blogger 行動版頁腳作者區塊 G+ 分享按鈕 -->
<!-- <b:if cond='data:top.showDummy'>
       <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
     </b:if> -->
<!-- 隱藏 Blogger 行動版頁腳作者區塊 G+ 分享按鈕 -->
   
<!-- 行動版網站文章下方分享按鈕 開始 -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='mobile-share-box'>
<span class='post_footer_social'>
<!-- Facebook -->
<div class='fb-like' style='margin: 0' 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' data-lang='zh-Hant' data-type='share-a' style='display: none;'/>
</span>
</div>
</b:if>
<!-- 行動版網站文章下方分享按鈕 結束 -->
</div>

更改說明

主要先將原本的 Google+ 小圖分享按鈕隱藏注釋掉，再加入 LINE 及 Facebook、Google+、Twitter、LINE 等社群分享按鈕。

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部署分享按鈕「CSS」

由於我們在「STEP 3」設置的分享按鈕，在高度上可能會不一致，所以我們可以加入一小段「CSS」，來調整按鈕的整體高度，這樣畫面看起來較為美觀。

接著可以搜尋範本中的「]]></b:skin>」，在「]]></b:skin>」的上方加入以下代碼，即可完成分享按鈕「CSS」的部署。

html .post-footer {font-size: 80%;}
.share-box,.mobile-share-box {width:100%; height:auto; margin-left:0px; margin-bottom:30px; margin-top:10px; position:relative; text-align: left;}
.post_footer_social {display: inline-flex;}
.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'>
html .post-footer {font-size: 80%;}
.share-box,.mobile-share-box {width:100%; height:auto; margin-left:0px; margin-bottom:30px; margin-top:10px; position:relative; text-align: left;}
.post_footer_social {display: inline-flex;}
.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 傳送

Step 5

隱藏行動範本跳出式按鈕

若需將原始的土色跳出式按鈕也隱藏的話，可以將「STEP 3」要放置的程式碼，改為以下程式碼。

<div class='post-footer-line post-footer-line-2'>
<!-- 隱藏 Blogger 行動版頁腳作者區塊 G+ 及 跳出式 分享按鈕 -->
<!-- <b:if cond='data:top.showMobileShare'>
    <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
      <a href='javascript:void(0);'><data:shareMsg/></a>
    </div>
  </b:if> -->
<!-- <b:if cond='data:top.showDummy'>
       <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
     </b:if> -->
<!-- 隱藏 Blogger 行動版頁腳作者區塊 G+ 及 跳出式 分享按鈕 -->
   
<!-- 行動版網站文章下方分享按鈕 開始 -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='mobile-share-box'>
<span class='post_footer_social'>
<!-- Facebook -->
<div class='fb-like' style='margin: 0' 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' data-lang='zh-Hant' data-type='share-a' style='display: none;'/>
</span>
</div>
</b:if>
<!-- 行動版網站文章下方分享按鈕 結束 -->
</div>

此段程式碼主要是將 Blogger 原始的土色跳出式按鈕及 Google+ 分享按鈕註譯掉，直接隱藏。另外再加入 LINE 及 Twitter、Google+、Facebook 的分享按鈕。完成後就如下圖一樣囉！

小結

這篇看似簡單，mobile 及 share 程式碼區間一個一個試，花了三天才找到地方土砲完成 @@"。雖然現在換了模板用不到，不過還是將過程記錄下來了！

行動範本相關文章

LINE 分享按鈕：文章分享語法相容網頁版、行動裝置、APP

Blogger 電腦版行動版文章中加入社群分享按鈕

Blogger 電腦版行動版文章中安裝 AdSense 回應式廣告

Google 自訂搜尋嵌入 Blogger 行動版網頁

[教學] 自訂 Blogger 行動版範本與自適應設計原理