2019年9月11日

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

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

Wayne Fu 0 A+
fb-messenger-online-chat-without-plugin.jpg-在網頁擺放 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 即時通圖示效果,點擊後會另開新頁,前往本站粉絲團即時通頁面。
messenger.png-在網頁擺放 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. 圖示使用須知

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

這個工具使用了上面這個即時通圖示,如果讀者有找小圖示的需求,建議可使用本站開發的這個工具,能一次搜尋各大免費圖庫:



但若圖片來自非 CC0 圖庫,請注意個別使用條款,通常會要求署名,下載圖片時會出現署名的連結語法,例如下面是上圖的署名範例:

圖片由 cesarstringsPixabay 上發佈


四、上下浮動的按鈕


右下角的 demo 按鈕還會上下浮動,由於此功能非必要效果,未列在範例程式碼之中,如需要這樣的動畫效果,請參考這篇「製作會上下彈跳的按鈕,吸引訪客注意也增加點擊的機率﹍CSS 動畫技巧」。


更多相關網站工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

1 則留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP