Thêm nút Thích-Like cho template AMP của blogger

Thêm nút Thích-Like cho template AMP của blogger

Template AMP Google chưa cho sử dụng nút like của facebook dù đã cung cấp javascript hỗ trợ vì vậy khi cài đặt tiện ích này và kiểm tra bị báo lỗi.Chắc là cần có thời gian để chờ Google suy nghĩ lại.Sự thật tiện ích like của facebook load quá chậm làm ảnh hưởng tới vấn đề AMP.
Nhiều khi bài viết thì hay mà độc giả không có chỗ check kể cũng bí, vì vậy ta có thể tận dụng phần phản ứng của độc giả cho bài viết là tiện ích có sẵn của blogger làm thành nút like cho template AMP không phụ thuộc facebook.Tuy không biết liệu có tác dụng gì cho seo hay không nhưng cốt lấy chỗ cho độc giả cảm nhận.

Tiện ích này thì nhiều blog đã hướng dẫn rồi tại bài này chỉ tùy sửa đi đôi chút để phù hợp với template AMP trên nền tảng blogger.
Để cài đặt tiện ích này ta cần qua các bước sau.
Thêm nút Thích-Like cho template AMP của blogger
Bước 1
Thêm javascript hỗ trợ iframe vào trước thẻ </head>
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>
Nếu có rồi thì bỏ qua.
Bước 2
Thêm CSS
.reaction-buttons{margin:10px 0}
.reactions-label{margin-right:.7em}
.reactions-iframe{overflow:hidden}
.reactions-iframe amp-iframe{vertical-align:-5px;margin-left:-0.7em}
.like{color:#3b5998;font-size:22px}
Yêu cầu blog đã có link font Material icons
Bước 3
Đặt đoạn HTML sau vào nơi bạn muốn hiển thì nút
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='reaction-buttons'>
        <b:if cond='data:top.showReactions'>
          <span class='reactions-label'><i class='material-icons like'>&#59612;</i></span><span class='reactions-iframe'><amp-iframe allowtransparency='' expr:src='data:post.reactionsUrl' frameborder='0' height='21' layout='fixed' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' scrolling='no' width='200'>
</amp-iframe></span>
        </b:if>
      </div>
</b:if>
Bước 4
Vào bố cục phần bài đăng trên blog check vào ô Phản ứng - Reaction và chỉnh sửa như hình
Thêm nút Thích-Like cho template AMP của blogger

Nhận xét

Không có nhận xét nào :