[教學]幫網頁安裝「一鍵訂閱到 Feedly, InoReader, The Old Reader」的按鈕

(Pic from: joshrimer.com)隨著 Google Reader(以下簡稱 GR) 的關閉，本站各處原本的「一鍵訂閱 GR」按鈕也失去作用。雖然有無限的感傷，不過還是得補上其他 RSS 閱讀器的一鍵訂閱按鈕。在網站提供 RSS 閱讀器一鍵訂閱的按鈕，除了增加讀者的便利性，也是部落格能穩定累積讀者的一大幫助。

在後 GR 時代，最終誰能成為 RSS 閱讀器霸主還很難說。以目前來看，根據「無痛轉換 Google Reader 的四種替代方案比較」，Feedly、InoReader、The Old Reader 這三者的完成度比較高，應該會是使用率較高的選擇。

根據「alternativeto.net」對 GR 替代方案的投票結果(至2013.7.4為止)──



如上圖，前幾名的投票結果符合「無痛轉換 Google Reader 的四種替代方案比較」的評測，而第二名 NewsBlur 由於有訂閱數量的限制(64個)，因此並未列入該篇文章的評測資格。

要如何在部落格安裝「一鍵訂閱 RSS 閱讀器」的按鈕，就像本站左上方的訂閱 logo，本文將針對以上面三者來說明。以下依慣例先說明原理，想直接安裝請跳「二、Feedly 一鍵訂閱按鈕程式碼」。


一、找出各家 RSS 閱讀器一鍵訂閱的連結

1. Feedly

以本站為例，點選訂閱網站(WFU BLOG)後，出現以下畫面──



將上圖網址列的網址複製出來，得到以下字串：

http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fwayne-fu.blogspot.com%2Ffeeds%2Fposts%2Fdefault
利用線上「Escape解碼轉換工具」，可得到以下字串：

http://cloud.feedly.com/#subscription/feed/http://wayne-fu.blogspot.com/feeds/posts/default
這樣就找到 Feedly 一鍵訂閱的超連結了，其結構為字串 "http://cloud.feedly.com/#subscription/feed/" 後面加上含 "http" 開頭的 RSS 訂閱網址。


2. InoReader

InoReader 雖然圖形介面設計上遠輸 Feedly，但在其他方面的設計，真的做得非常仔細。連本文需要的一鍵訂閱，系統本身就已經提供超連結(Feedly 得經幾個步驟才找得出來)，請見下圖──



用戶偏好設置 → 附加功能 → 圖中紅框的網址參數即是。

使用的方法為預設字串 "http://www.inoreader.com/?add_feed=%s" 改為 "http://www.inoreader.com/?add_feed=" 加上含 "http" 開頭的 RSS 訂閱網址即可。


3. The Old Reader

由於 The Old Reader 無法經由前兩個介紹的方法來找到一鍵訂閱的網址，得經由某些外掛(RSS Subscription Extension)來找。直接寫結論，The Old Reader 一鍵訂閱的超連結為字串 "http://theoldreader.com/feeds/subscribe?url=" 加上含 "http" 開頭的 RSS 訂閱網址即可。



二、Feedly 一鍵訂閱按鈕程式碼

請在網頁想要擺放按鈕的位置，加入以下 HTML 碼──

<a href="http://cloud.feedly.com/#subscription/feed/http://feeds.feedburner.com/WfuBlog" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKUhNeWE5WEe0i6CwFRuK8LvMji-FFg6bS272pJyftXs2LMMC-qrqIjIvfJi74JIEwqYhnrdlyU8F53KinKwzHZ0WlzJyra6z5_dFxxrZsEe1FxjayqG0UO7YIGd2bv43LxNBXUIeSp22E/s262/feedly_button.png" title="訂閱 WFU BLOG 到 Feedly"/></a>

• 紅色字串請改為自己網站的 RSS 訂閱網址
• 藍色圖片網址可改為自訂的圖案網址
• 綠色字串請改為自訂提示文字

效果將如同下面的按鈕，可按下試試看─



上圖按鈕圖示的來源為「適用於網頁按鈕的SeonBieber按鈕圖標」，可改為自訂圖案。



三、InoReader 一鍵訂閱按鈕程式碼

請在網頁想要擺放按鈕的位置，加入以下 HTML 碼──

<a href="http://www.inoreader.com/?add_feed=http://feeds.feedburner.com/WfuBlog" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLjMLK8u2mh03zSx6TU94J4Mja0B5ikyeH83qhpFJ_iUqbpYnUC8ERolGl8umVHqrr2TX4rOFFx1_EEHCKWdYgU4k2boSL98PNOu3uybf0JMAanNALWqEmK3EOHCsqjawDyYga-9eDJdsA/s0/inoreader-h43.png" title="訂閱 WFU BLOG 到 InoReader"/></a>

• 紅色字串請改為自己網站的 RSS 訂閱網址
• 藍色圖片網址可改為自訂的圖案網址
• 綠色字串請改為自訂提示文字

效果將如同下面的按鈕，可按下試試看─





四、The Old Reader 一鍵訂閱按鈕程式碼

請在網頁想要擺放按鈕的位置，加入以下 HTML 碼──

<a href="http://theoldreader.com/feeds/subscribe?url=http://feeds.feedburner.com/WfuBlog" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu1Px3fQ4qR231bGmQ-BPFJ6YEKfkroBG8O3NbxMHHMRt9wDOdEAgzSBNfuEonXYnfWTFBJG5U_3XlpiTkXsqTn8wY4cshMoeoZvdAax-cXOSkJxA4j7aYD_UXnbskkBgqxZbusS9BLtQW/s0/old+reader-h78.png" title="訂閱 WFU BLOG 到 The Old Reader"/></a>

• 紅色字串請改為自己網站的 RSS 訂閱網址
• 藍色圖片網址可改為自訂的圖案網址
• 綠色字串請改為自訂提示文字

效果將如同下面的按鈕，可按下試試看─





五、Blogger 擺放位置

如果要像本站一樣，將訂閱按鈕放在文章末尾處的資訊區，到 Blogger 後台打開範本文件：編輯 HTML → 搜尋字串「<div class='post-footer-line post-footer-line-1'>」。應該會有兩個搜尋結果，在第一個搜尋結果的後面找適當的位置放安裝碼；第二個搜尋結果是行動裝置版本的位置，由於不知道效果，請自行測試有無作用。

如果要擺放到其他位置的話，請參考「Blogger 文章及留言區塊的程式碼」、「Blogger 標頭、導覽列、側邊欄、頁尾區塊的程式碼」等文章。

Feedly 相關文章：