Blogger 自訂網址套用 Cloudflare HTTPS 之後問題總整理 ( 持續更新 )

Blogger 自訂網址，在使用 CloudFlare Flexible HTTPS 後，有幾個 Blogger 系統中無法自行變更設定的事項，與已經解決的問題，這邊做個總整理。日後如果發現新的問題，也一併在這裡補充說明，以便利記錄與往後的查閱。

Blogger 啟用 Cloudflare HTTPS 資料總整理

一、Blogger 處理 HTTPS 網頁的「混合性內容」

首先，在「Blogger 自訂網址 CloudFlare Flexible SSL 設定 HTTPS」中已經解決的「混合性內容」問題，有「icon、導覽列、範本與小工具外連網址、留言板、文章圖片與 js 導縮圖」。

不好處理的 js 導文章縮圖、導覽列、留言板

文章圖片與 js 導縮圖的部份在上方「連結」已做說明。導覽列部份則會因自動生出 http 的 icon 檔，而須將它註釋掉。目前比較麻煩的是使用 Blogger 簡介留言者的留言板問題。

(16/07/22)文章更新：
寫文章時，頁面切回「撰寫」模式時圖片「https」的『s』會被吃掉，以及 Blogger 原生留言板「Blogger 簡介」作者頭像的 https 連線問題。這個兩個問題 Blogger 系統已解決。(* 文章圖片、留言板作者頭像，系統已自動幫圖片改為 HTTPS 連線。)

導覽列 - ico 檔 ( 混合性內容 )

導覽列的部份在註釋掉之後，在網誌的源代碼中，發現系統會將「http」網址的「ico」網誌 icon 也註釋掉。由於 Blogger 系統網址走向的問題，無法自行變更「導覽列的部份」，目前只能註釋掉，將「混合性內容」的部份除去。

留言板 - 使用 Blogger 簡介的作者 ( 混合性內容 )

留言板的部份，如果不是在 Blogger 直接使用或安裝 G+、FB、Disqus 留言板系統，在 Blogger 預設的留言板上，若有使用 Blogger 簡介的訪客留言，留言者的頭像輸出網址預設 Url 為「http」，會有「混合性內容」的問題。

二、應對 HTTPS 的 Blogger 範本調整事項

由於 Blogger 目前對「自訂網址」網誌，還沒開放 data code 相關網址的 HTTPS URL 對應資料；所以，內部 data URL 我們必須自行處理。在網誌中，應用到很多頁面的「data:blog.url」，可以暫時使用「data:post.link」代替。

使用 https 後「data:blog.url」- 預設網址格式為 http

很多一勞永逸的網址對應，都可以使用「data:blog.url」解決，網址判斷式、FB og meta、分享按鈕 . . .。在 Blogger 自訂網址套用 Cloudflare HTTPS 後，由於「data:blog.url」還是走「http」的網址格式，在「data:blog.url」還不會自動轉接到「HTTPS」前，可以暫時使用「data:post.link」代替。

使用 https 後「data:post.link」- 預設網址格式為 https

在「Blogger 啟用 https 之後，建立網址 canonical 首選版本」，已經對「data:post.link」的使用方式做了說明。不過，「data:post.link」在應用時還是有些許限制，在配合 「首頁 https 網址」的情況下，可以運用到的頁面有，首頁、文章頁面與靜態頁面。

三、Blogger 後台與其他

Blogger 自訂網址套用 Cloudflare HTTPS 之後，首當其衝的是「G+ 1」文章分享計數。由於網址已經改為「HTTPS」，所以在後台的「發表文章 〉全部」中，每篇文章的「http 網址 G+ 1」分享計數，會慢慢歸零。(* 網誌頁面的「G+ 1」文章分享計數也會歸零。 )

分享按鈕

G+ 分享按鈕

另外，在 Blogger 安裝「G+ 1」分享按鈕則建議使用，Blogger 範本特製的版本。Blogger 範本預設的「G+ 1」代碼，能在電腦版與行動版網頁 ( /?m=1 ) 同時計數。

例如以下代碼：

<b:if cond='data:top.showPlusOne'><div class='goog-inline-block google-plus-share-container'><data:post.googlePlusShareTag/></div></b:if>

如果使用「Google+ Platform for Web」提供的「G+ 1」分享按鈕，則在「發表文章 〉全部」中會有「G+ 1」計數錯亂的情形。「G+ 1」會各別在電腦版與行動版網頁同時計數。

由於混合了「http://www.example.com、https://www.example.com、http://www.example.com/?m=1 /?m=0、https://www.example.com/?m=1 /?m=0」各類型網址，所以「G+ 1」按鈕在設置時建議可以使用，Blogger 範本特製的版本。

在做 G+ 分享時，https 網址分享文章，文章的描述會無法正確指向。解決辦法是，是用 http 網址分享，G+ 即可正確抓取文章描述。

「FB 讚」分享按鈕

FB 分享按鈕不會有「HTTPS」網址無法對應的問題。例如觀察站內最多人按讚的「保卜的邊走邊彈吉他樂譜書」目前按讚數為 46 個，與沒套用「HTTPS」之前並無不同。

使用「官方的FB 分享按鈕」在電腦版與行動版網頁，即使不設置「data:blog.url」也能對應，不過「Blogger 行動版 ( /?m=1 )」網頁，須要按過一次讚後，讚的疊加才會同步計數。

第三方分享按鈕

在開啟「HTTPS」之後試著使用「Shareaholic」分享按鈕，會發現無法對應「G+ 1」計數，「FB 讚、Tweet」則無影響。「shareaholic」預設 Code 的抓取網址為「data:blog.url」，這也可能是「G+ 1」計數無法顯示的原因。當然，還有「shareaholic」後台的網址對應也須著墨。

自訂重新導向網址

Blogger 路徑「設定 〉搜尋偏好設定 〉錯誤與重新導向」中的『自訂重新導向網址』會不能使用。

而且，只要更動過「自訂重新導向網址」。上方路徑「設定 〉搜尋偏好設定 〉中繼標記」中的『詳細介紹』，就會被自動取消使用「詳細介紹」。

Google Analytics

Google Analytics  在開啟「HTTPS」之後於 Blogger 代碼中有些小變化。Blogger 的預設 Code 為「<b:include data='blog' name='google-analytics'/>」。

使用「HTTPS」之後，Blogger 會自動將 Google Analytics 切換到「ssl.google-analytics.com」。

注意事項：
** 本文，Blogger 系統已解決的問題，已使用刪除線劃註 **

相關文章

[教學] Blogger 自訂網址套用 CloudFlare Flexible SSL 設定全流程

[教學] Cloudflare 啟用 Authy 兩步驟驗證登入設定

[教學] 註冊申請 CloudFlare CDN 網址綁定 DNS 設定

Blogger 自訂網址使用 CloudFlare Flexible SSL 設定 HTTPS