在不生成按钮的情况下链接到 pinterest 上的“固定”

Posted 2023-02-22

【中文标题】在不生成按钮的情况下链接到 pinterest 上的“固定”

【英文标题】：Link to "pin it" on pinterest without generating a button

【发布时间】：2012-05-28 05:38:25

【问题描述】：

我有一个包含数十或数百个帖子的页面，每个帖子都有社交按钮。 我只是无法为每个 url 生成所有按钮：它太慢了（facebook、g+、twitter、pinterest ......对于数百个链接）。因此，我使用一个简单的 img 指向

，而不是动态生成 facebook 分享按钮

https://www.facebook.com/sharer.php?u=$url_of_current_post&t=

当用户点击它时，会打开一个弹出窗口，其中包含 facebook 生成的内容。

我怎样才能为 Pinterest 做到这一点？我只找到生成按钮的代码，但如果可能的话，我想完全避免使用 js。有没有像下面这样的？

http://pinterest.com/pinthis?url=$url_of_current_post

请不要试图让我使用js按钮，谢谢。

【参考方案1】：

我也有同样的问题。这在 Wordpress 中效果很好！

<a href="//pinterest.com/pin/create/link/?url=<?php the_permalink();?>&amp;description=<?php the_title();?>">Pin this</a>

【参考方案2】：

对于这种情况，我发现Share Link Generator 非常有用，它有助于创建 Facebook、Google+、Twitter、Pinterest、LinkedIn 分享按钮。

【参考方案3】：

您可以使用一个小的 jQuery 脚本按照here 的描述创建自定义链接

$('.linkPinIt').click(function()
    var url = $(this).attr('href');
    var media = $(this).attr('data-image');
    var desc = $(this).attr('data-desc');
    window.open("//www.pinterest.com/pin/create/button/"+
    "?url="+url+
    "&media="+media+
    "&description="+desc,"_blank","top=0,right=0,width=750,height=320");
    return false; 
);

这将适用于所有具有类 linkPinIt 的链接，这些链接具有存储在 html 5 数据属性 data-image 和 data-desc 中的图像和描述

<a href="https%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F" 
   data-image="https%3A%2F%2Fc4.staticflickr.com%2F8%2F7027%2F6851755809_df5b2051c9_b.jpg" 
   data-desc="Title for Pinterest Photo" class="linkPinIt">
    Pin it!
</a> 

看到这个jfiddle example

【参考方案4】：

如果你想创建一个简单的超链接而不是固定按钮，

改变这个：

http://pinterest.com/pin/create/button/?url=

到这里：

http://pinterest.com/pin/create/link/?url=

因此，一个完整的 URL 可能只是如下所示：

<a href="//pinterest.com/pin/create/link/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest">Pin it</a>

【讨论】：

我更喜欢创建自己的链接。这仍然有效，还是他们改变了它？

如果您有另一个 pinterest 按钮（并加载了 pinit.js 脚本），接受的答案将生成一个按钮。将 url 更改为具有“链接”而不是“按钮”将允许您在页脚中有一个 pinterest 按钮，并在页面的某处有一个自定义 pinterest 链接。这应该是公认的答案。

感谢您的回答，正是我想要的。我认为这应该是正确的答案:)

我赞成这个答案，但后来发现 pinterest 在尝试固定时抛出错误：Parameter 'method' (value link) is not one of unknown, uploaded, scraped, bookmarklet, email, iphone, button, ipad, android, android_tablet, api_sdk, extension, api_other, bad.。解决方案是将 url 保留为 button 但忽略 pinterest 脚本。见***.com/a/15035520/440646

目前未引发错误：P 用作属性列表共享链接：http://pinterest.com/pin/create/link/?url=URL&media=COVERIMAGE&description=ADDRESS

【参考方案5】：

标准的 Pinterest 按钮代码（您可以generate here）是一个 <a> 标记，包裹着 Pinterest 按钮的 <img>。

如果您的页面中未包含 pinit.js 脚​​本，则此 <a> 标记将“按原样”工作。您可以通过在这些标签上注册自己的点击处理程序来改善体验，以打开具有适当尺寸的新窗口，或者至少将target="_blank" 添加到标签以使其在新窗口中打开点击。

标签语法如下：

<a href="http://pinterest.com/pin/create/button/?url=URI-encoded URL of the page to pin&media=URI-encoded URL of the image to pin&description=optional URI-encoded description" class="pin-it-button" count-layout="horizontal">
    <img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
</a>

如果使用 javascript 版本的共享按钮会破坏您的页面加载时间，您可以使用异步加载方法来改进您的网站。有关使用 Pinterest 按钮执行此操作的示例，请查看我的 GitHub Pinterest button project with an improved HTML5 syntax。

【讨论】：

很好的答案，谢谢！也请在 developer.pinterest.com 上查看我们的页面，这里：developers.pinterest.com/pin_it

Pin It 小部件构建器business.pinterest.com/widget-builder/#do_pin_it_button 也可用于获取一些示例代码，然后您可以通过编程方式对其进行自定义。

@KentBrewster - 对于它的价值，我在访问您的页面后遇到了同样的问题。它拥有的信息都很棒，但它没有谈论 URL 参数或 URL 可以在没有 javascript 的情况下使用（在动态创建按钮的上下文中），就像 facebook 和 twitter 等效页面一样。

我在描述中的 urlencode 有点乱。知道为什么吗？示例：“此时，我’我只是要从另一个帖子中复制和粘贴，因为…时间。” -- 显然不太理想。

如果用户已经在 pinterest 中登录，上述答案可以正常工作，否则即使在成功登录后它也只会停留在 pinterest 主页中。有什么解决办法吗？

【参考方案6】：

所以您希望在不安装按钮的情况下将代码固定在按钮上？如果是这样，只需将此代码粘贴到您要固定的页面的 url 的位置。它应该用作没有按钮的 pin it 按钮。

javascript:void((function()var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e))());

【讨论】：

这对我有用，但有两个问题。您如何维护弹出窗口？另外，随机数学有什么作用？

这是 Pinterest 的“书签”中的官方代码。它通常用作您保存到书签的链接，并且可以单击您访问的任何网站以调出 Pinterest 对话，但这种方式也可以正常工作，并且易于实施。

他们在 API 文档中非常明确地告诉你不要这样做。仅仅因为你可以，并不意味着你应该。

【参考方案7】：

我找到了一些wordpress的代码：

 <script type="text/javascript">

    function insert_pinterest($content) 
        global $post;
        $posturl = urlencode(get_permalink()); //Get the post URL
        $pinspan = '<span class="pinterest-button">';
     $pinurl = '';
     $pinend = '</span>';
        $pattern = '//i';
        $replacement = $pinspan.$pinurl.'$2.$3'.$pindescription.$pinfinish.''.$pinend;
        $content = preg_replace( $pattern, $replacement, $content );
        //Fix the link problem
        $newpattern = '/<span class="pinterest-button"><\/a><\/span><\/a>/i';
     $replacement = '';
     $content = preg_replace( $newpattern, $replacement, $content );
     return $content;
    
    add_filter( 'the_content', 'insert_pinterest' );

    </script>

然后你在你的 PHP 中加入以下内容：

<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>">Pin It</a>