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>

通过其中任何一个，我可以获得产品的 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>

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

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

Answer 1

这里的大多数答案都没有 urlencode() 为 pinterest 链接生成的查询字符串，所以我有点惊讶他们一直在工作 - 我的方法是 Andrew 的变体，它使用 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>

我唯一关心的是它提供了缓存的图像 url - 而不是直接的。我不知道这个缓存的 url 有多永久。在这种情况下，引用“源”而不是缓存版本似乎更好。但我不确定....

Answer 3

您是否曾尝试在代码中获取当前产品的网址？结果，在产品视图页面中，可用产品的 URL，只需获取此 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 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

这是我用于 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

这是你必须做的：

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

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

希望对你有帮助