[unboxing][hrads]

熱門標籤

☆重要訊息:Blogger 官方近期推出的「RWD 自適應範本主題」沒有『行動服務』的設定選項,如果您是觀察「技研可樂」裡的文章做自己網站的設計,使用「自適應範本主題」的使用者可以直接依「技研可樂」文章裡的『電腦版』方式做設定即可完成佈置,不需要開啟『行動服務』。☆

  Blogger 自訂網址應用 CloudFlare HTTPS 系列文章:「CloudFlare

  Blogger HTTPS 相關文章列表:「HTTPS

  Blogger AdSense 廣告放置與相關自適應廣告佈屬文章列表:「AdSense

  Blogger 常用頁面判斷式用法一列表:「Blogger 常用頁面判斷式用法一覽表

好消息 Google Blogspot 開始支援 SSL,Blogger 設定 HTTPS 的方法

Blogger 官方網站「Blogger Buzz」在 9 月 30 日,發佈了 Google Blogspot 對 HTTPS 的更新部署。一直在推廣的「HTTPS 無所不在」任務,終於也輪到 Blogger 身上了。

好消息 Google Blogspot 開始支援 HTTPS,Blogger 設定 SSL 的方法_001


官方提出的 HTTPS 初次版本,可能不適合所有的 Blogger 使用者,不過想提前嘗試的朋友,可以選擇從現在開始加入試用行列。而安排的第一版 HTTPS 更新,目前是還無法支援 Blogger 自訂網址用戶的。

好消息 Google Blogspot 開始支援 HTTPS,Blogger 設定 SSL 的方法_002


9 月 30 日,這一版的 HTTPS 更新,在 Blogger ( Google Blogspot ) 平台上開啟 HTTPS 的方式相當便利,於 Blogger 後台的「設置 〉基本」中,找到「HTTPS 設定」並將「HTTPS 可用性」選擇『是』,即可讓訪客經由 SSL 安全連線到自己的 Blogger 網誌。

好消息 Google Blogspot 開始支援 HTTPS,Blogger 設定 SSL 的方法_003


開啟 HTTPS 後,現況的連線機制是「HTTP」與「HTTPS」並存,兩種連線模式皆可使用。不過,在不同的範本、模板中,可能會有小工具或外掛無法工作的情形!有一些是可以自己解決的連線問題,有一些則可能是錯誤的混合性內容

例如,需要使用 feed 導引的相關文章、最新文章、最新留言、隨機文章...等,Blogspot 啟用 HTTPS 連線時,預設圖片輸出為「<img src="//image.jpg"/>」類型。上列,這幾類都牽涉到縮圖的導出,所以可能有圖片無法顯示的問題。



(* 2017/01/20 ) 文章更新:
目前 Blogger 新創網誌的用戶,已可直接使用 HTTPS 連線。唯獨範本或文章中不可放入非 HTTPS 的連結。



嘗試使用 HTTPS 後,有一些特點和 HTTP 有不一樣的小區別,這邊做個記錄:

首先,HTML 範本開啟時,會有紅字的 HTTP 與 HTTPS 的提醒敘述。在 HTTPS 開啟後,HTML 中所有的外連檔案都要做處理,不然會出現讓網址列的綠色「https」圖章,轉為橘色三角錐的警示。

外連檔案的設定,可以參考「這裡」的「Step 3-3.」所有 HTML 範本、版面配置頁小工具外連 ( .js、.css、.jpg、.png、.gif、a link ) 文本設置變更。

好消息 Google Blogspot 開始支援 HTTPS,Blogger 設定 SSL 的方法_004



接著在寫文章時,圖片如果是直接從 Blogger 上傳到網路;那麼,系統會將圖片自動以「<img src="//2.bg.blogspot.com/image.jpg"/>」類型顯示 ( source code 中顯示 )。不用擔心,文章圖片顯示會出現與 https 無法對應的問題。

(* 如下圖,我們也可以直接將圖片網址更改為 //image.jpg 格式儲存;不過,文章中第一張圖片,需使用「https」格式,使用「//」可能有機率讓 feed 導縮圖的相關外掛圖片無法顯示。)

好消息 Google Blogspot 開始支援 HTTPS,Blogger 設定 SSL 的方法_005



另外,也測試了留言版頭像,使用 Blogger 簡介當做作者資訊的使用者,在留言版作者頭像的部份,系統也是自動的將圖片以「<img src="//2.bg.blogspot.com/image.jpg"/>」類型顯示,不用擔心 https 的對應問題。



接下來,這裡可以看到,行動版網頁的網址,也能夠自動對應不需要做調整。

好消息 Google Blogspot 開始支援 HTTPS,Blogger 設定 SSL 的方法_006



再來觀察「source code」源代碼。在我們開啟 Blogger 上頭的 HTTPS 功能後,「source code」會自動添加「HTTPS」屬性的資料,不需自己做設定。

好消息 Google Blogspot 開始支援 HTTPS,Blogger 設定 SSL 的方法_007

不過,也能觀察到「<link href='' rel='canonical'/>」無法走 HTTPS;原始 code 應該是「<link expr:href='data:blog.url' rel='canonical'/> 或 <link expr:href='data:blog.canonicalUrl' rel='canonical'/>」,由於沒有 https 的 data 腳本,所以即使應用 if 判斷式,最多也只能讓首頁設定具有「rel='canonical'」(* 已解決 )。



補充:在選用 https 之後,http 網址不會自動跳轉到 https 頁面,可以在 HTML 範本中「<head> 下方的 b:skin 之前加入」下列代碼,頁面網址即可自動跳轉到 https 上頭。如果曾安裝過 jQuery 則無需重複安裝。 (* 系統已解決)


<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type="text/javascript"> 
//<![CDATA[
$(function () {
    if (location.href.indexOf("https://") == -1) {
        location.href = location.href.replace("http://", "https://");
    }
});
//]]> 
</script>



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



小結

如果,Blogspot HTTPS 在操作設定上有問題,或是想得到更多 Blogger 介紹資源,可經由幫助中心獲得相關信息。由於初版的 HTTPS 還有需要改進的地方,若發現缺點或功能上的問題,也可以透過 Blogger 幫助論壇,反饋意見。



相關文章

Blogger 使用 SSL HTTPS ? Cloudflare TLS 初體驗!

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

Blogger 啟用 HTTPS 之後,建立網址 canonical 首選版本

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

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



分享

共有 11 則留言

留言迴響
Wayne Fu
管理員
10/01/2015 10:01 AM ×

一早就看到後台多了 https 選項,果然官方發佈了更新的消息。目前要改的地方實在太多,也許官方會逐步修正,直到不用更改吧?(或少量更改)

只不過 blogger 使用 SSL 加密的實際用途為何,一直不太清楚,不加密也不會怎麼樣,是嗎?
部落格寫的所有東西,本來就是公開的~@@"

回覆
avatar
coke tech
管理員
10/01/2015 7:05 PM ×

新創的 blogspot 網誌,直接開啟 https 功能,可以直接使用,不會有對應上的問題。

會出現問題的部份,主要為文章圖片;https 啟用後,圖片連結會直接轉移至「img src='//image.jpg'」。如果是 blogspot 舊用戶,原本的「img src='http://image.jpg'」圖片也會以「img src='//image.jpg'」顯示,以符合 https 連線。

那這樣可能有機率會造成,有使用 jQuery 外掛 feed 導縮圖的 blogspot 網誌,圖片無法顯示。解決辦法是,文章的第一張圖片將它變更為「img src='https://image.jpg'」格式;但是,在「撰寫」與「HTML」模式互相切換後,「https」的『s』會被系統吃掉,所以只要在「HTML」模式下儲存並發佈文章,就不會有問題了。(* bug 1:「https」的『s』會被系統吃掉。)

如果,Blogger 系統預設在 https 開啟後,文章圖片的連結皆轉換為「img src='https://image.jpg'」,那麼在 feed 導縮圖方面就不會有問題了。

另一點就是,「<link href=' ' rel='canonical'/>」定義網頁的首選版本 ( 或是永久 301 導向 )。在開啟 https 功能後,Blogger 系統會自動在「<b:include data='blog' name='all-head-content'/>」中,更替相關的 http 連結到 https,例如本文的「source code」那張圖的「<link href=' ' rel='canonical'/>」,就是「<b:include data='blog' name='all-head-content'/>」當中的內容物。

(* Blogspot 使用者 HTML 範本當中的代碼,Blogger 官方不可能隨意更動它。所以官方能更動到的部份,大都為制式的 code,而 HTML 範本中的對外連結,我們就要自行處理了。)

但是,目前在開啟 https 後,預設首選網頁版本,系統還是使用 http 版本。如果,在 Google Webmaster 中加入了「https」的網誌 sitemap.xml,也有一定的機率有可能導致連結混亂;在搜尋時顯示的連結,可能有重複標題出現的產生。(* 目前還在實驗,是否會重複出現標題。)

以上「文章圖片 https」及「首選網址 rel='canonical'」兩者,是目前觀察後,覺得 Blogger 系統可以做加強改進的地方。



Blogger 使用 SSL,除了提升排名外;如果,是在公用 wifi 的使用情境下,若有訪客到訪自己的網誌,使用聯絡表單饋送問題,那麼有 SSL 連線當做防護,也就相對安全,饋送的資料即使被竊聽,也有加密保護。

另外,FB 的應用程式開發人員註冊,在申請後,一些功能設定也需要網誌的 https 網址,blogspot 有了 https 機制,可以較方便的測試運用 FB 應用程式。

回覆
avatar
Wayne Fu
管理員
10/02/2015 6:00 AM ×

感謝 coke 的測試,真的很詳細:

1. 外掛的部分,如果是我寫的,將來有改版再慢慢針對 https 修正 → 目前測試發現, 外掛的 http 圖片還是可顯示, 只不過會變成 mixed content, 至少不會顯示異常, 我也不清楚什麼情況下圖片不會顯示

2. 圖片網址,原來 "撰寫" 模式與 "html" 模式切換後,https 會被吃掉,看來 Blogger 得看 coke 這篇,要改的地方太多了....

3. feed: 不曉得這部分困不困難, 官方對於圖片一律儲存格式為 //xxx.jpg 就好了 → 至少我發現 comment feed 的頭像都是這樣

4. 範本: 看來 Blogger 還有一番需要大改~~~

5. 聯絡表單: 我沒想到這一項,這的確是一個跟資安有關的工具,可以幫 https 加分!

6. FB: 原來如此,感謝 coke 分享經驗~~

回覆
avatar
Hexie Zuo
管理員
10/02/2015 4:42 PM ×

現在我開啟了,但問題是在google搜索引擎過去的,默認還是http必須要我手動加個httpS上去,能不能默認就讓它跳轉到https裡面去?

回覆
avatar
coke tech
管理員
10/02/2015 5:54 PM ×

呀!這也是當初發現,使用 https 時出現的問題;感覺上,Blogger 系統可以在「https」旁邊,加上一個「是否自動跳轉至『https』」的打勾選項,以增加使用者體驗。

可以試著在「<head> 下方的 b:skin 之前加入」下列代碼,儲存範本後,http 網址即會自動跳轉到 https。
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
//<![CDATA[
$(function () {
if (location.href.indexOf("https://") == -1) {
location.href = location.href.replace("http://", "https://");
}
});
//]]>
</script>


如果已安裝過 jQuery 則無需重複安裝。

回覆
avatar
coke tech
管理員
10/02/2015 6:01 PM ×

剛做了測試,feed 導縮圖的部份,blogspot 選用 https 的使用者不會有顯示上的問題。

使用自訂網址,套用 CloudFlare Flexible SSL 時,feed 導縮圖才有影響。文章會重新做修改。

回覆
avatar
Aaron Allston
管理員
11/20/2015 1:56 AM ×

What is SSL?is this important to have it when u order web hosting?
level 3 cdn

回覆
avatar
Jhon Marshal
管理員
1/08/2016 5:11 AM ×

I am really very agree with your qualities it is very helpful for look like home. Thanks so much for info and keep it up.
software manager linux

回覆
avatar
Jhon Marshal
管理員
1/11/2016 8:04 PM ×

I visited your blog for the first time and just been your fan. I Will be back often to check up on new stuff you post!
Best VPN Provider

回覆
avatar
Amery Barry
管理員
1/13/2016 8:54 PM ×

Post is very informative,It helped me with great information so I really believe you will do much better in the future.
vpn security

回覆
avatar
Jhon Marshal
管理員
4/09/2016 6:30 PM ×

Your Post is very useful, I am truly happy to post my note on this blog . It helped me with ocean of awareness so I really consider you will do much better in the future.
خرید آنلاین فیلتر شکن

回覆
avatar

加入代碼加入代碼

若您在閱覽文章時,於文章頁面找不到相關的應用主題,歡迎移駕到『站內留言』一起研究討論,謝謝!

使用超連結:<a href="https://www.techcoke.com/">技研可樂</a> =『技研可樂

加入圖片 ( https ):支援 HTTPS 網址型式的 .jpg .png 格式圖檔,直接貼入 HTTPS 圖片網址即可在留言時顯示!

支援非嵌入 Youtube 視頻:https://www.youtube.com/watch?v=hdfSISI24Xk (* 瀏覽器網址列中的 Youtube 網址 )

&&amp;'&#039;"&quot;<&lt;>&gt;
技研可樂 © 2013 - 2017

Contact Form

Name

Email *

Message *