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>

有了这些，我可以获得产品的URL和产品名称，但我无法获得产品的图像。所以帖子不起作用（它需要所有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>

我可以发布产品的图片，但网址不是动态的（我只是使用网站的绝对网址）。

关于如何在产品详细信息页面中实现此按钮的任何想法？

Answer 1

这里的大多数答案都没有urlencode（）为pinterest链接生成的查询字符串，所以我有点惊讶他们一直在工作 - 我的方法是使用http_build_query（）的安德鲁的变种为我这样做。

以下代码放在template / catalog / product / view.phtml中时可以使用：

<!--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标签，因此传递它们似乎没什么意义 - 因此描述中的条带标记。

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>

我唯一担心的是它给出了缓存的图像网址 - 而不是直接的图像网址。我不知道这个缓存网址的永久性。在这个实例中引用'source'而不是缓存版本似乎更好。但我不确定......

Answer 3

您是否曾尝试在代码中获取当前产品网址？因此，在产品视图页面中，可用产品的网址，只需获取如下所示的网址：

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

尝试将此图像添加到Pinterest。它对我有用。

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

Answer 5

您生成的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 6

以下是您需要做的事情：

将此代码复制并粘贴到您的主题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>

这将加载产品说明，图片和链接

有时，如果您稍后将动态网址放入网址，则会出现加载错误。所以只需复制/粘贴上面的代码即可。无需定制。

Answer 7

这是我的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 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>

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

希望这有帮助

Magento：将Pinterest“Pin it”按钮添加到产品详细信息页面

8 个答案: