Lien pour "épingler" sur Pinterest sans générer de bouton

J'ai une page avec des dizaines ou des centaines d'articles, chacun avec des boutons sociaux. Je n'arrive pas à générer tous les boutons pour chaque url: c'est trop lent (facebook, g +, twitter, pinterest ... pour des centaines de liens). Donc, au lieu du bouton de partage facebook à générer à la volée, j'utilise une simple img pointant vers

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

Lorsque l'utilisateur clique dessus, une fenêtre contextuelle s'ouvre avec le contenu généré par Facebook.

Comment puis-je le faire pour Pinterest? Je ne trouve que du code pour générer le bouton, mais je voudrais éviter du tout js si possible. Y a-t-il quelque chose comme ce qui suit?

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

N'essayez pas de m'obliger à utiliser le bouton js, merci.

Le code standard du bouton Pinterest (que vous pouvez générer ici ) est une <a>balise enveloppant un <img>bouton Pinterest.

Si vous n'incluez pas le pinit.jsscript sur votre page, cette <a>balise fonctionnera "telle quelle". Vous pouvez améliorer l'expérience en enregistrant votre propre gestionnaire de clics sur ces balises qui ouvre une nouvelle fenêtre avec des dimensions appropriées, ou au moins en ajoutant target="_blank"à la balise pour lui faire ouvrir des clics dans une nouvelle fenêtre.

La syntaxe de la balise ressemblerait à:

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

Si l'utilisation des versions JavaScript des boutons de partage ruine les temps de chargement de vos pages, vous pouvez améliorer votre site en utilisant des méthodes de chargement asynchrones. Pour un exemple de faire cela avec le bouton Pinterest, consultez mon projet de bouton GitHub Pinterest avec une syntaxe HTML5 améliorée .

Si vous souhaitez créer un lien hypertexte simple au lieu du bouton Épingler,

Change ça:

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

Pour ça:

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

Ainsi, une URL complète pourrait simplement ressembler à ceci:

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

J'avais la même question. Cela fonctionne très bien dans Wordpress!

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

Pour de tels cas, j'ai trouvé très utile le générateur de lien de partage , il permet de créer des boutons de partage Facebook, Google+, Twitter, Pinterest, LinkedIn.

J'ai trouvé du code pour 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>

Ensuite, vous mettez ce qui suit dans votre 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>

Vous voulez donc que le code épingle le bouton sans installer le bouton? Si c'est le cas, collez simplement ce code à la place de l'url de la page à partir de laquelle vous épinglez. Il devrait fonctionner comme un bouton pin it sans le bouton.

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

Vous pouvez créer un lien personnalisé comme décrit ici à l' aide d'un petit 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; 
});

cela fonctionnera pour tous les liens avec la classe linkPinItqui ont l'image et la description stockées dans les attributs de données HTML 5 data-imageetdata-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> 

voir cet exemple jfiddle