在網頁擺放 FB 即時通按鈕(免裝外掛)，讓訪客線上即時聯絡

前陣子在「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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz0PjWC5X3W50Z2-DJ0hwjXfiwKHwoBLK2ZOBAIDKrCKdrmkhEg4lKo3JoM3j3Re-Glhw5bfQZ4Xq58TDWZp1pFRF7JfjPXXy-eEGUTvKeY2q_0RJEqD9Sx3AxvN_9fbtJFYKnspOifjsQ/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 動畫技巧」。

更多相關網站工具：