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
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 Tools4. 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" />
