Đưa ảnh lên Pinterest dễ dàng với Jquery pin it button for images

Pinterest là mạng xã hội chia sẻ hình ảnh lớn nhất hiện nay, ngay từ khi mới thành lập (2009) nó đã được đông đảo người dùng đón nhận, đặc biệt là chị em phụ nữ. Chính vì vậy, ở Việt Nam, nó được gọi là mạng xã hội gái xinh.

Hiện nay Pinterest ngoài việc là mạng xã hội chia sẻ hình ảnh nó còn là công cụ SEO hình ảnh đắc lực cho các seoer. Việc đưa hình ảnh từ website lên mạng xã hội Pinterest có rất nhiều cách. Ví dụ như download ảnh về máy tính, sau đó upload lên Pinterest,..v…v… Nhưng nếu có cách nào thuận tiện hơn thì có lẽ cách Đưa chuột vào ảnh sẽ hiển thị nút Pin ảnh lên Pinterest là cách thuận tiện nhất.

Thêm Pin it button khi di chuột vào ảnh trong WordPress.

Có một số người bạn của tôi hỏi tôi về cách thêm nút Pin để Pin ảnh lên Pinterest. Cách này tôi thấy thật sự rất hay và tiện lợi. Bài viết này, tôi sẽ chỉ bạn cách để có thể Add button Pinterest khi đưa chuột vào ảnh (Add a Pinterest Button Hover to images) nhằm mục đích dễ dàng và tiện lợi cho việc chia sẻ hình ảnh của bạn lên Pinterest.

Sử dụng Plugin WordPress.

Bạn có thể tìm kiếm trong thư viện WordPress Plugin sẽ thấy, Có nhiều Plugin làm được việc này, nhưng cái miễn phí thì không đẹp, cái đẹp thì không miễn phí. Làm thế nào để vừa miễn phí mà lại vừa đẹp?

Tôi sử dụng một Plugin miễn phí, đó là là Jquery pin it button for images. Bạn cài đặt plugin này vào website wordpress của bạn theo cách thông thường

Kết quả bạn nhận được sau khi cài đặt Plugin này là

Nếu bạn đã cảm thấy vừa ý với kết quả hiện tại. Bạn không cần phải thực hiện phần bên dưới. Còn nếu bạn muốn kết quả như website Thành Thái Blog thì hãy thực hiện tiếp phần bên dưới nhé.

Click vào phần Plugin để hiển thị các plugin ta đã cài đặt, tìm đến plugin jQuery Pin It Button For Images mà ta mới cài đặt, click Edit.

Hoặc bạn có thể sử dụng một chương trình nào đó (cuteftp) để download file plugin về máy tính và chỉnh sửa nó

Bạn mở file jquery-pin-it-button-for-images.php

Tìm dòng

img.pinit-hover { opacity: <?php echo (1 - $options['transparency_value']); ?> !important; filter:alpha(opacity=<?php echo (1 - $options['transparency_value']) * 100; ?>) !important; /* For IE8 and earlier

Lúc này, bạn sửa lại thành

img.pinit-hover { /*opacity: <?php echo (1 - $options['transparency_value']); ?> !important;*/ filter:alpha(opacity=<?php echo (1 - $options['transparency_value']) * 100; ?>) !important; /* For IE8 and earlier

Dấu /* và */ nhằm mục đích sẽ thông báo mới trình duyệt sẽ bỏ qua nội dung trong cặp thẻ này và nó sẽ như là phần chú thích cho webmaster, vì thế nó sẽ không hiển thị đối với người dùng.

Để thay đổi hình dáng của button Pinit cũng như kích cỡ của nó, bạn tìm đến dòng

//DEFAULT PIN BUTTON IMAGE

Và thay đổi thông số ở 3 dòng bên dưới

define( "JPIBFI_IMAGE_URL", plugins_url( '/images/pinit-button.png', __FILE__ ) ); define( "JPIBFI_IMAGE_WIDTH", 65 ); define( "JPIBFI_IMAGE_HEIGHT", 41 );

Dòng 1: Thay đổi đường dẫn cũng như hình ảnh của nút bấm Pin ảnh.

Dòng 2: Thay đổi chiều rộng, thay 65 bằng chiều rộng bạn muốn

Dòng 3: Thay đổi chiều cao của nút Pin, thay 41 bằng chiều cao bạn muốn.

Sau đó bấm Update File

Vậy là xong 🙂

Trong quá trình thực hiện Tutorial WordPress này, gặp vướng mắc ở đâu, bạn có thể comment để được mình và các bạn đọc khác hướng dẫn.
Chúc bạn thành công.

Ghi chú: Phiên bản mới nhất hiện nay đã có thể tùy chỉnh hình ảnh của nút Pin, chiều rộng, chiều cao, cũng như giá trị opacity trong Setting của Plugin này.