Magento：在產品詳細信息頁面添加Pinterest「Pin it」按鈕

Question

我試圖將"Pin it" button from Pinterest添加到我們網站上的產品詳細信息頁面。

到目前爲止，我已經試過：

<a href="http://pinterest.com/pin/create/button/?url=<?php echo trim(Mage::registry('current_product')->getProductUrl()) ?>&media;=<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(265) ?>&description;=<?php echo Mage::registry('current_product')->getName(); ?>" class="pin-it-button" count-layout="none">Pin It</a> 
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script> 

和

<a href="http://pinterest.com/pin/create/button/?url=<?php echo trim(Mage::registry(\'current_product\')->getProductUrl()) ?>&media;=<?php echo Mage::helper('catalog/image')->init(Mage::registry('current_product'), 'small_image')->resize(900,900);?>&description;=<?php echo Mage::registry('current_product')->getName(); ?>" class="pin-it-button" count-layout="none">Pin It</a> 
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script> 

與任何這些，我可以得到項目Service items的網址和產品的名字，但我不能讓產品的形象。所以，後不工作（它需要所有3項工作：URL，媒體和說明）

當我試試這個：

<a href="http://pinterest.com/pin/create/button/?url=http://eberjey.com&media;=<?php echo Mage::helper('catalog/image')->init(Mage::registry('current_product'), 'small_image')->resize(900,900);?>&description;=<?php echo Mage::registry('current_product')->getName(); ?>" class="pin-it-button" count-layout="none">Pin It</a> 
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script> 

我可以發佈產品的形象，但URL不是動態（我只是使用網站的絕對URL）。

有關如何在我的產品詳細信息頁面中實現此按鈕的任何想法？

Answer 1

你有沒有試過在你的代碼中獲取當前的產品url？其結果是，在產品視圖頁面，提供的產品的網址，就得到這個網址，如下所示：

$curProductUrl = $this->helper('core/url')->getCurrentUrl(); 

// or we can take product id then use in the code 
$_product = $this->getProduct(); 
$_id = $_product->getId(); 

$_productUrl = $_product->getProductUrl(); 
$_smallImageUrl = $_product->getSmallImageUrl(); 

Answer 2

這似乎爲我工作：

<a href="http://pinterest.com/pin/create/button/?url=<?php echo trim(Mage::registry('current_product')->getProductUrl()) ?>&media=<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>&description=<?php echo Mage::registry('current_product')->getName(); ?>" class="pin-it-button" count-layout="none">Pin It</a> 
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script> 

我只關心這是它提供了緩存的圖像url - 而不是一個直接的。我不知道這個緩存的url是多久的。在這種情況下，引用「源」而不是緩存版本似乎更好。但我不確定....

Answer 3

試試將此圖片添加到Pinterest。它對我來說效果很好。

$this->helper('catalog/image')->init($_product, 'image')->resize(150) 

Answer 4

您生成的URL在每個參數後面都有分號。那是故意的嗎？ （...替換您<? php ?>塊）

<a href="http://pinterest.com/pin/create/button/?url=...&media;=...&description;=..." class="pin-it-button" count-layout="none">Pin It</a>

&media;，&description;。

嘗試刪除分號。此外，如果您的輸出不是自動HTML轉義，則＆符號應該是HTML實體，而不是：&media=和&description=。

Answer 5

這裏是你必須做的：

複製並粘貼此代碼到你的主題view.phtml文件和你的所有設置：

<a href="http://pinterest.com/pin/create/button/?media=<?php echo $this->helper('catalog/image')->init($_product, 'small_image'); ?>&description=<?php echo $_product->getdescription() ?>&url=<?php echo $_product->getProductUrl() ?>" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a> 

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script> 

這將加載產品說明，形象，鏈接

有時候，如果你以後把URL在動態url中，它會卡住加載。所以只需複製/粘貼上面的代碼和完成。不需要定製。

Answer 6

這是我的版本，用於magento產品頁面的Pin It按鈕，它的工作原理非常漂亮。 我使用產品的規範網址。對於描述：我首先插入產品的名稱，然後是兩個中斷（％0A），然後是產品的描述。產品描述的htmlentities代碼將轉換您擁有的所有引號，以便Pinterest可以讀取它。

<!--START PIN BUTTON--> 
    <a href="http://pinterest.com/pin/create/button/?url=<?php echo $_product->getProductUrl() ?>&media=<?php echo trim($this->helper('catalog/image')->init($_product, 'image')); ?>&description=<?php echo trim(Mage::registry('current_product')->getName()); ?>%20%0A%0A<?php echo htmlentities($_product->getdescription(), ENT_QUOTES) ?>" class="pin-it-button" count-layout="horizontal"></a> 

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script> 
<!--END PIN BUTTON--> 

Answer 7

這裏的大多數答案不進行urlencode（）這是對Pinterest的鏈接生成的查詢字符串，所以我有點驚訝，他們一直在努力 - 我的做法一直是安德魯的使用的一個變種http_build_query（）爲我做到這一點。

<!--START PIN BUTTON--> 
<?php 
    $_pinlink['url'] = $_product->getProductUrl();      
    $_pinlink['media'] = $this->helper('catalog/image')->init($_product, 'image')->__toString() ; 
    $_pinlink['description'] = $_helper->productAttribute($_product, $_product->getName(), 'name') . " - " . strip_tags($_product->getDescription());                     
?> 
<a href="http://pinterest.com/pin/create/button/?<?php echo http_build_query($_pinlink) ?>" class="pin-it-button" count-layout="horizontal"></a>      
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script> 
<!--END PIN BUTTON--> 

我也注意到，Pinterest的剝離張貼說明所有的HTML標籤，所以似乎沒有：放在模板/目錄/產品/ view.phtml內部時

下面的代碼會工作在傳遞它們的過程中有很多點 - 因此描述中的條帶標籤。

Answer 8

這個工作對我來說：

<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonPin" data-pin-config="beside" > 
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_white_20.png" /></a> 
    <script type="text/javascript"> 
    (function(d){ 
     var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT'); 
     p.type = 'text/javascript'; 
     p.async = true; 
     p.src = '//assets.pinterest.com/js/pinit.js'; 
     f.parentNode.insertBefore(p, f); 
    }(document)); 
</script> 

，但它使用的緩存圖片... 我試圖使用原始圖像路徑，但沒有成功，直到如今。

希望這有助於