Link para “fixar” no pinterest sem gerar botão

StackOverflow https://stackoverflow.com//questions/10690019

  •  12-12-2019
  •  | 
  •  

Pergunta

Tenho uma página com dezenas ou centenas de posts, cada um com botões sociais.Simplesmente não consigo gerar todos os botões para cada URL:é muito lento (facebook, g+, twitter, pinterest...para centenas de links).Então, em vez do botão de compartilhamento do Facebook ser gerado instantaneamente, eu uso uma imagem simples apontando para

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

Quando o usuário clica nele, uma janela pop-up é aberta com conteúdo gerado pelo Facebook.

Como posso fazer isso no Pinterest?Eu só encontro código para gerar o botão, mas gostaria de evitar js, se possível.Existe algo como o seguinte?

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

Por favor, não tente me fazer usar o botão js, ​​obrigado.

Foi útil?

Solução

O código do botão padrão do Pinterest (que você pode gerar aqui), é um <a> tag envolvendo um <img> do botão Pinterest.

Se você não incluir o pinit.js script em sua página, este <a> tag funcionará "como está".Você pode melhorar a experiência registrando seu próprio manipulador de cliques nessas tags que abrem uma nova janela com dimensões apropriadas ou, pelo menos, adicionando target="_blank" à tag para abri-la cliques em uma nova janela.

A sintaxe da tag seria semelhante a:

<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>

Se o uso das versões JavaScript dos botões de compartilhamento está prejudicando o tempo de carregamento da página, você pode melhorar o seu site usando métodos de carregamento assíncronos.Para ver um exemplo de como fazer isso com o botão do Pinterest, confira meu Projeto de botão GitHub Pinterest com sintaxe HTML5 aprimorada.

Outras dicas

Se você deseja criar um hiperlink simples em vez do botão fixá-lo,

Mude isso:

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

Para isso:

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

Então, um completo URL pode simplesmente ficar assim:

<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>

Eu tive a mesma pergunta.Isso funciona muito bem no Wordpress!

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

Para tais casos, achei muito útil o Compartilhar gerador de link, ajuda a criar botões de compartilhamento no Facebook, Google+, Twitter, Pinterest, LinkedIn.

Encontrei um código para 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>

Então você coloca o seguinte no seu 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>

Então você quer o código para fixar o botão sem instalar o botão?Nesse caso, basta colar este código no lugar do URL da página que você está fixando.Deve funcionar como um botão de fixação sem o botão.

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

Você pode criar um link personalizado conforme descrito aqui usando um pequeno script 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; 
});

isso funcionará para todos os links com classe linkPinItque possuem a imagem e a descrição armazenadas nos atributos de dados HTML 5 data-image e 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>

Veja isso exemplo jfiddle

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top