讓 Gmail 能插入 HTML 語法，方便行銷推廣﹍Chrome 套件

Image may be NSFW.
Clik here to view.最近想在 Gmail 中放 FB 提供的官方小工具語法，才發現翻遍 Gmail 設定也找不到能切換成 HTML 編輯模式的方法。

我相信這算是 Google 的安全機制，減少郵件中被植入惡意程式碼的機會，例如插入 script。

但如果只是單純的 HTML 語法其實沒有危險性，那麼就整理一下這件事 Gmail 可以怎麼做，並提供範例。

一、Chrome 外掛 HTML Inserter for Gmail™

1. 安裝套件

測試了幾個 Chrome 外掛，做得比較有水準、評價比較高的，還會提供各式 Gmail 郵件範本可挑選，只是多半會要求建立帳號，流程比較麻煩。

由於我只需要插入 HTML 語法，不需任何複雜的功能，所以最後選擇了這個操作簡單的套件，以下是安裝網址：

• HTML Inserter for Gmail™

2. 操作方式

Image may be NSFW.
Clik here to view.

安裝完套件之後，只要 Gmail 開啟新郵件，上圖紅框處會出現外掛小圖示，點擊後會出現 HTML 編輯視窗。


Image may be NSFW.
Clik here to view.

左側可輸入 HTML 語法，右側會即時顯示語法效果。

上圖範例可看到簡單的圖片 IMG、超連結 A 標籤語法，操作方式依照圖中 A~C：

• A. Save As Template：存成 HTML 語法範本，將來可重複使用語法
• B. My Templates：叫出已儲存的 HTML 語法範本
• C. Insert HTML：立即將畫面上輸入的 HTML 語法插入目前的 Gmail 郵件中

Image may be NSFW.
Clik here to view.

插入語法後回到郵件，如上圖果然看到 HTML 語法的效果了。


3. 注意事項

有些 HTML 語法因為安全性的因素，會被 Gmail 封鎖，例如：

• script
• iframe

這個套件的星等並不高，看了一下評論發現，很多使用者發現 HTML 語法沒效果，就直接給套件 1 顆星，其實這並不是該套件的問題，所有套件都是一樣，算是背了黑鍋。

二、行銷推廣範例

例如利用郵件推廣 FB 社團，可進入社團網址，側邊欄會有個「嵌入邀請函」的按鈕，提供了推廣社團的範例程式碼，把這些 HTML 貼過來試試看：

Image may be NSFW.
Clik here to view.

效果看起來還不錯呢！這段 HTML 碼的範例如下：

<table border="0" width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
<tr style="">
<td height="28" style="line-height:28px;">&nbsp;</td>
</tr>
<tr>
<td style="">
<table border="0" width="280" cellspacing="0" cellpadding="0" style="border-collapse:separate;background-color:#ffffff;border:1px solid #dddfe2;border-radius:3px;font-family:Helvetica, Arial, sans-serif;margin:0px auto;">
<tr style="padding-bottom: 8px;">
<td style=""><img class="img" src="https://scontent.ftpe8-3.fna.fbcdn.net/v/t1.0-0/c0.0.568.296a/p526x296/48420540_1798781250251685_8087723533502775296_n.jpg?_nc_cat=111&amp;_nc_ht=scontent.ftpe8-3.fna&amp;oh=f4f9167c1487dca059fb9d1c513f5294&amp;oe=5CCDA99C" width="280" height="146" alt="" />
</td>
</tr>
<tr>
<td style="font-size:14px;font-weight:bold;padding:8px 8px 0px 8px;text-align:center;">Blogger 經營學習資源分享</td>
</tr>
<tr>
<td style="color:#90949c;font-size:12px;font-weight:normal;text-align:center;">公開社團 · 100 位成員</td>
</tr>
<tr>
<td style="padding:8px 12px 12px 12px;">
<table border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;width:100%;">
<tr>
<td style="background-color:#4267b2;border-radius:3px;text-align:center;">
<a style="color:#3b5998;text-decoration:none;cursor:pointer;width:100%;" href="https://www.facebook.com/plugins/group/join/popup/?group_id=321850135089568&amp;source=email_campaign_plugin" target="_blank" rel="noopener">
<table border="0" cellspacing="0" cellpadding="3" align="center" style="border-collapse:collapse;">
<tr>
<td style="border-bottom:3px solid #4267b2;border-top:3px solid #4267b2;color:#FFF;font-family:Helvetica, Arial, sans-serif;font-size:12px;font-weight:bold;">加入社團</td>
</tr>
</table>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="border-top:1px solid #dddfe2;font-size:12px;padding:8px 12px;">這裡提供 Google Blogger 各種經營、學習資源，請見右邊側邊欄「貼文熱門主題」，也歡迎新手提問。
<br/>
<br/>可推廣自己網站及文章，但僅限 Blogger 平台(請見「公告」相關討論串)。</td>
</tr>
</table>
</td>
</tr>
<tr style="">
<td height="28" style="line-height:28px;">&nbsp;</td>
</tr>
</table>


其實這算是 FB 用 Table 標籤整理好的版面格式，裡面的字串內容、連結、圖片網址等等，我們都可以隨意更改。

例如想要推廣 FB 粉絲團的話，更換為以下這些：

• 粉絲團封面圖
• 粉絲團名稱、人數等
• 粉絲團連結
• 粉絲團說明

就可以變成推廣粉絲團的郵件。

發揮一下創意，利用 HTML 語法就能讓行銷推廣信件更有效果。


Image may be NSFW.
Clik here to view.