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

我有一个页面,上面有数十或数百个帖子,每个帖子都有社交按钮。 我只是不能为每个 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 按钮,谢谢。

144971 次浏览

标准的 Pinterest 按钮代码(您可以使用 在这里产生)是一个 <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 按钮执行此操作的示例,请查看我的 改进了 HTML5语法的 GitHub Pinterest 按钮项目

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

所以你想要的代码,以钉它按钮没有安装按钮?如果是这样的话,只需将这段代码粘贴到您所钉住的页面的 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)})());

如果您想创建一个简单的超链接,而不是引脚它按钮,

改变这一点:

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>

我也有同样的问题,这个在 WordPress 中很好用!

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

您可以使用一个小的 jQuery 脚本创建一个如 给你所描述的自定义链接

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

this will work for all links with class linkPinItwhich have the image and the description stored in the HTML 5 data attributes data-image and 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>

看看这个 举个例子

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