創建一個動態Pinterest按鈕？

有沒有什麼辦法可以創建一個動態的Pinterest按鈕？我試圖將Pinterest支持添加到主要內容是動態的網站，因此我只在頁面源中有一個Pin It按鈕，用於固定當前的內容。創建一個動態Pinterest按鈕？

我不能找出一種方法來做到這一點與預製Pin It按鈕，因爲它需要你提前指定一個硬編碼的URL。

但是，還有一個Pin It小書籤可以達到我想要的效果 - 但這需要用戶手動將其添加到他們的書籤欄中。

有沒有什麼辦法可以（a）修改Pin It按鈕，或者（b）以某種方式將小書籤集成到我的頁面中，以便固定當前頁面內容。

2012-06-20 daGUY

的人誰的興趣，這裏是我所做的：

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); 
    }); 
});

通常，當你點擊瀏覽器的書籤欄的PIN書籤，它會動態插入一個腳本（pinmarklet.js），該腳本自動執行一個可以調出Pinterest UI的功能，以選擇要固定的圖像。

我對此進行了修改，以便在單擊鏈接時插入腳本（#pinit）。我還在腳本（#pinmarklet）中添加了一個id，以便我可以刪除它（$("#pinmarklet").remove();），並在每次單擊鏈接時重新添加它 - 否則，如果您不斷點擊鏈接，則重複鏈接到同一腳本的鏈接不斷堆積。

無論如何，最終的效果就是您要做的和書籤一樣，只是在頁面內部而已。因此，它以相同的方式工作，並拉取當前頁面內容，這意味着您可以動態更改其他內容，並且可以通過同一個「Pin It」鏈接獲取。

來源

2012-06-21 13:50:47 daGUY

感謝堆分享！：D – Jess

這太好了。不知怎的，Delorian回到'12仍然是最好的解決方案。 – bplittle

我已經構建了improved Pinterest button that supports an HTML5-valid syntax on GitHub。

您使用此解決方案的方式取決於您的站點是動態填充服務器端（使用PHP還是其他一些後端語言）的頁面，或者是通過JavaScript和AJAX方法在客戶端使用。

對於服務器端，將生成的HTML5 <div>與其在模板填寫data-*屬性，然後<body>結束前加載pinterest-plus-html5.min.js文件用<script>標籤。

對於客戶端，如文檔中所述，您需要加載pinterest-plus-html5.min.js文件，或者在<head>中加載<script>標記或通過異步加載。接下來，您將生成帶有JavaScript的HTML5 <div>，動態插入或替換頁面上的Pinterest按鈕標記，然後致電PinterestPlus.pinit()將<div>轉換爲Pinterest按鈕。

我希望這有助於！

來源

2012-06-26 16:32:20

一個簡單的服務器端解決方案可能比客戶端更好。 The code is here（PHP，WordPress或ASP）

來源

2013-01-17 11:57:28 user1987005

添加一些代碼與您的答案。所以用戶可以參考它。 –

pintrest按鈕引腳由按鈕的href中的參數控制。

來源

2013-05-17 04:29:06 chuckles

動態鏈接，Pinterest的

下面的代碼會產生不同的頁面動態Pinterest的按鈕。

<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>

來源

2013-08-30 09:26:42 Cnab

Pinterest的提供了一種用於構建動態按鈕的「建立」功能。這意味着您可以動態生成您的Pinterest錨點&使用此函數將其轉換爲Pinterest按鈕，這與pinit.js加載時的方式相同。

這裏解釋如何指定函數的名稱：在頁面的底部http://porizi.wordpress.com/2013/11/07/dynamic-pinterest-button/

來源

2013-11-11 12:27:29 phidias

我有一個全屏畫廊的頁面時，只有一個Pinterest的按鈕，我結束了在此頁尋找解決方案。由於沒有成功，我想出了這個：

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");

正則表達式/$(.+)$/是有用的解析背景屬性的圖像的URL，因爲它的格式是url('image.jpg')，所以正則表達式刪除url('')，並給出了路徑。

然後我只是設置屬性data-pin-href與我的新形象，太棒了！

來源

2014-09-11 15:43:44

創建一個動態Pinterest按鈕？

回答

相關問題