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

早前在 ( 2014 / 08 ) Google 官方的網站管理員部落格，透露一則「HTTPS 搜尋排名信息」；大概的意思是，相較於其他沒有 HTTPS 加密的網站，擁有 SSL 證書的網站或部落格，在搜索排名上將會得到一個等級的提升！

而 HTTPS 排名的準則，在全球的搜索查詢中所佔的影響不到 1%，不過隨著時間的推移，Google 可能會讓擁有安全傳輸協定的網站，慢慢的提升排名順位！並鼓勵所有的網站，都能從 HTTP 切換到 HTTPS，讓每個人都能有安全的網絡空間。

隨著「時間推移」，近幾個月也觀察到，擁有 HTTPS 加密的網站相較於 HTTP 網站，文章在相同主題時，於 Google 搜尋頁面有 HTTPS 加密過的網站，在排名時都略有小幅度的爬升。

而近期使用 Cloudflare CDN 時，發現有「兩步驟驗證」能夠使用，覺得相當安心，所以就做了近一星期的 Cloudflare 與 Blogger 磨合測試。

Blogger 使用 SSL HTTPS ? Cloudflare TLS 初體驗！_001



雖然 Blogger 自訂網址用戶的後台，目前沒有 HTTPS 的設置選項。不過 Cloudflare 除了提供免費不限流量的 ( 內容傳遞網路 Content delivery network ) CDN 服務，也提供免費的 Flexible SSL HTTPS「彈性 SSL 方案」服務給用家使用。(* Cloudflare 官網的「說明」頁面。)

Flexible SSL 模式是只有訪客連線到 CloudFlare 用 SSL 加密，CloudFlare 連線到原始主機是用 443 端口但是沒有加密 ( 還是 http，只是端口是 443 )( 來源：OK 部落格 )



( 2017/01/12 ) 文章更新：
[教學] Blogger 自訂網址套用 CloudFlare Flexible SSL 設定全流程

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

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


( 2017/01/12 ) 中國防火長城審查更新：
使用 ( http://www.websitepulse.com/ ) 幫技研可樂做測試，目前只有上海被擋。

使用 ( https://zh.greatfire.org/ ) 做測試，則是直接被擋。


目前「Blogger 自訂網域」用戶，使用 CloudFlare CDN 已無法完全通過中國防火長城的審查。



( 2015/09/26 ) 文章更新：

記錄一

經 Syne Art 回報，Blogger 可以運作 SSL 之後；試著用新網址開一個 Blogger 新網誌，並將站內所有 widget 小工具與導覽列刪除，即可運行 https ( 不過需要按下 F5 重整網頁後，才會完全走 https )。

使用無痕視窗，嘗試著運行網頁，第一次還是會出現 三角錐跑半套 https 的狀態，按下鍵盤 F5 刷新頁面後，即可完全跑 https。不過每次更換站內的連結頁面後，還是要再按一次 F5 才會完全走 https。

目前觀察，與 AdSense 有關係，因為預設導覽列中除了 Google + Platform 資訊，也包含了部份 AdSense 資料。

接著，試著將全站的 ( js/jpg/png/gif ) 全清除，結果還是需要按下鍵盤 F5 刷新頁面後，才可完全跑 https。

最後，只剩一個圖檔沒處理，那就是 Blogger 網誌 icon 檔。沒錯！怎麼想也不會想到是 ico 檔的問題。在 HTML 範本中，加入「<link href='https://www.example.com/favicon.ico' rel='icon' type='image/x-icon'/>」，並刪除或注釋掉「導覽列( 隱藏的 AdSense 代碼 )」後，使用 Cloudflare 的 Flexible SSL，即可在 Blogger 中完全的跑 https 了。:)

(* 以上測試資料，是在完全乾淨的模板中測試的結果。模板中，沒有外連 jquery、css、另外安裝的分享按鈕、AdSense 代碼。)

後續，使用外連 jQuery、CSS、AdSense 的部份近期內會陸續再做測試！


記錄二

https://demo.techcoke.com/ 成功了！

jQuery 不影響

CSS 不影響

AdSense 不影響

社群按鈕 G+ FB 不影響



測試後發現 Blogger 套用 Cloudflare 的 Flexible SSL，在幾分鐘內就可以完成對應，不過會有如下圖的鎖頭三角型的警示；這個情況大致應是 Blogger 單方面沒開放相關對應資料，所以只走了半套 SSL。

Blogger 使用 SSL HTTPS ? Cloudflare TLS 初體驗！_002



為什麼這麼說，因為接下來試著使用 Cloudflare 的 Flexible SSL 開啟子網域 SSL 功能，對應《技研可樂》放網站圖示的「file.techcoke.com」，可以看到下圖是成功啟用 HTTPS 的。而 『 file.techcoke.com 目前網址是綁在 Google Site「協作平台」』中。

Blogger 使用 SSL HTTPS ? Cloudflare TLS 初體驗！_003



也就是說 Google 協作平台的「自訂網址」是能夠直接對應  Cloudflare Flexible SSL，於協作平台中並不需做任何設定，即可直接啟用 HTTPS (* 不過版型會走鐘 )。

試著直接開啟「file.techcoke.com」原本映射的 Google Site 的網址「https://sites.google.com/site/techcokecom/」；原來 Google Site 平台的網址本身就走「https//」，若將網址去除「s」去跑「http://」通道，頁面還是會自動跳轉走「https//」加密。
 
接著，觀察「協作平台」的 DNS CNAME 對應資料 ( 將協作平台對應至自己的網域 )，子域名「file」必需指向「ghs.googlehosted.com」；試著使用另一個 Blogger 原本應指向「ghs.google.com」的子域網址「demo」去指向「ghs.googlehosted.com」，沒想到能夠銜接成功！(* Blogger 子網域 CNAME 在設置時「自訂網域」操作頁面提示，應將子域名指向「ghs.google.com」)

銜接成功後，試著將「demo.techcoke.com」拿去跑「https://」，結果還是出現鎖頭三角型的警示；總結，問題就不在 CNAME 對應資料上了，應該是 Blogger 本身的問題！單方面沒開放。

這次的測試除了 Blogger 和協作平台之外，也額外的對 Tumblr 做了測試。Tumblr 則是不支援！在 Cloudflare 的 Flexible SSL 開啟子網域 SSL 功能後，試著去跑「https://」，結果會直接跳回到 Tumblr 首頁「https://www.tumblr.com/dashboard」。



小結

以上，就是這次的 Blogger 與 Cloudflare SSL 對應測試資料！忽然發現，Google 的旗下服務似乎只有 Blogger 的網頁端沒有走 SSL 傳輸通道。




除了沒辦法完全走 SSL 加密，這邊也理出幾點是對 Blogger 往後走向的小期許 :)

1. 如上，網站能使用 HTTPS 傳輸加密功能

2. 自訂網址能夠使用「裸域名」

3. 行動範本及網址能夠獨立出來
獨立出來後，也許以後能夠直接套用 jquery mobile，版型設計會方便很多

4. 文章網址能夠較為簡短
 /2015/09/blogger-ssl-cloudflare-tls.html
 /blogger-ssl-cloudflare-tls/

5. 使用瀏覽器快取功能
測試 PageSpeed Insights 時總是有下面這一段：
在靜態資源的 HTTP 標頭中設定到期日或最長使用期限，這樣可讓瀏覽器從本機磁碟載入先前下載的資源，而不透過網路載入資源。(* 完全找不到方法解決 )

6. 單篇文章能有分頁的功能

7. Blogger 文章圖片能夠自訂網址 (*自訂網址用戶適用。)
網站雖然能藉由 CDN 的方式通過中國大陸的防火長城，但圖片無解

Websitepulse
Blogger 使用 SSL HTTPS ? Cloudflare TLS 初體驗！_004

Greatfire
Blogger 使用 SSL HTTPS ? Cloudflare TLS 初體驗！_005

8. Blogger 範本的 CSS、js 檔案能夠獨立出來，以減少 HTML 大小。




相關文章

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

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

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

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

Blogger 啟用 Cloudflare HTTPS 之後問題總整理 (持續更新)


標籤：

留言

  1. Unknown9/26/2015 12:29 上午

    Blogger 使用 Cloudflare 的 Flexible SSL 是沒問題的： syneart.com

    回覆刪除
    回覆
    1. coke9/26/2015 7:57 上午

      感謝提供寶貴資料:-bd

      不過，使用行動裝置觀察您的網站，還是有一定的機率，沒法跑全套。

      另外，試著 Ctrl + U 觀摩 source code，似乎沒有使用 jquery，不知道是不是這個原因。

      再次感謝:)

      代表自已測試不夠週全，又燃起希望了 ^_^

      刪除
    2. Unknown9/26/2015 9:50 下午

      Hi, 是哪一頁沒跑全套啊 XD

      jQuery 應該沒問題唷， 坐等測試結果

      然後 F12 其實是你的好朋友， 瀏覽器會告訴你哪些是混合內容， 他擋了哪些， 這樣，

      另外 cloudflare 有說免費方案的對應是 24 hr , 所以應該等久點測

      也要記得做 301 轉址 (裡面的 page rule 功能可設定)

      感謝囉

      刪除
    3. coke9/26/2015 9:59 下午

      感謝 :) 昨晚十二點多您留完言，坐在床上用行動裝置觀看時~沒跑全套。

      早上，留完言再用行動裝置到您那測試時，已經完全ok了~

      嗯嗯 ~ 有到 page rule 設定了，成功了 ~ 感謝；試了 https 跑 jquery 也沒問題了 :D

      刪除
    4. Unknown9/26/2015 10:02 下午

      我留完言， 發現文章更新了 哈

      恭喜囉

      刪除
    5. coke9/26/2015 10:08 下午

      哈哈 ~ :D

      謝謝 ^_^

      刪除
  2. Wang Henry娛樂數位12/07/2016 4:35 下午

    哈囉! Coke你好~我又來了XD

    最近越來越有股衝動想把http變成https了，但是先看了這篇文章還是霧煞煞!

    整個的設定感覺很困難??

    (正在陸續看你的其他cloudflare的文章中，如果有問題的話也會在相關文章下留言。

    PS:總覺得我目前的網站雖然能夠正常運作、廣告效益也還不錯(再次謝謝Coke之前廣告位置的幫忙)，但感覺內部的HTML語法根本亂七八糟!哈哈哈。 (Coke應該能看的出來語法整個很混亂吧XD?有時候看其他教學文章要找語法，都會找不到...完全亂了啊!!)

    另外，回到cloudflare的話題。

    流程方面註冊帳號、設定網域對應這方面應該是最容易的??

    而困難、複雜的地方應該就包含：範本內語法、小工具的相關網址，都需要改成https。

    大概是這樣的概念嗎?

    謝謝

    回覆刪除
    回覆
    1. coke12/08/2016 3:50 上午

      嗨！

      沒錯，困難的地方，是要幫整個範本的『圖片 ( 包含瀏覽器頁籤圖示 ico )、js、所有內外連結』，做 https 變更。

      建議先開一個子域做練習；Cloudflare 綁子域應用 Flexible SSL 之後，再用 Chrome 或 Firefox 瀏覽器抓「混合性內容 ( 連結中沒 https 的部份 )」。

      不常看範本，要整理到 ok 不容易，而且 Google WebMaster 也要做設定，這樣在 Google 搜尋文章時才會看到自己網站 https 形式的網址。

      刪除
    2. Wang Henry娛樂數位12/09/2016 12:10 上午

      天啊，超級麻煩!! 不過當在blogspot.com 網域的時候卻可以直接從後台切換有或是沒有。

      同樣是網域，但為何只有blogspot才可以這樣切換?

      關鍵是在google不想開放嗎? 還是因為另外購買網域的設定跟blogspot的設定不同，所以不能在購買網域後照舊開/關此功能?

      刪除
    3. coke12/09/2016 8:22 下午

      因為 HTTPS 證書是要花錢買的。blogger.com 的使用者，都歸屬在其中。

      另外，Google 在搜尋設定的建議時，希望每個站長在網站上，都能加入 HTTPS 的瀏覽機制，以保障瀏覽者的隱私安全。

      如果 blogger 免費開放自訂網址的用戶使用 https，難保 blogger 平台上會有「內容農場、惡意程式碼」的網站在其中，Google Blogger 應該不會幫其他的網域做擔保吧？！

      Blogger 開放 Cloudflare 的 HTTPS 給用戶使用，其實已經很感恩。tumblr 的用戶，還沒辦法綁定呢!

      *不過，tumblr 能使用裸域綁網址，也是一大優勢。現在各種類型結尾的創意域名開放，使用 tumble 來架站，會方便許多。



      相較本篇文章當時的設置，現在 Blogger 套用 Cloudflare HTTPS 已經修改了很多部份，應該不用這麼麻煩 (*圖片的部份-文章圖片、作者頭像)；使用 Chrome 或 Firefox 找『混合性內容』可以很快完成，如果網站中的小工具不需要修改，也許二十分鐘內就能搞定範本的部份。


      刪除
    4. Wang Henry娛樂數位12/10/2016 12:20 上午

      謝謝回復^^

      據我所知所謂的 混和性內容 就是範本內有關網址的部分參雜了http/https兩種混搭，就"只是"這個意思對嗎?

      然後回復中有提到現在blogger有修改，這樣要改的就只有範本內的混和性內容了嗎?

      刪除
    5. coke12/10/2016 12:36 上午

      據我所知所謂的 混和性內容 就是範本內有關網址的部分參雜了http/https兩種混搭，就"只是"這個意思對嗎?

      是的


      ---


      然後回復中有提到現在blogger有修改，這樣要改的就只有範本內的混和性內容了嗎?

      對的，只要把 http 改成 HTTPS 即可；早前 Blogger 系統有對範本內的圖片啟用 HTTPS 了，大致上只要修改內外連結 (*包含 外連結圖片、js、css。)

      如果你大都安裝 WFU 的小工具，WFU 之前應該都有為小工具做過 HTTPS 優化了。

      刪除
    6. Wang Henry娛樂數位12/10/2016 12:43 上午

      恩恩，這真的需要找個時間來試試看了!! 謝謝COKE~

      刪除
  3. Wang Henry娛樂數位12/10/2016 12:46 上午

    哀呀，我忘記問一個問題~在此做個補充。

    目前我有看到GODADDY也有在賣SSL，既然我是從GODADDY購買的網域，如果先撇除付費的部分來說，

    用GODADDY的是否依然無法免除上述範本要做的變更呢?

    https://tw.godaddy.com/web-security/ssl-certificate

    回覆刪除
    回覆
    1. coke12/10/2016 5:50 上午

      Blogger 後台，沒有可以置入 SSL 證書的選項，所以買來也沒用呀 @@" ~

      就算是用 WordPress.org 自己架站的用戶，也是一樣要處理『混合性內容』的問題唷！


      Cloudflare 的 Flexible HTTPS 綁定，原理如下：


      http://www.wanghenry.com → Cloudflare → https://www.wanghenry.com → 訪客


      也就是說，從 http://www.wanghenry.com 到 Cloudflare 這一段，是走 http；Cloudflare 製造 https://www.wanghenry.com 給訪客瀏覽。


      一般從瀏覽器到 https://www.wanghenry.com 的訪客，都是讀取 Cloudflare 製造的暫存 CDN 資料，或是說 Cloudflare 生成一張給 http://www.wanghenry.com 的 HTTPS 證書。

      從 http://www.wanghenry.com 到 Cloudflare 這一段，本質上還是沒變，是走 http。


      WordPress 的站長，在設定 Cloudflare Flexible HTTPS 時應該更麻煩，還要到 Nginx 或是 Apache 中做變更。

      Blogger 站長，只要直接修改範本中的『混合性內容』即可，已經方便很多。

      刪除
    2. Wang Henry娛樂數位12/10/2016 9:24 下午

      挖，原來如此! 謝謝coke清楚的解說~

      需要找個時間試試看~

      另外請問一下，coke有提到測試之前先用 B網站 測試~

      我的問題則是~

      假設B網站是新開、甚麼版面配置(小工具)或 範本 都沒有動過，那要測試的話建議是用主要網站的範本匯入後做測試對吧? (問題1)

      那在單純匯入之下，B 網站 的版面配置會一模一樣的擺回來嗎? 印象中單純匯入好像會有點異狀?(問題2)

      謝謝~

      刪除
    3. coke12/10/2016 10:45 下午

      假設B網站是新開、甚麼版面配置(小工具)或 範本 都沒有動過，那要測試的話建議是用主要網站的範本匯入後做測試對吧? (問題1)

      對的！


      ---


      那在單純匯入之下，B 網站 的版面配置會一模一樣的擺回來嗎? 印象中單純匯入好像會有點異狀?(問題2)

      原始網頁的小工具 HTML 編號，會與新網誌的 HTML 編號不同；

      所以，會有異狀沒錯！不過，可以先將 B 網站的小工具先全部做刪除之後，再做匯入的動作。

      刪除
    4. Wang Henry娛樂數位12/11/2016 1:32 下午

      了解^^ 謝謝coke~~

      刪除
    5. coke12/20/2016 3:37 上午

      對了，最近 cloudflare 加入了新功能，可以自動改寫網站中的連結內容『從 http 直接轉 HTTPS 』，直接幫助轉「HTTPS」，解決『混合性內容』。

      在『Crypto』頁籤最下面的『Automatic HTTPS Rewrites』可以設定全網域；『Page Rules』頁籤也可以使用『Automatic HTTPS Rewrites』，應用到子域。

      我還沒試過，你可以先用測試網站試試。

      刪除
    6. Wang Henry娛樂數位12/20/2016 1:05 下午

      謝謝COKE補充唷~

      刪除
    7. coke12/20/2016 9:50 下午

      稍早，有做過實驗。

      沒辦法，Blogger 使用『Automatic HTTPS Rewrites』，「混合性內容」還是無法自動修正。最近，如果 CloudFlare 的『Automatic HTTPS Rewrites』可以成功自動修正，再跟你說。

      刪除

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

張貼留言

繼續閱讀：

這個網誌中的熱門文章

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

圖片
LINE 使用者多，用戶帳號被盜的情況也就多，防堵自己的帳號被駭，建議可以將常用的線上購物與社群相關帳號做兩步驟驗證或二階段安全憑證登入，舉凡 FB、Google、Outlook.com、Yahoo、露天、淘寶與這裡要介紹的 LINE。 LINE 除了支援行動裝置 APP 安裝外，也可下載電腦桌機版安裝登入。 電腦版 的 LINE 介面支援電子郵件與行動條碼登入，建議可以使用手機 APP 上便利的「 行動條碼登入 」，在外臨時需要或借用電腦時相當方便，也可免去電腦中毒或被安插木馬而導致帳號密碼被竊的風險。 在設定時我們會開啟 LINE APP 中的「允許自其他裝置登入」，並使用 APP 給的「行動條碼掃描器」掃描電腦版 LINE 給的 QRcode，在掃描過後即可完成登入的動作，以下就是相關的操作流程。 相關連結 LINE 官方網站：各型裝置下載連結「 http://line.me/zh-hant/download 」 LINE 問題反應表：「 https://contact.line.me/zh-hant/?XXXXXXXXXXXXXXXX 」 設置教學 開啟「行動裝置」上的 LINE APP，在「設置」頁面點擊【我的帳號】，接著勾選【允許自其他裝置登入】。 回到【上一頁】點選【個人資料】，接著選擇【行動條碼】。 這一步我們選取【行動條碼掃描器】，接著到「桌機裝置」開啟「電腦版」LINE APP 並點選【使用行動條碼登入】。 接著用開啟中的「行動條碼掃描器」掃描畫面中的 QRcode，緊接著系統 APP 會詢問是否要登入，這裡點擊【登入】。 在這邊系統提示「您已登入成功」我們按下【確定】，回到「電腦版」就可以看到成功登入 LINE 了。 小結 行動裝置不開啟「未知的來源 ( Android )」或安裝來路不明的 ROM，大致上只下載官方 APP 來使用，有官方把關使用上也較為安心。 平日每人的使用習慣不一，尤其是電腦裝置常常下載一些有的沒的程式，很容易就被藏木馬或是被駭，設置應用程式登入相較電子郵件登入還來的安全一些些。
閱讀完整內容

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

圖片
Chrome 擴充 外掛 套件： ColorPick Eyedropper 是一款 色碼 吸管 ( 點滴 ) 工具，只要開啟 Chrome 瀏覽器並點取應用程式，即可馬上 擷取 目前在 網頁 瀏覽中的 HTML 顏色代碼 ( 十六進位值色碼 ) 及 RGB 色彩，在使用上非常便利。 產品特點 使用鼠標在網頁上的任何位置選擇顏色！ 可預覽像素並縮放顏色選擇器。 使用箭頭鍵拖動預覽微調。 方便的複製查看 RGB 和 HSL 顏色值。 方便的複製查看 HEX RGB 和 HSL 顏色值（僅適用於 Windows 主機安裝版）。 轉換 RGB 到 HEX，轉換 HEX 到 RGB（僅適用於 Windows 主機安裝版）。 保留上一次選擇的歷史顏色。 軟體資訊 軟體名稱：ColorPick Eyedropper 軟體性質：Chrome 免費 ( 主機安裝版 單主機 0.99 USD ) 作業系統：Windows、Mac 官方網站： http://vidsbee.com/ColorPick/ 檔案下載： Chrome 安裝版連結 ｜ 主機安裝版官網鏈結 附註：這個 Chrome 擴充可能還沒有預期在 Mac 上。 需要權限： 讀取及變更您造訪過的網站上的所有資料 操作介紹 使用時按下 ColorPick Eyedropper  圖示，即可在網頁中的任意位置擷取色碼 預設顏色取樣有十六進位值色碼及 RGB 色碼，需查看 HSL 色碼值可點擊設置 ( 齒鑰 ) 在設定頁面即可選取 HSL 選項，另外曾經擷取過的顏色也會保留在這一頁
閱讀完整內容

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

圖片
PuTTYgen 是生成和處理 SSH 公共 ( public key ) 和私有 ( private key ) 密鑰對的工具，是一款基於 PuTTY 衍生出的工具套件。運行 PuTTYgen 可以產生 RSA 與 DSA 格式的金鑰，也可以與一些其他 SSH 客戶端的私鑰格式做交互操作 ( WinSCP、FileZilla )。 PuTTYgen 可以使用「SSH-1 ( RSA )、SSH-2 ( RSA )、SSH-2 DSA」這三種格式做輸出，預設使用 2048 bits 建立金鑰。 操作 PuTTYgen 這個工具時，除了可以產生 SSH 連線 RSA 、 DSA 公鑰 和 私鑰  ( 密鑰對 ) 外，還能加載現有 金鑰 進行簡易修編。例如幫私鑰加入密碼，變更私鑰密碼，或是變更金鑰註解 ( Key comment )。 Windows 上如果要連線到 Red Hat OpenShift 、Google Cloud Platform GCE 、Amazon EC2 等雲端平台，使用 PuTTYgen 和 PuTTY 這兩個工具搭配，能方便的建立起 SSH 的連線。 文章中使用的系統為 Windows 7，教學以此做示例操作說明。 操作流程 下載 PuTTYgen 建立 SSH「公鑰與私鑰」密鑰對 更改金鑰註解 ( Key comment ) 私鑰加上密碼，匯入現有私鑰 軟體檔案 軟體名稱：PuTTYgen 檔案連結： PuTTY Download Page 軟體許可： PuTTY Licence 功能特性：產生 SSH 連線 RSA、DSA 公鑰和私鑰密鑰對，加載現有私鑰進行簡易修編。例如：幫私鑰加入密碼，變更私鑰密碼，或是變更金鑰註解 ( Key comment )。 使用方式 下載 PuTTYgen 前往  PuTTY Download Page  頁面，點擊下載最新版本綠色區塊中的「puttygen.exe」。 Step2 建立 SSH「公鑰與私鑰」密鑰對 點擊運行並打開「puttygen.exe」之後，選擇 SSH-2 ( RSA ) 2048 bits，按下畫面中的「Generate」就能開始建立 SSH 「公鑰與私鑰」密鑰對。 當
閱讀完整內容

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

圖片
網站及部落格安裝  Line 分享按鈕 ， 語法 相容 網頁版 ( 電腦版瀏覽器 )、 行動裝置 ( 行動版 ) 或 APP ，LINE 傳送 分享文章 到 Line 好友名單的「聊天、朋友、群組、Keep」使用。 網頁安裝「LINE 分享按鈕」的方式有兩種，一種是「圖片 JavaScript 連結」，另一種是利用官方提供的「LINE 函式庫」，當然 行動版 及 App 都適用。 無論是圖片連結的方式，或是使用官方函式庫將文章分享到 LINE，都能夠正常抓取文章的「網址、圖片、標題、描述」。從行動裝置上按下我們在行動版或網頁版裡設置的 LINE 分享按鈕，也能夠正常的開啟 LINE APP 做分享文章的動作，將文章分享給好友。 本文中「LINE 分享按鈕語法」除了一般安裝方式，也加入了 Blogger 及 WordPress 部落格的設置方法，如果你的網站剛好在這兩個網誌平台，也可以參考以下的設定介紹為自己的行動版及網頁版 ( 電腦版 ) 網站做「LINE 分享按鈕」的部署。 網頁版訪客點擊 LINE 分享按鈕時的使用情境 當訪客按下分享按鈕時，會在瀏覽器上開啟一個新視窗。輸入 LINE 的帳號和密碼登入之後，就能做文章分享的動作。如下圖和上圖。 (* 訪客在瀏覽器中登入過一次資料，之後分享文章時即不用再次做登入的動作。) LINE 分享按鈕樣式 (* 可以點擊以下 LINE 分享按鈕，直接觀察訪客的使用情境。) 「用 LINE 傳送」使用「圖片 JavaScript 連結」按鈕 「用 LINE 傳送」使用「官方 LINE 函式庫」按鈕 相關連結 設置方法｜用 LINE 傳送：「 https://media.line.me/howto/zh-hant/ 」 LINE 按鈕圖片檔下載：「 https://media.line.me/img/linebutton_zh-hant.zip 」 設置流程 LINE 按鈕使用圖片 JavaScript 連結 官方 LINE 函式庫分享按鈕 WordPress 安裝 LINE 分享按鈕 Blogger 安裝 LINE 分享按鈕 開始設定 Step 1 LINE 按鈕使用圖片 JavaScript 連結
閱讀完整內容

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

圖片
Twitter ( 推特 ) 使用 雙重認證 登入時，支援「應用程式 ( 移動設備 APP )」及「 手機簡訊 」兩種 二次登入階段認證 模式，使用「應用程式」的方式登入電腦版網站時，手機端若有安裝 Twitter app 並設置登入憑證，那手機 app 中會自動跳出登入的批准訊息，點擊批准後電腦端即可直接登入。 使用「簡訊」的方式登入電腦版網站時，Twitter 會傳送 登入的憑證 代碼至我們的手機，將簡訊中的代碼填入電腦端的驗證框並按下確定，即可完成登入的動作。 Twitter 的手機簡訊 兩步驟認證 登入，在設置時較為繁複，若你一直設定不成功，不妨參考本文的設置方法，相信可以很快的完成簡訊登入請求！ 相關連結 Twitter 官方網站「 https://twitter.com/ 」 Twitter 官方網站移動版「 https://mobile.twitter.com/ 」 設置流程 手機簡訊兩步驗證登入設定 測試登入時是否有收到簡訊 移動設備 app 雙重認證設定 測試 app 中是否出現登入的批准訊息 設定教學 Step 1 手機簡訊兩步驗證登入設定 首先，使用行動智慧型裝置或在家用電腦的瀏覽器中前往 Twitter 移動版網站「 https://mobile.twitter.com/ 」並直接輸入帳號密碼進行登入動作 在登入 twitter 後，點擊【使用者】頭像並將網頁往下拉，點選【設定】 若你是使用行動智慧型裝置，可以點取【齒輪】；接著再點選【設定】 在這邊我們點擊 Phone 下方的【Add】 系統跳出的輸入框中，輸入自己的電話號碼，例:【0912XXXXXX】不需加上「+886」 上一步按下【儲存】後，系統會傳送一封六個數字的驗證碼至手機中，我們將那六個數字填入目前的輸入框中，並按下【認證】 接著，系統會提示「twitter 帳戶已確認」，表示手機已在 twitter 上激活了 手機上也能看到一封系統傳來的激活簡訊 註冊時的 Email 裡也傳來了一封手機已經加入 twitter 帳戶的郵件 接著我們登入 twitter 的電腦版網站「 https
閱讀完整內容

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

圖片
Google Compute Engine ( GCE ) 連接 VM 執行個體 ( 實例 )，可以使用官方提供的 Google Cloud Shell 和 gcloud compute 。除了 gcloud compute ，在 Windows 上也可以使用 PuTTY SSH 的方式登入 GCE 實例 ，如果你找不到方法 登入 ，不妨參考本文的連線 教學 方法。 學習在 OpenShift 、GCE、EC2 上架設 WordPress，PuTTYgen 和 PuTTY 這兩個工具會很常運用到。由於服務端架設好之後 PuTTYgen 就很少拿出來使用，趁著現在快忘記的同時，也順道從記憶裡撈資料，邊留下注記，以便往後翻閱。 在內文中，我們會先操作 PuTTYgen 建立公鑰與私鑰，將公鑰放到 GCE 後，接著再運用 PuTTY 設置 SSH 連線，然後銜接連入到 GCE 實例。以下是使用 Windows 7 操作 PuTTY 連線登入的設置流程。 設置流程 使用 PuTTYgen 建立公鑰與私鑰 登入 GCE 建立 SSH 金鑰 PuTTY 設置 SSH 連線到 GCE 實例 連線教學 Step 1 使用 PuTTYgen 建立公鑰與私鑰 先前往「 使用 PuTTYgen 產生 SSH 連線 RSA、DSA 公鑰與私鑰 」，執行到「STEP 2」完成後，接著回到這裡變更金鑰註解 ( Key comment ) 的內容。 首先，變更 Key comment。在 Key comment 日期的後面，輸入你申請 Google Cloud Platform 時「@gmail.com」前的名稱。如果申請的 gmail 為 [email protected] 就在日期後面輸入「ilovetechcoke」。 下圖的例子為「techcoke」，完整輸入就是「rsa-key-20170120techcoke」。(* 這裡的日期，會和你操作時的日期不相同，以你當前建立密鑰對的時間為準。) 變更完 Key comment 之後，將 PuTTYgen 上方 OpenSSH authorized_keys 裡面的公鑰資料先做複製，最後再按下「Save private key」，將私鑰儲存到電腦中。
閱讀完整內容

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

圖片
Blogger 可以免費 自訂網址 ，將原本的「blogspot.com」指向 自有 的 網域 ，創作自己的品牌。這邊依據經驗，分別以「頂層網域」、「子網域」及「裸 域名 的網址轉向」做說明；而在「DNS 平台」的設置部份，則以「Namecheap」做完整的步驟說明。 在 Blogger 綁網址 前，必需要有自己的 網址 才能做網址綁定的動作，也就是說必需先購買網址。在購買網址時，除了需觀察 域名 供應商是否為「 ICANN 」授權認證之外，建議也可挑選俱備「兩步驟驗證」登入的 網域 供應商做為選擇，例如：「 Namecheap 」、「 Name.com 」 設置流程 主網域 www 設定 ( www.example.com 頂層網域 ) 子網域 blog 設定 ( blog.example.com 子域名 ) 讓「裸域名」網址轉向非 www 的方法 設置教學 Step 1 主網域 www 設定 ( 頂層網域 ) 首先，登入 Blogger 後台，找到左頁框中的「設定  \ 基本」，再到右頁框中點選畫面中的【＋新增自訂網域】 在「進階設定」下方的輸入框中，「輸入自己的網址」並按下【儲存】 出現提示：「無法使用裸域名」綁定 Blogger 的訊息，並要求我們新增一個頂層網域「www」，或是子網域「blog」。這邊可以右鍵點選【設定說明】在「瀏覽器」開一新分頁，觀察一下該如何設置。 以「頂層網域」來觀察，頁面中提示需在自己的 DNS 平台中設定一個「CNAME 記錄 www 指向 ghs.google.com 」，且若需將裸域名「techcoke.com 也對應到 www.techcoke.com」的話 ( * 網址列輸入techcoke.com 會直接跳轉到 www.techcoke.com )，還需設置四筆「 A 記錄」並指向 Blogger 給的 IP 位址。 「瀏覽器」回到原分頁，試著在框格中輸入「www.techcoke.com」並按下【儲存】 此時畫面中提示： 在 CNAME 記錄中，除了需要一筆將「www 指向 ghs.google.com」的記錄，還需再增加一筆「2g7xauszfddo 指向 gv-n26b3fpfhapdu5.d
閱讀完整內容

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

圖片
Window Resizer 為 Chrome 瀏覽器的 擴充外掛 工具套件，它能幫助使用者調整 瀏覽器視窗 ，來模擬各種屏幕分辨率的寬度及高度 比例 大小，方便網站設計開發人員 調整 瀏覽器及網頁 大小 ，使網站適合在各種行動裝置上呈現，讓訪客有個良好的互動體驗。 現今的智慧型移動設備長寬比例百百款，若要特別為某種機型做特定的寬度調適，想必會很頭疼。有了 Window Resizer 也不用擔心，因為 Window Resizer 除了預建了幾組常用的屏幕響應值外，也支援「自訂義大小」供設計人員方便的幫網站佈局。 另外， Window Resizer 也貼心的內建了「快速鍵」選項供用家使用，好讓使用者能便利的快速切換定義過的長寬比例。此外，設置過的「快速鍵」和「裝置比例」也備有匯入及導出的功能，若重灌電腦或更換裝置時，也能方便的回到熟悉的配置手感。 擴充資訊 擴充名稱： Window Resizer 擴充性質：Chrome 免費 功能特性：調整瀏覽器窗口模擬各種屏幕分辨率的寬度 / 高度 附註特點：定義窗口的位置，預設圖標（手機，平板電腦，筆記本電腦，桌上型電腦），支援自訂義尺寸、快捷鍵，備有匯入及導出功能。 需要權限： 讀取及變更您造訪過的網站上的所有資料 功能設置 Presets 預設 Settings 設置 Hotkeys 快速鍵 Sync 同步備份及還原 History 歷史 操作介紹 Step 1 Presets 預設 安裝「 Window Resizer 」擴充後，點取 Chrome 工具列的【Window Resizer 圖示】，在跳出的選單中，點擊【Edit presets】或按下鍵盤的快速鍵【E】，開啟「Presets」頁籤 這裡可以看到左側有預設大小共 10 款的裝置可使用，第一個 ( 320 / 480 ) 則對應鍵盤快速鍵【1】，另外我們也可以拖拉其他比例的裝置至目前位置，以改變順位。 (* 預設裝置快速鍵為 0 ~ 9 十組供用家使用 ) 右側的 "Add new resolution 添加新的屏幕分辨率" 中，可以添加需要的裝置比例至左側的「快速鍵」選單中。 「Width x Height」選項
閱讀完整內容

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

圖片
現在筆電及平板內建的讀卡機普遍支援「 SDHC Class 10」及「UHS-1 FAT32 」格式，且市面上的記憶卡大都為終身保固。若將 Windows 內建的資料夾及較常讀寫的 OneDrive 、 Dropbox 雲端硬碟資料放置在 SD Card 上，除了可以減少 SSD 硬碟 ( 保固普遍為 3 ~ 5 年 ) 的頻繁寫入，也可增加裝置在移動上的便利性。 若你的 SD 卡槽在筆電或平板上完全沒有使用，不妨參考本篇方法，將較為頻繁寫入的任務交給 SD 卡，把它當作第二顆硬碟來使用，增加 SSD 硬碟的使用壽命。若裝置的記憶體夠大，也可將系統 Temp 及瀏覽器快取放置在 RamDisk 相互搭配來使用。 這次實作，使用的 MicroSD 卡 ( 讀/寫  45/15 MB/s ) 32G 價格約 500元左右 ( 約 128G SSD 的 1/4 價格 ) 附 SD 轉 卡 ，主要看重它的終身保固及 FAT32 格式的通用性，支援大部份電腦系統、手機、相機使用，雖然在寫入的部份沒有很快，但在平常使用時還不至讓自己覺得困擾。( 實際讀寫速度 ) ( * 目前 MicroSD 16G 級距的最高順序讀寫速度已達 95/90 MB/s ，約莫近 SATA2 7200 轉 HDD 實際物理傳輸速限的平均讀寫水準。 ) 在實作平台的部份使用 Win7，系統為 Win8 或 Win8.1 用戶也可如法泡製。因為手頭上沒有 SDXC 的卡可以測試，若你的 SD 卡容量超過 32G 為 SDXC 的 exFAT 格式，也歡迎回報在設置上是否作用成功！ 一般在筆電及平板上通常搭載一顆「 SSD 」硬碟，為了確保資料安全，平日裝置在使用時建議搭配外接「HDD」硬碟，做完整的資料存儲及備份。在移動狀態時，為免裝置因拿在手上長時間晃動，而造成系統當機或資料移失，這時就可以搭配 SD 卡來使用。 設置流程 修改 SD 卡名稱，在 C 槽建立預備資料夾 變更 SD 卡的磁碟機代號 新增一個 SD 卡磁碟機路徑 在 SD 卡安裝 OneDrive 在 SD 卡安裝 Dropbox 設置前準備 請先將原 SD 卡、OneDrive、Dropbox 中的資料做完整的備份，並搬空 SD Card 再做以下設置
閱讀完整內容

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

圖片
一般推廣網站裡的文章，我們都會在站內加入常用的社群分享按鈕，以供往來自己部落格的訪客方便存儲文章或進一步做文章分享的動作，而目前在社群分享的活動力上還是以 Facebook 最為頻繁！ 除了「Like」和「Share」按鈕，若要在網站中加入 Facebook 裡的特定社群插件，那就必須申請「Facebook APP ID」獲得開發者權限才能使用。例如 ：留言板、粉絲專頁插件、追蹤 . . . 等等。 「Facebook APP ID」在社群應用上，除了上段敘述的特定插件安裝外，我們在「APP ID」申請完成後，若有幫網站及 Facebook 做關係上的互聯，那在 Facebook 應用程式介面也可以獲得一份統計資料。也就是說，我們不一定要建立「粉絲專頁」，但一樣能夠有往來訪客的洞察報告！ 趁著最近 Facebook 應用程式 APP ID 申請 介面改款，順道將註冊流程做個 教學 記錄，這裡就以建立一個 FB 留言板的「 APP ID 」為例，過程中也會取得 APP 密鑰 。 相關連結 「 Facebook Developers 」 設定流程 申請註冊一個 Facebook APP 開發者帳戶 建立新的應用程式 APP ID、取得 APP 密鑰 網站與 Facebook 應用程式建立連結 設置前準備 準備一個 Facebook 帳號 操作教學 Step 1 申請註冊一個 Facebook APP 開發者帳戶 登入 Facebook 帳號，前往開發人員頁面「 Facebook Developers 」；在網頁上方的【My Apps】下拉選單，選擇【Register as Developr】 這裡選擇【是】，並按下【登記】 到這裡就完成 FB 的開發者帳戶的申請了；系統提示可以將 「Facebook」應用關聯至網站或應用程式，這邊點擊【完成】 應用程式介面導航，若最近有新推出的功能介紹，可以在看完介紹後可以按下【關閉】 Step 2 建立新的應用程式 APP ID、取得 APP 密鑰 申請過開發者帳戶後可以接著建立 APP ID，我們在【My Apps】下拉選單點選【Add a New App】 在跳出
閱讀完整內容