前陣子在「CC0 免費圖庫搜尋引擎」右下角，放了一個「錯誤回報」的按鈕，讓放可以即時留言回報站方。這類的浮動按鈕很醒目，效果會比導覽列或頁尾的「聯絡站長」這類連結好一些。如果是熟悉網站動線的訪客，一般會知道去哪找留言板，但可惜很多使用者不一定熟悉網路或網站的通用設計。
(圖片出處: pxhere.com)
一、Facebook 即時通外掛
所以 FB 即時通這類外掛，有效地成為線上聯絡的一種方案，常駐於頁面右下角，使用者想一對一談話時不需再翻遍整個網站、尋找留言的地方。
這個外掛的安裝教學可參考「為網站安裝 Facebook 即時通(messenger)外掛﹍顧客洽談機器人」。
而即時通外掛對站長而言，有可能成為缺點的情況是，如果網頁原本載入速度就不快，例如裝了太多外掛，或是網站各處的廣告擺太多，那麼每多裝一個外掛對於效能而言都是負擔。
本篇將提供的替代方案是，如何在不安裝外掛的情況下，也能使用 FB 即時通。
二、FB 即時通網址
使用 FB 即時通必須先建立一個 FB 粉絲團，然後即時通外掛會與粉絲團「聊天室」連結，所有談話記錄都儲存在聊天室。
以本站為例，粉絲團的網址為：
https://www.facebook.com/WFU.BLOG取出自己的粉絲團紅色字串後，前面加上 "m.me/" 就成了 FB 聊天室網址：
m.me/WFU.BLOG有了這個 FB 即時通網址後，接下來就能自製不需外掛的即時通按鈕。
三、範例程式碼
1. 範例效果
請見本頁面右下角的浮動 FB 即時通圖示效果，點擊後會另開新頁，前往本站粉絲團即時通頁面。
2. 安裝程式碼
使用以下簡單的範例程式碼即可做出此效果：
<!--FB 即時通-->
<a href="https://m.me/WFU.BLOG" target="_blank"><img id="messenger" src="https://4.bp.blogspot.com/-g2z0IaIWe2g/XVpo-En_p6I/AAAAAAAAhgM/L3u57b4FweojgU_D1d05EqHZnU-S-t6TQCLcBGAs/w150/messenger.png" title="FB 即時通"/></a>
<style>
#messenger {
position: fixed;
bottom: 15px; /* 與下方的距離, 也可改為百分比, 即為距離螢幕下方的百分比 */
right: 15px; /* 與右方的距離 */
width: 60px; /* 按鈕寬度 */
height: 60px; /* 按鈕高度 */
opacity: 0.6; /* 按鈕原始透明度 */
z-index: 10;
cursor: pointer;
}
#messenger:hover { /* 滑鼠經過按鈕時 */
opacity: 1; /* 透明度 */
}
</style>
<!--Designed by WFU BLOG-->- 紅色字串請改為自己粉絲團專屬字串
- 藍色即時通圖片網址可改為自訂的圖片網址
- 其餘的部分，如果對 CSS 熟悉可自行修改參數
3. 圖示使用須知
這個工具使用了上面這個即時通圖示，如果讀者有找小圖示的需求，建議可使用本站開發的這個工具，能一次搜尋各大免費圖庫：
但若圖片來自非 CC0 圖庫，請注意個別使用條款，通常會要求署名，下載圖片時會出現署名的連結語法，例如下面是上圖的署名範例：
圖片由 cesarstrings在 Pixabay上發佈四、上下浮動的按鈕
右下角的 demo 按鈕還會上下浮動，由於此功能非必要效果，未列在範例程式碼之中，如需要這樣的動畫效果，請參考這篇「製作會上下彈跳的按鈕，吸引訪客注意也增加點擊的機率﹍CSS 動畫技巧」。
更多相關網站工具：