Pinterest - Chèn nút "Pin it" cho hình ảnh trên blog của bạn

Pinterest là một trang mạng xã hội chia sẻ hình ảnh, 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 sẽ rất có lợi cho SEO. Hôm nay, pnc sẽ hướng dẫn cách chèn nút “Pin it” tự động cho từng bức ảnh trong blog của bạn.

• Cách 1: Sử dụng công cụ Shareaholic
• Cách 2: Sử dụng javascript
• Cách 3: Sử dụng Widget builder của Pinterest

Cách 1: Sử dụng công cụ Shareaholic

Nếu bạn đã sử dụng các công cụ Shareaholic, hãy làm theo các bước đơn giản dưới đây để thêm nút Pin it vào hình ảnh (Nếu bạn chưa có tài khoản Shareaholic thì có thể đăng ký tại đây)
1. Đăng nhập vào tài khoản Shareaholic của bạn.
2. Nhấp vào Setting biểu tượng ở góc trên bên phải (hoặc click vào đây).
3. Bấm vào nút Site Tools
4. Tiếp theo, nhấn vào nút +Add Website để thêm blog của bạn và nhấn Continue

• DOMAIN: Địa chỉ blog của bạn
• NAME: tên blog của bạn
• FLATFORM: chọn nền tảng Blogger
• CONTENT CATEGORY: nội dung blog bạn chia sẻ
• CONTENT LANGUAGE: Ngôn ngữ

- Xác minh trang web của bạn bằng cách chèn đoạn mã dưới đây vào trước thẻ </head> trong mẫu của bạn (thay đổi đoạn màu đỏ bằng Site ID của bạn) và nhấn Verify Site để xác minh

<meta name='shareaholic:site_id' content='ca08ce11cc98198581a18ece230ab4e2' />

- Tiếp theo, chọn Setting

- Chuyển sang tag Sharing và đánh dấu chọn Shareable Images

- Bấm Save Settings để các cài đặt có hiệu lực
- Cuối cùng, bấm vào nút Get Setup Code và copy đoạn code nó cung cấp

- Vào Blogspot >> Bố cục >> Thêm tiện ích >> HTML/Javascript và Paste(dán) đoạn mã vừa copy ở bước trên vào Lưu lại (hoặc vào Mẫu >> Chỉnh sửa HTML và dán đoạn mã vào trước </body>)

- Xem kết quả, nếu hình ảnh trên blog của bạn xuất hiện nút "Pin it" như hình dưới đây là bạn đả thành công

Chú ý:
- Để nút "Pin it" xuất hiện, hình ảnh trên blog của bạn phải có kích thước tối thiểu 120x80 pixel
- Nút "Pin it" sẻ không xuất hiện khi bạn duyệt blog bằng thiết bị thông minh như điện thoại di động hoặc máy tính bảng
Mẹo:
- Bạn có thể vô hiệu nút "Pin it" cho bất kỳ hình ảnh nào bằng cách thêm

<img src="foo.jpg" nopin="nopin" />

- Và để vô hiệu nút "Pin it" cho tất cả hình ảnh trên trang bằng cách thêm meta tag dưới đây vào trước thẻ </head>

<meta name="pinterest" content="nopin" />

Cách 2: Thêm nút "Pin it" cho hình ảnh với javascript

- Để thêm nút "Pin it" cho hình ảnh chỉ cần: Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML thêm đoạn mã dưới đây vào trước thẻ </body> và Lưu lại

<script>
//<![CDATA[
var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhauiR7y3NrCbyVwaUHJNNCqmhHUTrv34zJN-4C6WYlLCBuJ0JuVWwYZoaOgwM6uC-uTH_HiVMRQsfvRy6owZuRckfSpuo6mQviOinSmULi8j009QNkD2lR1Kl1lL-2xdbivL7ucXI1d7S/s1600/pinit-button.png"; // Nút Pin it
var pinit_button_position = "center"; // Vị trí nút Pin it (topleft,topright,center,bottomleft,bottomright)
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='https://nhatchanh.googlecode.com/svn/blog/pinterest-button.js' type='text/javascript'>
</script>

Bạn có thể vô hiệu nút "Pin it" cho bất kỳ hình ảnh nào bằng cách thêm class="nopin" cho thẻ <img>

<img src="foo.jpg" class="nopin" />

Cách 3: Sử dụng Widget builder của Pinterest

- Trước tiên, truy cập vào địa chỉ: https://business.pinterest.com/en/widget-builder#do_pin_it_button
- Tại phần Button Type chọn tag Image Hover Chỉnh sửa kiểu dáng nút Pin it ở phần Appearance và rê chuột qua ảnh ở phần Preview để xem kết quả hình ảnh nút Pin it!

- Sau khi ưng ý với kết quả vừa chỉnh sửa, copy đoạn mã Pinterest cung cấp
- Đăng nhập Blogger >> Mẫu >> Chỉnh sửa HTML và Paste(dán) nó vào trước </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>

- Thêm async="async" defer="defer" như đoạn code trên để Lưu mẫu không bị báo lỗi
- Thêm thuộc tính nopin="nopin" cho thẻ hình ảnh <img> nếu không muốn hiển thị nút Pin it

<img src="foo.jpg" nopin="nopin" />