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

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

Blogger 自訂網址套用 Cloudflare HTTPS 之後問題總整理_001



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」文章分享計數也會歸零。 )

Blogger 自訂網址套用 Cloudflare HTTPS 之後問題總整理_301


分享按鈕

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 自訂網址套用 Cloudflare HTTPS 之後問題總整理_302


自訂重新導向網址

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 自訂網址套用 Cloudflare HTTPS 之後問題總整理_303



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



相關文章

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

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

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

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


留言

  1. 看了這個問答集....真的很佩服你能夠把BLOGSPOT平台改成HTTPS....

    要很有耐心 + 對語法很熟悉,我光看兩篇文章頭就暈了otz

    回覆刪除
    回覆
    1. 常看範本的話,修改混合性內容,不會很麻煩。專心處理,應該兩小時左右可以完全用到好。

      麻煩的是,讓 https 型式的網址,完全在 Google 搜尋中出現。
      (↑ 讓 https 網址 Google 搜尋中出現,Google WebMaster 完整用好加測試,時程花了三個月左右。Google WebMaster 那邊,要一直等搜尋蜘蛛抓網址,試驗好幾種結果才弄到 OK >_<")

      刪除
◎ 留言板中提問「代碼」問題,可至『留言代碼轉換器』轉換代碼。

張貼留言

繼續閱讀:

這個網誌中的熱門文章

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

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

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

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

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

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

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

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

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

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