Home AMP Blogger Tutorial Cách nhúng Chatango lên Blogger AMP Template

26 tháng 12 2018

Cách nhúng Chatango lên Blogger AMP Template

Cách nhúng Chatango trên Blogger AMP HTML -
cho đến bây giờ Chatango vẫn là một hộp trò chuyện phổ biến dành cho các blogger. Có thể thấy nhiều blog sử dụng Chatango làm phòng trò chuyện cho khách truy cập blog.

Vậy còn blog AMP thì sao? Blog AMP có cho phép bạn nhúng Chatango không?

Như chúng ta biết rằng trong AMP HTML, không được phép lưu trữ các tập lệnh như mã nhúng JS.

May mắn thay, vì Chatango không cần xác minh tên miền, vì vậy chúng tôi có thể lưu hoặc lưu trữ mã nhúng của Chatango ở nơi nào đó và nhúng trở lại Chatango trong AMP với thẻ amp-iframe.

Nếu bạn muốn thử Chatango trên blog AMP, vui lòng làm theo các bước dưới đây.

Đầu tiên bạn cần làm là tạo một nhóm trò chuyện Chatango trên tài khoản Chatango của bạn. Để tạo được ta hãy vào Tạo Group.

Ta chọn "Box" và bỏ dấu tích trong "Full width ticker on mobile". Đối với mục size chọn "Responsive".

Đối với màu sắc và nhiều hơn nữa, điều chỉnh nó theo sở thích của bạn xong rồi bấm vào button "Create Group". Sau đó sao chép mã nhúng được cung cấp và lưu nó vào notepad.
Demo nó giống như thế này - đây là đoạn code của tôi - không được sao chép code bên dưới
<div class="box">
<script id="cid0020000206729732206" data-cfasync="false" async src="//st.chatango.com/js/gz/emb.js" style="width: 100%;height: 100%;">{"handle":"mqdblogspot","arch":"js","styles":{"a":"0084ef","b":100,"c":"FFFFFF","d":"FFFFFF","k":"0084ef","l":"0084ef","m":"0084ef","n":"FFFFFF","p":"10","q":"0084ef","r":100,"usricon":0.69,"allowpm":0,"cnrs":"1"}}</script>
Tiếp theo, vui lòng tạo tệp chat-box.html (hoặc tên bạn đặt.html) trên thiết bị của bạn và dán mã sau đây.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chat Box</title>
<style>
body{
margin:0;
padding:0;
}
.box{
width:100%;
height:100vh;
overflow:hidden;
}
</style>
</head>

<body>

<!--  dán code của chatago vào đây -->

</div>
</body>
</html>
Thay đoạn code ban đầu bạn nhận được từ Chatango vào file chat-box.html và lưu lại
Bạn sẽ được code tươngtự như thế này
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chat Box</title>
<style>
body{
margin:0;
padding:0;
}
.box{
width:100%;
height:100vh;
overflow:hidden;
}
</style>
</head>

<body>


<div class="box">
<script id="cid0020000206729732206" data-cfasync="false" async src="//st.chatango.com/js/gz/emb.js" style="width: 100%;height: 100%;">{"handle":"mqdblogspot","arch":"js","styles":{"a":"0084ef","b":100,"c":"FFFFFF","d":"FFFFFF","k":"0084ef","l":"0084ef","m":"0084ef","n":"FFFFFF","p":"10","q":"0084ef","r":100,"usricon":0.69,"allowpm":0,"cnrs":"1"}}</script>


</div>
</body>
</html>
Bây giờ ta tải file này lên github.com để lưu trữ rồi lấy đường dẫn
Tiếp tục vào githack.com để cdn file, ta được một liên kết
https://rawcdn.githack.com/minhquydesign/amp-blogger/b966f39e43b4c1df54469311bd376aed97de62d1/chatango-box.html

Nếu bạn chưa hiểu về Github hãy xem bài viết Sử dụng github để lưu trữ file (Đang cập nhật hãy tìm kiếm trên google: hướng dẫn sử dụng github để lưu trữ)
Thay liên kết vừa nhận được vào mẫu này
<amp-iframe frameborder='0' height='450' layout='fixed-height' noloading='' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' src='THAY LIÊN KẾT CỦA BẠN VỪA NHẬN ĐƯỢC VÀO ĐÂY'>
<amp-img height='450' layout='fixed-height' noloading='' placeholder='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFKYmgBGY4dP_0CNvmntDna3On83L5XJs9tPpnGNrxZWUIyQSLxLbjfDWZtvmhGAmYr8ZqMCdNjbsfLKx_cNMoK3yJznmxFJPXXtsJmdRmjUFHW-v_grwji1QZJbtimJE3q697AWXqOgA/s1600/back-iframe.png"' width='auto'/></amp-img></amp-iframe>
Phía dưới là đoạn code của tôi khi thay vào
<amp-iframe frameborder='0' height='450' layout='fixed-height' noloading='' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' src='https://rawcdn.githack.com/minhquydesign/amp-blogger/b966f39e43b4c1df54469311bd376aed97de62d1/chatango-box.html'>
<amp-img height='450' layout='fixed-height' noloading='' placeholder='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFKYmgBGY4dP_0CNvmntDna3On83L5XJs9tPpnGNrxZWUIyQSLxLbjfDWZtvmhGAmYr8ZqMCdNjbsfLKx_cNMoK3yJznmxFJPXXtsJmdRmjUFHW-v_grwji1QZJbtimJE3q697AWXqOgA/s1600/back-iframe.png"' width='auto'/></amp-img></amp-iframe>

Xong rồi bây giờ ta lấy đoạn code amp-iframe dán vào nơi cần hiển thị trên blogger, bạn có thể dán ở tiện ích HTML trong bố cục Blogger hoặc dán vào trước thẻ </body> hoặc dán một trang mới trong blogger mở chế độ nhập HTML, dán code đặt tên trang và lưu lại.
Đây là chat box mình làm được
https://minhquydesign.blogspot.com/p/chatango-box.html
Nếu bạn áp dụng không thành công hoặc có thắc mắc vui lòng quay lại đây comment để mình trả lời. Chúc thành công.

Share this