2006-07-20

Blog 上的小圖示與訂閱按鈕大集合

Tags:

與 Blog 相關的服務相當多，很多人都喜歡在 Blog 上放一些小圖示與按鈕以方便讀者直接使用這些服務。例如左邊這幾個就都滿常出現在 blog 上。這些圖示與按鈕有些需要自行製作，有些如 Yahoo 與 Google 等則提供了簡易的製作工具，只要依序設定將最後的 HTML 程式碼放置到 Blog 的模板模板當中就可以了。下面是這些常用按鈕的整理與製作教學以供參考。



Site Feed
大部分的 blog 系統皆提供了 rss 或 atom 。以 Blogger 系統為例，rss 與 atom 的網址分別為
  • http://blog網址/rss.xml
  • http://blog網址/atom.xml

你可以在 blog 上放置這兩個連結。但光有文字略嫌單調，你可以到
Feed Icons - Help establish the new standard
抓取官方的圖示來使用或自行修改。懶得自己處理也可以到
RSSアイコン - 無料RSS画像・RSS作成サービス
去製作一個獨一無二的按鈕。雖是日文介面，但憑藉著漢字就可以大概了解各項設定。將製作完成的圖檔存下來上傳到 Blogger 或其他網頁空間就可以了。


Save to del.icio.us
在 blog 上放一個 Save to del.icio.us 的連結以讓讀者可以很快的將你的頁面存入 del.icio.us 系統內。安裝這個連結的方法可以參考
del.icio.us / help / forpublishers
del.icio.us 的官方說明。最基本的作法是直接將 code 內的程式碼
<a href="http://del.icio.us/post" onclick="window.open('http://del.icio.us/post?v=4&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title),
'delicious','toolbar=no,width=700,height=400'); return false;"> Save This
Page</a>

複製到 blog 範本內，你可以自行加上圖片並修改連結的名稱。在網頁下方還有適用於 Wordpress 與 Movable Type 這兩套 blog 系統的說明可供參考


Furl this page
furl 是另一套常用的網路書籤工具。要在 blog 上放一個 Furl this 的連結可以參考下列網址的說明：
Furl News - Grow Your Own Site Traffic With Furl
將下列程式碼
<script type="text/javascript" src="http://www.furl.net/resources/furlIt.js"></script><a
href="#" onClick="return furlIt(document.title, document.location.href,'',document.referrer,'');"><img
src=http://www.furl.net/i/favicon.gif alt="Furl this page" title="Furl this
page" border=0></a>

同樣的你可依需求修改鏈結的內容與圖示。


Add to Google
這了連結按鈕可以讓使用者能快速的設定透過 Google 個人化首頁或 Google Reader 來訂閱你的 blog 。
Google 所提供的製作工具在
Google Help : Add to Google button
將 blog 的 rss 或 atom 訂閱網址輸入畫面上「 Your feed URL: 」的欄位後按下「 Creage HTML 」按鈕就會產生相對應的 HTML 程式碼，在將這些程式碼移植入 blog 範本即可。若要自訂圖片與文字也可以參考網頁下面的說明，將下列 HTML 敘述中
<a href="http://fusion.google.com/add?feedurl=[FEED_URL]">
   <img src="[LOCAL_PATH]/add.gif"
   width="104" height="17" border="0"
   alt="Add to Google">
</a>

[FEED_URL] 與 [LOCAL_PATH] 這兩部份以你確切的網址取代就可以了。


Add to My Yahoo!
如同 Add to Google ，這個按鈕可以讓使用者快速設定在 My Yahoo! 的頁面上訂閱你的 blog 。設定方式參考
Yahoo! Publisher's Guide to RSS : Promote Your Feed
依據畫面上的指示輸入相關資料就會產生相對應的 HTML 碼。不過目前 Yahoo 的 RSS 對中文似乎還存在一些狀況，所以我並沒有放置這個連結在我的網頁上。


Add to Technorati Favorites!
Technorati 的服務也滿多人使用的，有興趣的話自行參考Technorati網站。你也可以在 blog 上放置一個 Add to Technorati Favorites! 的按鈕讓讀者快速新增至我的最愛。官方的教學網站在
Technorati: Favorite Button
挑選你喜歡的式樣將該段程式碼複製貼入 blog 範本內，然後在
<a href="http://technorati.com/faves?add="> ....略

的 ?add= 後面加上你的網址，例如
<a href="http://technorati.com/faves?add=http://bartstalk.blogspot.com"> ....略

就完成了。


Subscribe with Bloglines
滿多人使用 Bloglines 訂閱 rss 頻道，你也可以在 blog 上放置一個 Subscribe with Bloglines 的快速按鈕。在登入 Bloglines 後，左手邊的主要功能選單內點選 「Get a Subscribe To Bloglines Button 」就會在右手邊的頁面出現設定頁面。選擇 icon 樣式並輸入網址之後將產生的 HTML 碼置入範本即可。


Subscribe in NewsGator Online
NewsGator 也是另一套滿多人使用的 rss 線上瀏覽器。要在 blog 上放置一個 Subscribe in NewsGator Online 的按鈕可以參考下列網址：
NewsGator - Support
NewsGator 提供了兩種大小的 icon 以供選擇，下面的範例程式碼是採用較大的圖示
<a href="http://www.newsgator.com/ngs/subscriber/subext.aspx?url=[RSS_URL_HERE]"><img
src="http://www.newsgator.com/images/ngsub2.gif" alt="Subscribe in NewsGator
Online" border="0"></a>

將程式碼複製到範本後，記得要將 [RSS_URL_HERE] 這個部份修改為你自己的 rss 或 atom 網址，例如
<a href="http://www.newsgator.com/ngs/subscriber/subext.aspx?url=http://bartstalk.blogspot.com/atom.xml">
......略

按鈕才會正常運作。


Blogroll Me
Blogroll是一個 blog 聯撥的服務，你可以在 blog 上增加一個 Blogroll Me 的快速連結讓讀者將你的 blog 加入聯撥的行列。登入系統後在左手邊的「 Navigation 」選單內有一個「BlogRoll Me」的連結，點選後就會進入「 "Blogroll Me!" link wizard 」的設定畫面。依序填入你 blog 的標題與網址就會產生相對應的 HTML 碼。複製貼入範本後可自行依需求加入圖片與修改文字。

滿多人使用 Bloglines 訂閱 rss 頻道，你也可以在 blog 上放置一個 Subscribe with Bloglines 的快速按鈕。在登入 Bloglines 後，左手邊的主要功能選單內點選 「Get a Subscribe To Bloglines Button 」就會在右手邊的頁面出現設定頁面。選擇 icon 樣式並輸入網址之後將產生的 HTML 碼置入範本即可。


以上是一些常用小圖示的整理，未來有的圖示在慢慢補充進來吧。

張貼者： Bart 於 7/20/2006

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)