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> 

，但它使用的缓存图片... 我试图使用原始图像路径，但没有成功，直到如今。

希望这有助于