الصفحة الرئيسية
Blogspot amp

Tích hợp Live chatbox Facebook messenger cho AMP blogspot

LiveChat của Facebook không thực sự chuyên nghiệp như các phần mềm Chat như Zopim, LiveChat, vChat… nhưng nó có một lợi thế giúp bạn tương tác trực tiếp được với khách hàng qua hệ thống Chat Fanpage không hỗ trợ với Group và trang cá nhân.

Tuy nhiên tính năng này sẽ hữu dụng với khách hàng đa phần từ Facebook.

Sau đây là hướng dẫn tích hợp Live chatbox Facebook mesenger cho AMP blogspot


Bước 1:

Thêm thẻ meta app id facebook vào sau <head>

<meta content='1234567890' property='fb:app_id'/>
Thay 1234567890 thành app_id facebook của bạn.

Bước 2:

Thêm javascript vào trước thẻ </head>

<script async='async' custom-element='amp-facebook-page' src='https://cdn.ampproject.org/v0/amp-facebook-page-0.1.js'/>
<script async='async' custom-element='amp-lightbox' src='https://cdn.ampproject.org/v0/amp-lightbox-0.1.js'/>

Bước 3: Thêm css vào trong <style amp-custom="amp-custom"> ...</style>

#blogramp-fb {
   text-align:center;
   background-color: rgba(0,0,0,.85);
   color:#fff;
}

[on="tap:blogramp-fb"],
#blogramp-fb [on="tap:blogramp-fb.close"] {
   text-align: center;
   display: inline-block;
   width: 40px;
   height: 40px;
   margin: 0 auto;
   z-index: 999;
   background-color: #0075FF;
   background-repeat: no-repeat;
   background-size: 30px 30px;
   background-position: center;
   border: 0;
   border-radius: 100%;
}

[on="tap:blogramp-fb"]{
   position: fixed;
   bottom: 50%;
   right: 0;
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTmBrDJN6aAQ-l_6OWUvmidYK4m-5ii0KGcpC1xRbkmfOVs4ImfNxnY03mlSZepTN98wodIlrXFNXbESt9TJXO8_GoaT-EZww-2lBlnr2jpv2dTlvUQQAnXJ5krBtl1IYBeR9SME5qWt4/s1600/Blogr-AMP-facebook-messenger+%25281%2529.png);
   margin-bottom: -20px;
}

#blogramp-fb [on="tap:blogramp-fb.close"] {
   position: absolute;
   top: 10px;
   right: 10px;
   z-index: 9;
}

.blogramp-fb-wrap {
   display: table;
   max-width: 320px;
   width: 100%;
   height:100%;
   margin:0 auto;
}

.blogramp-fb-inner {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}
Bước 4: Thêm HTML vào trước thẻ </body>
<button on="tap:blogramp-fb"> </button>
<amp-lightbox id="blogramp-fb" layout="nodisplay">
  <div class="blogramp-fb-wrap">
    <div class="blogramp-fb-inner">
     <amp-facebook-page width="310" height="310"
       layout="fixed"
       data-href="https://www.facebook.com/user or i fanpage"
       data-adapt-container-width="true"
       data-show-facepile="true"
       data-hide-cover="false"
       data-small-header="true"
       data-tabs="messages"
       data-width="310"
       data-height="310">
     </amp-facebook-page>
     <button class="fb-chat-button" on="tap:blogramp-fb.close">
      x
     </button>
    </div>
  </div>
</amp-lightbox>

Thay phần bôi màu vàng chanh (user or i fanpage) thành user name hoặc ID trang fanpage của bạn.

Tích hợp Live chatbox Facebook mesenger cho AMP blogspot
Publis: 

إرسال تعليق

🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji
noel