部落格行銷教學#27 | 安裝 WhatsApp 懸浮按鈕

create floating whatsapp button for blogger

 有些朋友反映使用 Facebook Messenger 的速度還是有點慢，希望在部落格安插 WhatsAppp 的聯絡按鈕，讓遊覽者點擊後可以直接聯絡自己，沒有問題！我立即為你安排

教學目錄 | 上一篇教學：製作 Facebook Messenger 插件

安裝 WhatsApp 懸浮按鈕

影片解說

使用以下按鈕訂閱我們的 YouTube 頻道

#1 了解什麼是 WhatsApp's click to chat

每一個 WhatsApp 用戶可以客制不是聯絡人的鏈接，主要是儘管你沒有將對方的手機號碼儲存在聯絡名單，你可以使用鏈接的方式在WhatsApp 裡面與對方通訊的視窗

WhatsApp's click to chat 的組合是這樣的

  • https://api.whatsapp.com/send?phone=【國家地區代碼】【手機電話號碼】

參考各個國家的國家地區代碼

  • 台灣 +886
  • 香港 +852
  • 澳門 +853
  • 泰國 +66
  • 馬來西亞 +6
  • 新加坡 +65
  • 汶萊 +673

製作 Click to chat 的鏈接例子（馬來西亞地區）

  • 手機號碼是： +601110992136
  • WhatsApp 鏈接是：https://api.whatsapp.com/send?phone=/601110992136
原本馬來西亞的國家地區編號是 +6，但應用在 WhatsApp Click to chat 裡面的時候必須把 【+】號省略

預設發送的信息的鏈接組合

https://wa.me/【國家地區代碼】【手機電話號碼】&text=【預設訊息】

比方說，我現在想讓用戶點擊鏈接後預設的訊息是『你好，我想詢問』

那麼鏈接將變成

https://api.whatsapp.com/send?phone=601110992136?text=你好，我想詢問

以上是製作 WhasApp 懸浮按鈕的鏈接

#2 複製以下代碼

<style>
.float{
position:fixed;
width:60px;
height:60px;
bottom:40px;
right:40px;
background-color:#25d366;
color:#fff;
border-radius:50px;
text-align:center;
font-size:30px;
box-shadow: 2px 2px 3px #999;
z-index:100;
}

.my-float{
margin-top:16px;
}
</style>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<a href="https://api.whatsapp.com/send?phone=601110992136&amp;text=你好，我想詢問" class="float" target="_blank" draggable="false">
<i class="fa fa-whatsapp my-float"></i>
</a>

注：同時將紅色熒光筆裡面的鏈接更換成你的 WhatsApp鏈接

3. 新增 HTML 插件

embed WhatsApp floating html code to blogger footer
  1. 前往 Blogger 後台，點擊 Layout
  2. 在 Sidebar 點擊 Add Gadget
  3. 選擇 HTML/ JavaScript 的插件
  4. 粘貼你的修改好的代碼並儲存
  5. 拖拉新的插件到 Footer 的位置

小結

以上是我製作 WhatsApp 懸浮按鈕的方式，希望這次的教學能幫助你。


Comments

Post a Comment