链接到“pin it”pinterest而不生成button

我有一个有数十或数百个post的页面,每个post都有社交button。 我只是不能生成每个url的所有button:它太慢(Facebook,G +,Twitter,pinterest …数百个链接)。 所以,而不是即时生成的Facebook分享button,我用一个简单的IMG指向

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

当用户点击它时,会popup一个窗口,其中包含由facebook生成的内容。

我怎样才能做到这一点的Pinterest? 我只能find代码生成button,但我想尽可能避免js。 有没有像下面这样的东西?

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

请不要试图让我使用jsbutton,谢谢。

标准的Pinterestbutton代码(您可以在这里生成 )是包装Pinterestbutton的<img><a>标签。

如果您的页面上没有包含pinit.js脚本,则此<a>标签将按原样工作。 您可以通过在这些标签上注册自己的点击处理程序来改善体验,这些标签会打开一个具有适当尺寸的新窗口,或者至less在标签中添加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.comhttp://img.dovov.comPinExt.png" title="Pin It" /> </a> 

如果使用JavaScript版本的共享button损坏了您的页面加载时间,则可以使用asynchronous加载方法来改善您的网站。 有关Pinterestbutton的示例,请查看我的GitHub Pinterestbutton项目,并使用改进的HTML5语法 。

如果你想创build一个简单的超链接而不是pinbutton,

改变这个:

 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>

我有同样的问题。 这在Wordpress中很好用!

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

对于这种情况,我发现共享链接生成器非常有用,它有助于创buildFacebook,Google +,Twitter,Pinterest,LinkedIn共享button。

我发现了一些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> 

所以你想要的代码来钉的button,而不需要安装button? 如果是这样的话,只需将此代码粘贴到您所在的网页的url即可。 它应该作为一个别针button没有button。

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

你可以使用一个小的jQuery脚本来创build一个自定义链接

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

这将适用于链接类的所有链接,这些链接具有存储在HTML 5数据属性中data-imagedata-desc data-imagedata-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的例子