web-dev-qa-db-fra.com

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

J'ai une page avec des dizaines ou des centaines de messages, chacun avec des boutons sociaux. Je ne peux tout simplement pas générer tous les boutons pour chaque URL: elle est trop lente (facebook, g +, twitter, pinterest ... pour des centaines de liens). Ainsi, 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 contextuelle s'ouvre avec le contenu généré par Facebook.

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

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.

buttonpinterest
107
Narcolessico

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

Si vous n'incluez pas le script pinit.js Sur votre page, cette balise <a> Fonctionnera "en l'état". Vous pouvez améliorer l'expérience en enregistrant votre propre gestionnaire de clics sur ces balises qui ouvrent une nouvelle fenêtre avec les dimensions appropriées, ou au moins en ajoutant target="_blank" À la balise pour la rendre ouverte en cliquant dans une nouvelle fenêtre.

La syntaxe de la balise ressemblerait à ceci:

<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 les versions JavaScript des boutons de partage ruinent les temps de chargement de votre page, vous pouvez améliorer votre site en utilisant des méthodes de chargement asynchrones. Pour un exemple de ce faire avec le bouton Pinterest, consultez mon projet bouton GitHub Pinterest avec une syntaxe améliorée de HTML5 .

172
Mike Kibbel

Si vous souhaitez créer un lien hypertexte simple à la place du bouton épingler,

Change ça:

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

Pour ça:

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

Ainsi, un complet 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>

63
Joe Fletcher

J'ai eu 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
hawkdown14

Pour de tels cas, j’ai trouvé très utile le Share Link Generator , cela aide à créer des boutons de partage sur Facebook, Google+, Twitter, Pinterest, LinkedIn.

4
bencergazda

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>
2
isabela rodrigues

Donc vous voulez que le code soit sur le bouton Épingler sans installer le bouton? Si c'est le cas, collez 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)})());

1
mng

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 de classe linkPinItqui 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 ceci exemple jfiddle

0
0x4a6f4672