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.
