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

116

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 de o 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 para o Pinterest? 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.

Narcolessico
fonte

Respostas:

183

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

Se você não incluir o pinit.jsscript em sua página, esta <a>tag funcionará "como está". Você pode melhorar a experiência registrando seu próprio manipulador de cliques nessas tags, que abre uma nova janela com as dimensões apropriadas, ou pelo menos adicionando target="_blank"à tag para fazer com que ela abra 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 usar as 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 obter um exemplo de como fazer isso com o botão Pinterest, verifique meu projeto de botão GitHub Pinterest com uma sintaxe HTML5 aprimorada .

Mike Kibbel
fonte
3
Ótima resposta, obrigado! Consulte também nossa página em developer.pinterest.com, aqui: developers.pinterest.com/pin_it
Kent Brewster
O construtor de widget Pin It business.pinterest.com/widget-builder/#do_pin_it_button também é útil para obter alguns códigos de amostra que podem ser personalizados de forma programática.
William Denniss
6
@KentBrewster - Pelo que vale a pena, acabei aqui com a mesma dúvida depois de visitar sua página. As informações que ele tem são ótimas, mas não fala sobre os parâmetros da URL ou que a URL pode ser usada sem javascript (no contexto da criação de botões em tempo real) como fazem as páginas equivalentes do Facebook e Twitter.
xr280xr
Meu urlencode na descrição é um pouco instável. Alguma ideia do porquê? Exemplo: "Neste ponto, eu & amp; # 8217; vou apenas copiar e colar de outra postagem porque & amp; # 8230; hora." - obviamente menos do que o ideal.
Imperativo
2
A resposta acima funciona bem se o usuário já estiver logado no pinterest, caso contrário, ele apenas permanecerá na página inicial do pinterest mesmo após o login bem-sucedido. Alguma solução?
Uday
69

Se você quiser 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=

Portanto, um URL completo pode ter a seguinte aparência:

<a href="https://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>

Joe Fletcher
fonte
2
Prefiro fazer meus próprios links. Ainda está funcionando ou eles mudaram?
nouveau,
6
A resposta aceita irá gerar um botão se você tiver outro botão do pinterest (e o script pinit.js carregado). Alterar o url para 'link' em vez de 'botão' permitirá que você tenha um botão do pinterest em seu rodapé e um link personalizado do pinterest em algum lugar de sua página. Esta deve ser a resposta aceita.
ashack de
1
Obrigado pela sua resposta, exatamente o que eu estava procurando. Esta deve ser a resposta certa na minha opinião :)
patricia
3
I upvoted esta resposta, mas mais tarde descobriu que Pinterest gera um erro ao tentar pin: 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.. A solução é manter o url, buttonmas ignorar o script do pinterest. consulte stackoverflow.com/a/15035520/440646
descansando em
1
não gera um erro a partir de agora: P usando como um link de compartilhamento de lista de propriedade:http://pinterest.com/pin/create/link/?url=URL&media=COVERIMAGE&description=ADDRESS
Jeannie
6

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

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

Para tais casos, achei muito útil o Gerador de Link de Compartilhamento , que ajuda a criar botões de compartilhamento no Facebook, Google+, Twitter, Pinterest, LinkedIn.

Bencergazda
fonte
2

Encontrei alguns códigos 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>

Em seguida, você coloca o seguinte em 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>
isabela rodrigues
fonte
2

Então você quer o código no botão fixá-lo sem instalar o botão? Em caso afirmativo, cole este código no lugar do url da página da qual 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)})());

mng
fonte
1
Isso funcionou para mim, mas 2 perguntas. Como você pode manter o pop-up? Além disso, o que a matemática aleatória faz?
Pat de
É o código oficial do Pinterest de seu 'bookmarklet'. Normalmente é usado como um link que você salva em seus favoritos e pode clicar em qualquer site que você visita para abrir um diálogo do Pinterest, mas também funciona bem assim e é fácil de implementar.
ConorLuddy
1
Eles dizem especificamente que você não deve fazer isso nos documentos da API. Só porque você pode, não significa que você deva.
Imperativo
0

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 têm a imagem e a descrição armazenadas nos atributos de dados HTML 5 data-imageedata-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 este exemplo jfiddle

0x4a6f4672
fonte