Chèn nút Pinterest Pin it vào ảnh trong Blogger

Pinterest là một trang chia sẻ ảnh theo dạng mạng xã hội, thông qua Pinterest người dùng có thể chia sẻ những bức ảnh và sắp xếp chúng thành những bản tin khác nhau. Với mỗi hình ảnh đưa lên đều cho phép gắn liên kết trỏ về website và liên kết này có giá trị rất cao về cả traffic và backlink. Vì vậy chèn nút Pin it! vào ảnh cho blog/website sẽ rất có lợi cho SEO.

Cách 1: Thêm thủ công

Đăng nhập Blogger ~> Mẫu ~> Chỉnh sửa HTML
Thêm đoạn code này vào phía trên thẻ </body> rồi Lưu Mẫu lại

<script>
//<![CDATA[
var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbEQUOTdppnOBoNS7ZTpUFYNduTUEjslAYnBeElukh1t6S-s4fnZaiUb2AlgMGMST90lw-u1GaeHlcKj-Fp8ytrfQu4cWw1IkHw2mfObFYzdzgy_W3z2o5_hxBeRzbEOAZYd1xkckLArMw/s1600/pinit-button.png";
var pinit_button_position = "center";
var pinit_button_before = "";
var pinit_button_after = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='pinit-img-button' src='http://dxoan.googlecode.com/svn/trunk/pinterest-button1.js' type='text/javascript'>
// dxoan.blogspot.com - Blog DX - Blog thủ thuật, công nghệ và mọi thứ. ( Không xóa bỏ dòng này nếu muốn đoạn code hoạt động )
</script>

var pinit_button_position = "center"; - nút Pin it! sẽ hiển thị ở giữa hình ảnh. Để thay đổi vị trí hiển thị nút Pin it!, thay center bằng 1 trong các vị trí:

topleft
topright
bottomleft
bottomright

var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbEQUOTdppnOBoNS7ZTpUFYNduTUEjslAYnBeElukh1t6S-s4fnZaiUb2AlgMGMST90lw-u1GaeHlcKj-Fp8ytrfQu4cWw1IkHw2mfObFYzdzgy_W3z2o5_hxBeRzbEOAZYd1xkckLArMw/s1600/pinit-button.png" - Là hình ảnh nút Pin it! . Một số hình nút Pin it! cho bạn chọn:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBOsWP4McBO9rGmTjx4bU45YstslKzG39lJaGHjkIrObigClmwIcVcmsrElxwpqzC65eNvQZ87gwPC3HDupRx8OG4toKw9iAWl1tE1CzviBBJwPUqZK_clHOku4HtRqYXW1GNFqQhNfZ4h/s1600/pinterestx1_72.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdtRHFN7Sj6-L5hiNYUhOpboNCvEa2ZpX4J2onRYfWnwrgSPqh-fuJgKte37t6GuXbKBzORYS-NHJilCQWDW-OhoXwA0ovUhsIVAgaCQ6MP4CEKZC7sZHgob1LJ3QbWl60xot9kCOtNr0T/s600/pinterest-button.png

Chú ý: Khi đăng bài mà không muốn hiển thị nút Pin it! cho một hình nào đó thì các bạn chuyển bài viết qua chế độ HTML và thêm thuộc tính class="nopin" cho thẻ img chứa hình ảnh đó.
Ví dụ:

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOGw-Wc4NyOSx_joHHPelNr1r8vTp5QOGzldZP0dg8O4fuzAYHB9kwD7U_ugOaeDNrJH9Qvs78sG1MwcSKsiBwU1Nn4f1EZoM0mo8BPKhJ-mzLevI_XdvkPmm65-fI0omGYlVUaqrbp_b5/s1600/gioi+han+cua+blogger+-+blogdx.png" height="320" width="230" class="nopin" />

Cách 2: Dùng Widget builder của Pinterest

Bước 1: Truy cập https://business.pinterest.com/en/widget-builder#do_pin_it_button

Tại phần "Button Type", chọn thẻ "Image Hover". Chỉnh sửa hình ảnh nút Pin it! ở phần "Appearance" và rê chuột qua ảnh ở phần "Preview" để xem hình ảnh nút Pin it! sau khi chỉnh sửa.

Kéo xuống phía dưới và copy đoạn code nhận được

Bước 2: Đăng nhập Blogger ~> Mẫu ~> Chỉnh sửa HTML
Chỉnh sửa đoạn code lấy được ở Bước 1 rồi dán vào phía trên thẻ </body> ~> Lưu Mẫu

<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async="async" defer="defer"  data-pin-color="red" data-pin-height="28" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

Sửa async thành async="async" và defer thành defer="defer" thì mới lưu mẫu được
Chú ý: Khi đăng bài mà không muốn hiển thị nút Pin it! cho một hình nào đó thì các bạn chuyển bài viết qua chế độ HTML và thêm thuộc tính nopin="nopin" cho thẻ img chứa hình ảnh đó.
Ví dụ:

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOGw-Wc4NyOSx_joHHPelNr1r8vTp5QOGzldZP0dg8O4fuzAYHB9kwD7U_ugOaeDNrJH9Qvs78sG1MwcSKsiBwU1Nn4f1EZoM0mo8BPKhJ-mzLevI_XdvkPmm65-fI0omGYlVUaqrbp_b5/s1600/gioi+han+cua+blogger+-+blogdx.png" height="320" width="230" nopin="nopin" />