Lien vers" pin it " sur pinterest sans générer de bouton

j'ai une page avec des dizaines ou des centaines de postes, chacun avec boutons sociaux. Je ne peux 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 un simple img pointant vers 

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

lorsque l'utilisateur clique dessus, une fenêtre popup s'ouvre avec du contenu généré par facebook.

Comment puis-je le faire pour Pinterest? Je ne trouve autour du code pour générer le bouton, mais je voudrais éviter js du tout si possible. Est-il quelque chose de ce genre? 

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

S'il vous plaît n'essayez pas de me faire utiliser le bouton js, merci.

95
demandé sur Narcolessico 2012-05-21 21:45:31

7 réponses

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

si vous n'incluez pas le script pinit.js sur votre page, cette balise <a> fonctionnera"tel quel". Vous pouvez améliorer l'expérience en enregistrant votre propre gestionnaire de clic sur ces étiquettes qui ouvre une nouvelle fenêtre avec les dimensions appropriées, ou au moins en ajoutant target="_blank" à l'étiquette à faire ouvrir les clics dans une nouvelle fenêtre.

la syntaxe de l'étiquette 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 ruinent vos temps de chargement de page, vous pouvez améliorer votre site en utilisant des méthodes de chargement asynchrone. Pour un exemple de faire cela avec le bouton Pinterest, consultez mon projet de bouton Pinterest GitHub avec une syntaxe HTML5 améliorée .

160
répondu Mike Kibbel 2013-08-23 11:57:09

si vous voulez créer un lien hypertexte simple au lieu du bouton pin it,

Modifiez ce qui suit: 

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

à ceci: 

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

ainsi, une URL pourrait simplement ressembler à ceci:

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

57
répondu Joe Fletcher 2014-11-24 15:56:54

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

<a href="//pinterest.com/pin/create/link/?url=<?php the_permalink();?>&amp;description=<?php the_title();?>">Pin this</a>
6
répondu hawkdown14 2017-10-11 15:08:19

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

4
répondu bencergazda 2015-08-06 08:52:50

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.'.'.$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>

puis 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>
2
répondu isabela rodrigues 2012-09-27 15:27:10

donc vous voulez le code à la broche il bouton sans installer le bouton? Si c'est le cas, il suffit de coller ce code à l'endroit de l'url de la page que vous épinglez. Il fonctionne 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)})());

1
répondu mng 2012-12-26 06:44:44

vous pouvez créer un lien personnalisé comme décrit ici en utilisant 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 linkPinIt qui ont l'image et la description stockées dans les attributs de données HTML 5 data-image et 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>

voir ce jfiddle example

0
répondu 0x4a6f4672 2017-05-23 11:47:02