Tạo nút Pinterest động?

Có cách nào để tạo nút Pinterest động không? Tôi đang cố gắng thêm hỗ trợ Pinterest vào một trang web có nội dung chính là động, vì vậy tôi sẽ chỉ có một nút Ghim duy nhất trong nguồn trang đã ghim bất kỳ nội dung hiện tại nào.Tạo nút Pinterest động?

Tôi không thể tìm ra cách để thực hiện việc này bằng nút Pin It được dựng sẵn, vì nó yêu cầu bạn chỉ định một URL được mã cứng trước thời hạn.

Tuy nhiên, cũng có một kho lưu trữ Pin It không đạt được hiệu quả tôi muốn - nhưng điều đó yêu cầu người dùng phải thêm thủ công vào thanh dấu trang của họ.

Có cách nào để tôi có thể (a) sửa đổi nút Ghim hay (b) bằng cách nào đó tích hợp bookmarklet vào trang của tôi sao cho nó sẽ ghim bất kỳ nội dung trang hiện tại nào?

Nguồn

2012-06-20 daGUY

Đối với bất cứ ai quan tâm, đây là những gì tôi đã làm:

HTML:

<a href="#" id="pinit">Pin It</a>

JS:

$(document).ready(function(){ 
    $("#pinit").click(function(){ 
     $("#pinmarklet").remove(); 
     var e = document.createElement('script'); 
     e.setAttribute('type','text/javascript'); 
     e.setAttribute('charset','UTF-8'); 
     e.setAttribute('id','pinmarklet'); 
     e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e); 
    }); 
});

Thông thường, khi bạn nhấp vào Pin Nó bookmarklet vào thanh bookmark của trình duyệt , nó tự động chèn một tập lệnh (pinmarklet.js) tự động thực hiện một chức năng hiển thị giao diện người dùng Pinterest để chọn hình ảnh bạn muốn ghim.

Tôi đã sửa đổi điều này để tập lệnh được chèn khi liên kết được nhấp thay vào đó (#pinit). Tôi cũng đã thêm id vào tập lệnh (#pinmarklet) để tôi có thể xóa nó ($("#pinmarklet").remove();) và thêm lại mỗi khi liên kết được nhấp - nếu không, các liên kết trùng lặp đến cùng một tập lệnh vẫn chồng chất nếu bạn tiếp tục nhấp vào liên kết.

Dù sao, hiệu ứng cuối cùng là bạn đang thực hiện tương tự như dấu trang, chỉ từ bên trong trang thay thế. Vì vậy, nó hoạt động theo cùng một cách và kéo bất cứ nội dung trang hiện tại nào, nghĩa là bạn có thể thay đổi nội dung khác một cách linh hoạt và nó sẽ được chọn bởi cùng một liên kết "Pin It".

Nguồn

2012-06-21 13:50:47 daGUY

Cảm ơn heaps đã chia sẻ! : D – Jess

Điều này thật tuyệt. Delorian trở lại '12 để vẫn là giải pháp tốt nhất, bằng cách nào đó. – bplittle

Tôi đã tạo một improved Pinterest button that supports an HTML5-valid syntax on GitHub.

Cách bạn sẽ sử dụng giải pháp này phụ thuộc vào việc trang web của bạn tự động điền trang ở phía máy chủ (với PHP hoặc một số ngôn ngữ phụ trợ khác) hay trên phía máy khách thông qua các phương thức JavaScript và AJAX.

Đối với phía máy chủ, bạn sẽ tạo ra HTML5 <div> với data-* thuộc tính của nó điền vào mẫu và sau đó tải các tập tin pinterest-plus-html5.min.js với một thẻ <script> trước khi kết thúc các <body>.

Đối với phía máy khách, bạn sẽ cần tải tệp pinterest-plus-html5.min.js, với thẻ <script> trong <head> hoặc tải không đồng bộ, như được mô tả trong tài liệu. Tiếp theo, bạn sẽ tạo HTML5 <div> bằng JavaScript, chèn động hoặc thay thế thẻ nút Pinterest trên trang rồi gọi PinterestPlus.pinit() để chuyển đổi <div> thành nút Pinterest .

Tôi hy vọng điều này sẽ hữu ích!

Nguồn

2012-06-26 16:32:20

Một giải pháp phía máy chủ đơn giản có lẽ tốt hơn so với phía máy khách. The code is here (PHP, WordPress hoặc ASP)

Nguồn

2013-01-17 11:57:28 user1987005

thêm một số mã với câu trả lời của bạn. Vì vậy, người dùng có thể tham khảo nó. –

Chân nút pintrest được điều khiển bởi thông số trong nút href.

Nguồn

2013-05-17 04:29:06 chuckles

Dynamic Link cho Pinterest

Dưới mã sẽ tạo ra nút Pinterest động cho các trang khác nhau.

<a href="http://pinterest.com/pin/create/button/?url=http://www.printe-z.com/booked-forms.html&amp;media=http://www.printe-z.com/image/cache/data/newImages/business_forms_Booked-200x120.jpg&amp;description=description will come here" class="pin-it-button" count-layout="none"> 
<img src="http://assets.pinterest.com/images/PinExt.png" data-cfsrc="//assets.pinterest.com/images/PinExt.png" title="Pin It" border="0"> 
</a>

Nguồn

2013-08-30 09:26:42 Cnab

Pinterest cung cấp một "xây dựng" chức năng để xây dựng các nút năng động. Điều đó có nghĩa là bạn có thể tạo các neo của Pinterest động & sử dụng chức năng này để chuyển đổi nó thành nút Pinterest, giống như cách mà pinit.js thực hiện khi tải.

Dưới đây giải thích làm thế nào bạn có thể chỉ định tên của hàm: http://porizi.wordpress.com/2013/11/07/dynamic-pinterest-button/

Nguồn

2013-11-11 12:27:29 phidias

Tôi có một trang với một bộ sưu tập toàn màn hình, chỉ với một nút Pinterest ở dưới cùng của trang, tôi đã kết thúc trong trang này tìm kiếm một giải pháp. Với không thành công tôi đến với điều này:

var imgurl = player.children(".gallery-image").eq(next).css("background-image").match(/\((.+)\)/)[1]; 
$(".pintrest-container > a").attr("data-pin-href", "//www.pinterest.com/pin/create/button/?url=http://mywebsite.com/&media=" + imgurl + "&description=My Website");

Các regex /$(.+)$/ rất hữu ích để phân tích url hình ảnh trong các thuộc tính nền, vì định dạng của nó là url('image.jpg'), do đó loại bỏ các regex url('') và đưa ra chỉ con đường.

Sau đó, tôi chỉ đặt thuộc tính data-pin-href bằng hình ảnh mới của tôi, hoạt động tuyệt vời!

Nguồn

2014-09-11 15:43:44

Tạo nút Pinterest động?

Trả lời

Các vấn đề liên quan