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

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

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

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


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

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



相關連結

範例網址:行動版網頁「DEMO

範例網址:電腦版網頁「DEMO



設定流程

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

設置前準備

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



設定教學

Step 1

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

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



Step 2

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

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

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



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

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



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



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

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

Blogger 電腦版行動版文章中安裝社群分享按鈕_201
圖:手機模板



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

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

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

Blogger 電腦版行動版文章中安裝社群分享按鈕_202
圖片:電腦模板



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 的「行動版網站」,就可以看到文章內頁已顯示分享按鈕了。

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

(* 如果要使用電腦前往自己網站的「行動版網頁」,在網站首頁網址後方加上『?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 前台的文章內頁,就可以看到「電腦版網頁」的按鈕成功安裝完成了!

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



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」應用「文章頁面== &quot;item&quot;」,讓「社群分享按鈕」只在文章頁面出現。

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



小結

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



行動範本相關文章

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

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

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

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

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


留言

繼續閱讀:

這個網誌中的熱門文章

[教學] LINE 電腦版行動條碼登入設定

[外掛] Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器

[教學] 使用 PuTTYgen 產生 SSH 連線 RSA、DSA 公鑰與私鑰

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

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

[教學] Google Compute Engine ( GCE ) 使用 PuTTY SSH 登入實例

[教學] Blogger 自訂網址綁定自有域名

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例

[密技] Windows OneDrive Dropbox 移至 SD 卡,讓 SSD 使用壽命更長久

[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰