Question

我有一个包含数十或数百个帖子的页面，每个帖子都有社交按钮。我只是无法为每个网址生成所有按钮：它太慢了（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按钮，谢谢。

Answer 1

标准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。

Answer 2

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

改变这个：

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

对此：

http://pinterest.com/pin/create/link/?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>

Answer 3

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

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

Answer 4

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

Answer 5

我找到了一些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>

Answer 6

所以你想要代码到pin按钮而不安装按钮？如果是这样，只需将此代码粘贴到您正在固定的页面的URL位置即可。它应该像没有按钮的按钮那样起作用。

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)})());

Answer 7

您可以使用小型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

链接到pinterest上的“pin it”而不生成按钮

7 个答案: