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

Template AMP blogspot, Google đã cho sử dụng nút like của facebook nhưng nó còn hạn chế chỉ thiết lập cho URL tuyệt đối nghĩa là chỉ cài đặt cho 1 url ví dụ như trang chủ mà không thể cho toàn bộ các trang trong blog.

URL có dạng: data-href="https://www.abc.hik"
Không sử dụng được cho: expr:href="data:blog.url"

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 blogger 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.

Thêm nút Thích-Like cho template AMP của 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

Tới thời điểm bạn xem bài này, template AMP blogspot đã tích hợp được nút like của facebook.
Xem hướng dẫn tại đây
Publis: 

Post a Comment

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