Blogger 文章分享 Twitter Card Meta 標記設定

網頁藉由標記 Twitter Card 標籤，能讓文章內容分享到 Twitter 時，顯示正確的網站網址、標題、摘要描述與圖像信息。

這邊依據 Twitter Developers 提供的「Summary Card」與「Cards Markup Tag Reference」當作設定準則，於 Blogger ( Blogspot ) 上運用頁面判斷式，為每個頁面添加 Twitter Card Meta 標記，及網頁在文章分享時所需的網址、標題、圖片、摘要描述與作者資料。

在開始動工前，若參考本文的設定方式，來幫 Blogger 網站做 Twitter Card 的佈署；建議，可與早前的「Blogger 文章標題及網誌名稱 SEO 優化」一起做設置，因為在標題的部份兩者互有作用關係。另外，前篇的「Blogger 文章分享 Facebook og Meta 標記設定」也與標題的設定有關。

Blogger 文章分享 Twitter Card Meta 標記設定_001


這篇的設置方式，與文章分享到 Facebook 時的 FB og Meta 設定方向雷同。網頁內容分享到 Twitter 時，文章頁面擷取第一張大圖，文章以外的其他頁面則擷取我們自行設定的網站 logo 圖片。

另外，Twitter Card 對於網址於分享時的劃分較沒這麼細；所以，即使不設定「twitter：url」，Blogger 在 http 與 https 網址的對應，於頁面分享到 Twitter 時也不會出現問題。

與 Facebook 的「Facebook Debugger URL」和 Google「Structured Data Testing Tool」的 SCHEMA.ORG ( GooglePlus rich snippets ) 驗證一樣；Twitter 在文章分享時也能藉由「Card validator」，校驗 Twitter Card 文章分享設定時的顯示情形。

這裡，我們就依據 Twitter Card validator 當作除錯準則，並運用 Blogger if 頁面判斷式，幫 Blogger 在做文章分享時，設定 Twitter Card Meta 標記。



相關連結

Twitter Developers：「Summary Card」

Twitter Developers：「Cards Markup Tag Reference」

Twitter Developers：「Card validator」



設置流程

  1. Blogger 模板 HTML 範本加入 Twitter Card Meta 標記
  2. Blogger 網頁分享到 Twitter 的顯示情形
  3. Twitter Card Meta 標記 Card validator 驗證方法

設置前準備

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



設定教學

Step 1

Blogger 模板 HTML 範本加入 Twitter Card Meta 標記

首先，在 HTML 範本中的「<head>」之內的「</title>」之後，加入下列代碼，即可完成設定，相關填入的參數請更改為自己的資料。(* 在下方「代碼說明：」中，可以觀察並視情況填入適當的資料。 )


<!-- Twitter Card Meta 資料開始 -->
<!-- Twitter Card 全域設定，包含摘要 -->
<meta content='https://www.techcoke.com/' name='twitter:domain'/>
<meta content='@techcoke' name='twitter:creator'/>
<meta content='@techcoke' name='twitter:site'/>
<!-- <meta expr:content='data:blog.url' name='twitter:url'/> -->

<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>

<!-- Twitter Card 圖片與標題設定 -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName + &quot;｜&quot; + data:blog.title' name='twitter:title'/>
<b:if cond='data:blog.postImageUrl'>
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
   <b:else/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'/>
</b:if>
 <b:else/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title + &quot;｜&quot; + &quot;雲端生活數位在線&quot;' name='twitter:title'/>
<meta content='summary' name='twitter:card'/>
<meta content='https://file.techcoke.com/icon/mark.png' name='twitter:image:src'/>
  <b:else/>
<meta expr:content='data:blog.pageName + &quot;｜&quot; + data:blog.title' name='twitter:title'/>
<meta content='summary' name='twitter:card'/>
<meta content='https://file.techcoke.com/icon/mark.png' name='twitter:image:src'/>
</b:if>
</b:if>
<!-- Twitter Card Meta 資料結束 -->



代碼說明：

Twitter Card 全域設定，包含摘要
在「Twitter Card 全域設定，包含摘要」中，須變更的資料有「twitter:domain、twitter:creator、twitter:site」。twitter:domain 填入網誌的網址，twitter:creator 與 twitter:site 填入 Twitter 使用者 ID 名稱。


<!-- Twitter Card 全域設定，包含摘要 -->
<meta content='http://yourname.blogspot.com/' name='twitter:domain'/> <!-- 應用到的網域 -->
<meta content='@username' name='twitter:creator'/> <!-- 內容創建者 twitter username -->
<meta content='@username' name='twitter:site'/> <!-- 自己的 twitter username 或網站名稱 -->
<!-- <meta expr:content='data:blog.url' name='twitter:url'/> 可加可不加，blog 頁面網址 -->
<b:if cond='data:blog.metaDescription'> <!-- 網頁內容的摘要描述 -->
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>



Twitter Card 圖片與標題設定
在「Twitter Card 圖片與標題設定」中，須變更的資料有第二大段下方的「twitter:title ( 說明文字 )」與兩個網誌 logo 圖片「twitter:image:src」。說明文字這部份與「Blogger 文章標題及網誌名稱 SEO 優化」有關，兩者為相呼應的。

網誌 logo 圖片的部份要留意，Twitter Summary Card 中規定「圖像的最小尺寸為 120 px 至 120 px 大小，且圖檔必須小於 1 MB。圖片若不是正方形，也將被裁剪為一個正方形的型態顯示。」


<!-- Twitter Card 圖片與標題設定 -->
<b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- 如果以下資料在文章頁面 -->
<meta expr:content='data:blog.pageName + &quot;｜&quot; + data:blog.title' name='twitter:title'/> <!-- 顯示標題：文章標題｜網站名稱 -->
<b:if cond='data:blog.postImageUrl'> <!-- 如果 blog 文章圖片網址是在以下的情況 -->
<meta content='summary_large_image' name='twitter:card'/> <!-- 使用大圖，twitter:card -->
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/> <!-- 文章縮圖圖片網址 -->
   <b:else/> <!-- 如果文章圖片，不是大圖 -->
<meta content='summary' name='twitter:card'/> <!-- 使用小圖，twitter:card -->
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'/> <!-- 文章縮圖圖片網址 -->
</b:if>
 <b:else/> <!-- 如果設定的資料內容不在文章頁面 -->
<b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- 如果以下資料在 blog 首頁 -->
<meta expr:content='data:blog.title + &quot;｜&quot; + &quot;說明文字&quot;' name='twitter:title'/> <!-- 顯示標題：網站名稱｜說明文字 -->
<meta content='summary' name='twitter:card'/> <!-- 使用小圖，twitter:card -->
<meta content='網誌的 logo 圖片網址' name='twitter:image:src'/> <!-- 顯示網誌 logo 圖片網址 -->
   <b:else/> <!-- 如果以下資料不在首頁及文章頁面 -->
<meta expr:content='data:blog.pageName + &quot;｜&quot; + data:blog.title' name='twitter:title'/> <!-- 顯示標題：頁面標題｜網站名稱 -->
<meta content='summary' name='twitter:card'/> <!-- 使用小圖，twitter:card -->
<meta content='網誌的 logo 圖片網址' name='twitter:image:src'/> <!-- 顯示網誌 logo 圖片網址 -->
</b:if>
</b:if>



Step 2

Blogger 網頁分享到 Twitter 的顯示情形

首先，文章在做 Twitter 分享時，在彈出式視窗分享頁面可以觀察到，與設置前並無不同。(* 後方出現的 Twitter @nameuser 名稱，可以從「這裡」取得設定方式。)

Blogger 文章分享 Twitter Card Meta 標記設定_201



接著在文章分享到 Twitter 後，可以點取「觀看摘要」。

Blogger 文章分享 Twitter Card Meta 標記設定_202




這裡可以觀察到，文章中的的大圖、標題、描述，皆可以正確的顯示。接著，可以觀察「Step3.」中，在網頁分享時的，首頁與靜態網址頁面的分享情形。

Blogger 文章分享 Twitter Card Meta 標記設定_203




Step 3

Twitter Card Meta 標記 Card validator 驗證方法

在 Blogger HTML 範本中完成 Twitter Card Meta 標記設定後，可以前往「Card validator」驗證標記是否能在 Twitter 正常顯示。

這裡可以觀察到在靜態網址頁，圖片 ( 小圖 logo )、標題、描述皆依照我們的設置方式而顯示。

Blogger 文章分享 Twitter Card Meta 標記設定_301




使用操作 Card validator 時，於「Card URL」填入網誌的網址，接著再按下「Preview card」。

Blogger 文章分享 Twitter Card Meta 標記設定_302




在右側的「Card preview」，就能看到網站中設定的 Twitter Card 標記了。這裡也能觀察到，首頁在分享時，圖片 ( 小圖 logo )、標題、描述也依照我們的設置方式而顯示了。

Blogger 文章分享 Twitter Card Meta 標記設定_303




相關文章

如何在 Twitter 分享按鈕加入使用者 ID 名稱連結

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

Blogger 文章分享 Facebook og meta 標記設定


標籤：

留言

  1. 匿名6/03/2016 10:03 上午

    我測試了很多位置，在本文的程式碼不作任何修改的情況下。 首頁是沒錯的，可以成功。 但是在page頁面的情況下，就產生錯誤了。 在錯誤的提示引導下，我到google搜索，twitter官方給出了一句代碼： 我把這句代碼添加在你上面的程式碼內，首頁和page頁面都可以成功了。 但是page頁面成功後的description，似乎並不是我想看到的。 我不知道這是為什麼了！ coke tech 你知道是為什麼嗎？

    回覆刪除
  2. 匿名6/03/2016 10:05 上午

    <meta content='View the album on Flickr.' name='twitter:description'/> *就是這句程式碼*

    回覆刪除
  3. 匿名6/04/2016 5:15 下午

    我找到原因是為什麼了，文章內的description沒有寫，也就是寫文章時的左側“搜索說明”這裡面必須要填寫有內容，才能正常顯示。

    回覆刪除
    回覆
    1. coke6/06/2016 4:07 上午

      最近比較忙，看到留言已經隔了一段時日，對於內文有疑問，可能需自行測試消化再運用。還好解決了 :)

      刪除
  4. AstekGlobe5/26/2017 10:48 上午

    你好, 我用你說的方法將META Tag加到自家網站上的程式碼內.
    可是 card validator時出現whitelist request failed的ERROR
    請問該如何解決呢?

    回覆刪除
    回覆
    1. coke5/26/2017 6:41 下午

      本文的設置代碼僅適用於 Blogger 架設的網站唷！

      刪除

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

張貼留言

繼續閱讀：

這個網誌中的熱門文章

[外掛] 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 選項，另外曾經擷取過的顏色也會保留在這一頁
閱讀完整內容

[教學] 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 來使用，有官方把關使用上也較為安心。 平日每人的使用習慣不一，尤其是電腦裝置常常下載一些有的沒的程式，很容易就被藏木馬或是被駭，設置應用程式登入相較電子郵件登入還來的安全一些些。
閱讀完整內容

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 連結
閱讀完整內容

[教學] 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 為 ilovetechcoke@gmail.com 就在日期後面輸入「ilovetechcoke」。 下圖的例子為「techcoke」，完整輸入就是「rsa-key-20170120techcoke」。(* 這裡的日期，會和你操作時的日期不相同，以你當前建立密鑰對的時間為準。) 變更完 Key comment 之後，將 PuTTYgen 上方 OpenSSH authorized_keys 裡面的公鑰資料先做複製，最後再按下「Save private key」，將私鑰儲存到電腦中。
閱讀完整內容

[教學] 使用 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 「公鑰與私鑰」密鑰對。 當
閱讀完整內容

[密技] 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 再做以下設置
閱讀完整內容

[教學] 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
閱讀完整內容

[教學] 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」選項
閱讀完整內容

[教學] 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】 在跳出
閱讀完整內容