Hướng dẫn cài đặt share button AddThis cho blogspot AMP

Trong dự án AMP, trên thực tế trước đây đã cung cấp một nút để chia sẻ, cụ thể là amp-social-share, điều này khá hữu ích để tạo thuận lợi cho việc chia sẻ văn bản.

Và bây giờ cho AMP HTML đã thêm nút chia sẻ từ AddThis mà chúng ta có thể sử dụng bằng cách hiển thị bộ đếm hoặc số lượt chia sẻ đã được thực hiện.

Nút chia sẻ này cung cấp sự tiện lợi cho việc tùy chỉnh bất kỳ chia sẻ truyền thông xã hội nào bạn muốn hiển thị, bao gồm cả màu sắc, hình dạng và nhiều thứ khác.

Hướng dẫn cài đặt share button AddThis cho blogspot AMP

Bước 1

Hãy tạo một tài khoản AddThis Tại đây

Bước 2

Nhấp vào trình đơn Công cụ-Tool và nhấp vào nút Thêm công cụ mới-Add New Tool ở trên cùng bên phải rồi chọn Chia sẻ nút-Share Buttons và chọn loại Nội tuyến-inline (xếp hàng sang một bên). Nếu bạn đã từng thực hiện nó, nó có nghĩa là bạn chỉ cần nhấp vào công cụ-Tool.

Bạn click ADD MORE SERVICES để thêm các icon mxh cần hiển thị hoặc click dấu x để xóa bỏ mxh ko cần thiết.
Bấm vào hình xem ảnh kích thước lớn.

Bước 3

- Đảm bảo lựa chọn Jumbo cho Share Counters
- Nhãn Kích thước phông chữ sử dụng kích thước phông chữ-Label Font Size 20px và chia sẻ số lượng phông chữ-Share Count Font Size sử dụng 12px
- Đối với kiểu, chọn Chiều rộng cố định hiện đại-Modern Fixed-Width
- Kích thước nút chọn Lớn-Button Size pilih Large (20x20)
- Và kiểm tra Ẩn tên mạng-Hide Network Names

Style tùy chỉnh theo sở thích.

Chỉnh xong nhấn Activate Tool và nhấn lưu như hình chuyển Code Only View sang màu xanh

Và lưu ý: Sau khi tùy chỉnh hiển thị hoàn tất, trước tiên không nhấp vào nút Lưu & đếm-Save & Countinue .

Nhưng trước tiên hãy sao chép URL của trang được liệt kê trong thanh địa chỉ của trình duyệt như sau. Những gì tôi đánh dấu khoanh màu đỏ là mã cần thiết cho bước tiếp theo.

Bước 4

Vào chỉnh sửa mẫu dán đoạn code sau vào trước thẻ
</head> hoặc &lt;/head&gt;&lt;!--<head/>--&gt;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script async='async' custom-element='amp-addthis' src='https://cdn.ampproject.org/v0/amp-addthis-0.1.js'/>
</b:if>

Tiếp theo dán đoạn code sau vào ngay trên:
<b:includable id='shareButtons' var='post'>

<b:includable id='shareAddThis' var='post'>
<div class='shareAddThis'>
<amp-addthis data-pub-id='ra-5b023630a6e0e28e' data-widget-id='ssin' expr:data-share-media='data:post.firstImageUrl' expr:data-share-title='&quot;Check out this article: &quot; + data:post.title + &quot; - &quot; + data:post.url' height='60' layout='flex-item'>
</amp-addthis>
  </div>
</b:includable>

Nhớ thay:
data-pub-id='ra-5b023630a6e0e28e'
data-widget-id='ssin'
của bạn vào nhé.
Tiếp theo dán đoạn code sau vào nơi cần hiển thì bộ đếm addthis:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='shareAddThis'/>
</b:if>

Thêm CSS vào style amp-custom

.shareAddThis{margin:0;height:40px;overflow:hidden;}
.shareAddThis amp-addthis iframe{margin-top:0;margin-left:-8px;}
@media screen and (max-width:640px){.shareAddThis{height:50px;}}