2016年4月6日

Blogger 讓讀者以 Email 訂閱最新文章﹍任何位置都能擺放, 免註冊 FeedBurner

A+
blogger-email-subscription-widget-Blogger 讓讀者以 Email 訂閱最新文章﹍任何位置都能擺放, 免設定 FeedBurner用「RSS」訂閱網站最新文章,是非常方便又強大的工具,可惜只有網路重度使用者比較知道 RSS 是什麼,一般的讀者並不熟悉 RSS、且不一定想要瞭解。

為了讓各種層次的讀者都能收到網站最新文章的通知,提供 Email 訂閱會是最簡單的方式,且操作方便、不需另外研究相關工具。

Blogger 官方提供了「透過電子郵件追蹤」這個小工具,可以放在側邊欄讓讀者訂閱網站文章。不過前陣子接到一個需求,想要把這個工具放在文章標題下方。仔細想想也是有些道理,側邊欄比較顯眼的位置可能會被其他更重要的工具搶走,例如熱門文章、搜尋框、Adsense 等等。

其實網頁能吸引讀者注意、增加訂閱率的位置還有不少,例如最上方的標頭區塊,本篇的例子文章標題附近,或是文章結束處也是很好的擺放地方。那麼以下就來看看,怎麼把這個「用 Email 訂閱」的功能搬到 Blogger 各種自訂位置,同時也會說明在 FeedBurner 如何管理「Email 訂閱」的功能。

(圖片出處: pixabay.com)


一、安裝官方工具


一般來說,網站想要提供「Email」訂閱的功能,必須先到「Feedburner」註冊、燒錄網站...等等進行不少流程,不過因為 Feedburner 早被 Google 收購,那麼自家產品 Blogger 倒是可省下這些流程,直接就能使用「Email」訂閱的功能,請按以下步驟進行:

1. 安裝「透過電子郵件追蹤」

blogger-email-subscription-widget-1-Blogger 讓讀者以 Email 訂閱最新文章﹍任何位置都能擺放, 免設定 FeedBurner

後台 → 版面配置 → 新增小工具 → 選擇「透過電子郵件追蹤」→ 填入標題並儲存即可。

接下來這個小工具可拖曳到想擺放的位置,如果沒有中意的位置可擺,那麼改用本文的安裝碼,之後將小工具移除也沒關係。


2. 取得網站 ID

blogger-email-subscription-widget-2-Blogger 讓讀者以 Email 訂閱最新文章﹍任何位置都能擺放, 免設定 FeedBurner

安裝過程的畫面如上圖,我們可以得到幾個重要資訊:

  • Blogger 會自動幫我們在 Feedburner 註冊、並燒錄網站的 RSS
  • 註冊的身份是圖中顯示的這個 Google 帳號(Gmail)
  • 燒錄的網站 RSS 網址如圖中所示,為 http://feeds.feedburner.com/WfuBlog
  • 請記下自己紅框標示的 ID 字串,如圖中的 "WfuBlog",這非常重要,之後會用到。



二、安裝程式碼


想要讓「讀者透過 Email 訂閱文章」的功能放在網站的指定位置,那麼就必須修改範本內容,最好具備基本的 HTML/CSS 技巧,並參考「Blogger 範本﹍(2) 標頭、導覽列、側邊欄、頁尾區塊的程式碼」系列文章,來瞭解程式碼應該擺放在範本中的什麼位置。

在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。


1. 安裝 CSS

請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<style>
/*email訂閱*/
#emailForm input {
font-size: 20px;
border: 1px solid #e3e3e3;
padding: 5px 10px;
height: 36px;
box-sizing: border-box
}
.emailInput {
width: 65%;
background: #fff
}
.emailSubmit {
width: 33%;
float: right;
cursor: pointer;
background: #8C2D17;
color: #fff
}
</style>

如果熟悉 CSS 的話,可自行修改參數。


2. 安裝 HTML

接著在範本(或文章)中想要顯示「Email 訂閱」功能的地方,插入以下程式碼:

<form action='http://feedburner.google.com/fb/a/mailverify' id='emailForm' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=WfuBlog", "popupwindow", "scrollbars=yes,width=550,height=520"); return true;' target='popupwindow'>
<input class='emailInput' name='email' placeholder='輸入 EMAIL' type='text'/>
<input name='uri' type='hidden' value='WfuBlog'/>
<input name='loc' type='hidden' value='zh_TW'/>
<input class='emailSubmit' type='submit' value='訂閱'/>
</form>

先別存檔,需要修改一些參數:

  • 紅色字串:請將兩處 "WfuBlog" 字串改為前面「一、安裝官方工具」→「2. 取得網站 ID」取得的 ID 字串
  • 藍色字串:輸入框及按鈕的提示字串,請修改兩處藍色字串。

存檔後,效果如同下面這個 Email 訂閱框及按鈕工具:



這個「Email 訂閱框」也是目前 WFU BLOG 擺放在側邊欄的效果,由於一併跟其他訂閱按鈕、以及「FB 粉絲團」擺放在一起,光是安裝官方「Email 訂閱」工具很難呈現這樣的效果,還是得使用本文的程式碼,搭配其他按鈕、FB 粉絲團的程式碼,才有辦法組合在同一個區塊。



三、FeedBurner 操作補充


FeedBurner 有很多設定可以修改或管理,不過基本上完全不去管這些參數的話,Email 訂閱功能也可以正常運作,不會有什麼影響。

對進階設定有興趣的讀者,網路上有很多詳細的教學,可參考「FeedBurner電子報設定教學」,有一系列完整的說明。


feedburner-email-1-Blogger 讓讀者以 Email 訂閱最新文章﹍任何位置都能擺放, 免設定 FeedBurner

這裡只簡單說明幾項跟本文主題「Email 訂閱」有關的內容,請進入「FeedBurner 官網」→「選擇網站」→「宣傳摘要」→「Email Subscriptions」

feedburner-email-2-Blogger 讓讀者以 Email 訂閱最新文章﹍任何位置都能擺放, 免設定 FeedBurner

1. 管理 Email 名單

上圖左側的選項「Subscription Management」可以看到所有訂閱網站的讀者 Email 名單,並進行管理。畫面需要捲到最下方──

feedburner-email-3-Blogger 讓讀者以 Email 訂閱最新文章﹍任何位置都能擺放, 免設定 FeedBurner

對著上方紅框的「查看訂閱者詳情」按下後,會展開全部的名單。

正常來說都會是 "激活" 的狀態,表示讀者能正常接收到訂閱的 Email 通知;但若看到如紅框中的 "未驗證",代表讀者訂閱後沒有到 Email 信箱點擊確認信,有可能是太忙忘了、或是確認信跑到垃圾郵件去了。

貼心的站長可以定期檢視這份名單,針對 "未驗證" 的讀者發個提醒 Email,通知讀者點擊確認信,完成 Email 訂閱的流程。


2. Email 郵件格式設定

左側選項「Email Branding」可以設定電子郵件的格式,例如標題、內文、字體等等的細項,或是當一天發佈兩篇文章時,可以分別設定不同的標題字串。

這部分的詳細說明,可直接參考這篇「設定部落格電子報的版面」。


3. 設定出刊時間

基本上,網站發佈新文章後,讀者訂閱的 Email 通知並不會馬上寄出,而是會等到 FeedBurner 預設的時間才寄出,因此最晚的話,會等到隔天才寄出通知。

feedburner-email-4-Blogger 讓讀者以 Email 訂閱最新文章﹍任何位置都能擺放, 免設定 FeedBurner

要進行出刊時間設定的話,可進入左側選項「Delivery Options」→ 分別設定時區、發送時間,按下「保存」即可。


更多 Blogger 相關工具:

2 則留言:

  1. Blogger官方FeedBurner小工具的訂閱申請介面是英文的,使用了本文的程式碼後,就變成文字了,忽然有一種熟悉和親近的感覺。 很不錯!

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。