網站如何加上即時聯絡框？

FB、IG、LINE 完整操作教學

內容最後更新時間：2023-06-25

建議先看目錄

前言

有時候在瀏覽網站或部落格時，對於內容有些疑問，想要詢問站主的話怎麼辦？這時候網站上的聯絡框就非常重要了，它能夠讓讀者即時聯絡到站主，解決許多的問題。

但這個聯絡框，究竟要怎麼安裝到網站上呢？這篇文章就是要來與你分享在部落格上嵌入聯絡框的方式，除了 Facebook 外，其餘像是 LINE、Instagram、Telegram 等平台，也都能進行串接。

PS. 嵌入聯絡框的原理，就是需要先產出「聯絡框/按鈕」的程式代碼，再貼近網站的程式碼中。所以雖然本篇操作上是以 WordPress 網站示範，但道理都是相通的，即便是用其他部落格平台架站，只要平台開放編輯程式碼，一樣是能夠進行嵌入的。

為什麼網站/部落格需要即時聯絡框？

#1 內容問題通知

對部落格來說，需要聯絡框最大的原因，是為了讓讀者可以通知自己網站中內容的問題。因為即便站主再注意，有時候可能還是有些遺漏掉的部分。

最常見的，可能像是內容勘誤，或是有寫錯字，有些好心的讀者就能透過聯絡框，直接告知站主。另外像是，版面跑版被通知也很常見，畢竟有時候站主自己看到的畫面，跟讀者是不太一樣的。

#2 讀者直接回饋

部落格一直以來最大的問題，就是沒辦法跟社群一樣，在發出內容後，就立即得到回饋，所以很多時候，其實自己是不太知道內容上有沒有需要優化的地方。

所以如果能夠安裝上聯絡框，讓讀者在閱讀完內容後，直接將心得回饋給你，就能夠根據讀者的回饋，去將自己的內容更加優化，或是提供更深入的資訊。

#3 廠商合作洽詢

雖然一般來說，廠商如果有合作想跟站主洽談，都會透過郵件的方式比較正式。但當然也不乏有一些廠商，會使用對話框的方式，直接詢問是否有合作意願。

另外一種狀況，我就曾遇過廠商寄送合作邀約到信箱，但不知道是什麼問題，我這邊並沒有接收到，是後來靠網站上的聯絡框，才成功聯繫上。如果沒有聯絡框的話，這次合作可能就不會成了。

延伸閱讀：
1. 創作者如何尋找合作廠商？那些你該知道的方法及潛規則
2. 創作者如何與廠商進行合作？完整流程與實戰經驗分享

#4 廠商折扣提供

有時候部落格創作者跟廠商合作，廠商可能會提供幾組折扣碼 (尤其是網路工具)，但因為數量有限，每組序號也不同，所以不太可能直接寫在公開文章中。

此時就能在文章中寫下「如果有需要，請利用本站聯絡框索取」，當有讀者想要索取折扣碼時，就能夠直接用聯絡框詢問你，你也能直接將代碼提供給對方。

#5 詢問網站服務

如果你的網站有提供服務，那麼加上聯絡框，也是讓有意願的客戶，可以直接在網站上做詢問。這樣的即時溝通，能讓案子的成交機率大大提升。

還有另外一種，不是你自己的服務，可能是合作廠商的服務，讀者可能原本在猶豫，透過聯絡框即時詢問你，在你直接的推薦之下，更提升了轉換率，你可能也因此能獲得聯盟行銷獎金。

如何嵌入 Facebook 即時聊天功能？

首先，最多人常使用的，會是網站串聯 Facebook 粉絲專頁的即時聊天功能。

而這項功能可以直接在 Facebook 的後台設定，以下詳細步驟分享。

step 1

首先，需要到你 Facebook 粉絲專頁，在「管理粉絲專頁」的地方，點擊「Meta Business Suite」。

step 2

在設定中，點擊「訊息」，在右上角設定中，選擇「查看所有設定」。

step 3

進入頁面後，選擇「洽談外掛程式」，並點擊右上角的「設定」。

step 4

會跳出一個框，需要選擇設定方式，我們選擇「標準」即可。

PS. 雖然我們是使用 WordPress 架站，不過該步驟如果選擇 WordPress 的話需要多安裝一個外掛，我是覺得不用那麼麻煩，直接用標準設定即可。

step 5

接下來會需要進行一些設定，像是：語言、網域，就照你的狀況設定即可。

到了第三步驟，會出現一段程式碼，這就是我們需要的，點擊「複製程式碼」。

step 6

接下來回到網站上，有兩種方式可以放置程式碼。(延伸閱讀：如何將代碼放入部落格中？)

第一種就是直接到「外觀」>「佈景主題編輯器」中，選擇 header.php 的檔案，並將整段程式碼插入進 <head> 之後。

第二種作法，個人覺得比較好，因為可以避免掉，如果佈景主題更新，而導致嵌入進去的程式碼消失的狀況。

這個方式需要安裝「Code Snippets」這個外掛。安裝完畢後，後台左側會多出一個剪刀的圖示，此時直接點擊「新增程式碼片段」。

會看到一個程式碼編輯區，將剛剛複製的那段代碼貼到編輯區，輸入程式碼片段的名稱後，按下儲存，即完成聯絡框的嵌入。

PS. 補充一下，貼上程式碼的時候，記得檢查你的程式碼有沒有被以下的程式碼框住 (也就是你的程式碼要在 <style><style/> 中間)：

add_action('wp_head',function(){ ?>
    <style>



    </style>
<?php });

(以下可開放複製)

step 8

以上步驟都完成後，刷新一下頁面，就能看到你的 Facebook 即時聊天框出現在設定的位置囉。

你也想要打造一個有品牌的部落格嗎？

我每周都會親自寫一封信與我的訂戶聊聊，而從中我將大家回饋最多的內容，重新編修，整理成一堂名為「DEAN 閱」的文字產品，如果你是想利用部落格經營個人品牌的新手，我相信這些實戰內容，會對你非常有幫助。

現在輸入【deanlife】，即可獲得 Dean 讀者專屬折扣。

立即輸入 deanlife 獲取 100 元折扣

如何嵌入其他社群平台聯絡框？

除了 Facebook，如果你經營的平台是其他像是 LINE、Instagram、Telegram，它們本身沒有能夠串接的設定，所以我們就需要依靠額外的第三方工具來達成。

這次我們要使用的工具是 Get Button，它是一款免費的彈出式聯絡視窗工具，可以免費使用。

step 1

首先，進入到 Get Button 的官網。在首頁下方，就有三個可以進行設定的部分。

第一個，是可以選擇你想要嵌入的社群平台 (免費版可以新增兩個)，有非常多社群平台種類，像是：LINE、Instagram、Telegram、Whatapp、Snapchat 等等，我這邊就先用我自己的 LINE 官方帳號示範。

第二個設定，可以調整訊息框的文字內容與位置。(免費版只可更改按鈕位置與跳出的文字通知內容)

step 2

再往下方看，第三步驟，是輸入你的信箱。

輸入後按「Get Button Code」，就會跳出一段程式碼，這個就是你聯絡框的代碼。

而剛剛輸入的信箱，也會同步收到同一段程式碼。

step 3

回到網站上，跟前面 Facebook 嵌入代碼的方式一樣。可以直接到佈景主題中的 header.php 檔案，<head> 之後嵌入代碼。

或是也能用 Code Snippets 來新增程式碼片段，並嵌入代碼。(不過要注意目前這段程式碼不要跟 Facebook 的程式碼衝突到)

也要記得，你複製的代碼，一樣要被以下的程式碼框住：

add_action('wp_head',function(){ ?>
    <style>



    </style>
<?php });

(以下可開放複製)

網站嵌入聯絡框的常見問題

網站聯絡框要嵌入哪個平台比較好？

其實這沒有一定答案，建議是使用你平時最方便回覆的平台就好，如此收到訊息時，才能夠即時進行回覆及處理。

需要付費使用第三方聯絡框工具嗎？

通常第三方聯絡框工具的付費功能，都是可以客製化文字內容及外觀，有些則是會有一些像是通知音效的進階功能。

這部份就是要看你自己的網站需不需要使用到這些功能，不然一般來說只是單純聯絡用的話，免費版就很足夠了。

聯絡框可以使用自動聊天機器人嗎？

可以，不過就需要自行去進行額外的串接。

如果你是使用 Facebook 即時聊天功能，建議可以串接 ManyChat，是國內外蠻多人都在使用的聊天機器人系統。

結論：記得評估聯絡框的負面影響

最後，想提醒一下，嵌入聯絡框確實有它的好處，不過我們也不能忽視它可能帶來的負面影響。

像是可能會造成網站速度的緩慢，不然就是可能會影響使用者閱讀 (尤其是行動版裝置)。

所以在為自己網站添加聯絡框之時，也記得一定要思考到這些點，沒有問題再去嵌入。

用簡單的方式學習更多網路經營知識

部落格經營相關文章

【手機版表格資訊在下方】

Dean

一位內向的男孩，喜歡思考多於說話。

多年經營部落格，想讓文字成為你我溝通的橋樑。

這邊，是我成長的溫床，也是你最溫暖的歸屬。

商業合作：[email protected]
預約服務：deanlife.blog/service
深入認識：deanlife.blog/about