Collegamento a "Pin It" su Pinterest senza generare un pulsante

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

  •  12-12-2019
  •  | 
  •  

Domanda

Ho una pagina con decine o centinaia di post, ognuno con i pulsanti sociali. Non riesco a generare tutti i pulsanti per ogni URL: è troppo lento (Facebook, G +, Twitter, Pinterest ... per centinaia di collegamenti).Quindi, invece del pulsante Condividi Facebook da generare al volo, uso un semplice img che punta a 

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

Quando l'utente fa clic su di esso, una finestra popup si apre con il contenuto generato da Facebook.

Come posso farlo per Pinterest?Trovo solo attorno al codice per generare il pulsante, ma vorrei evitare JS in tutto il possibile.C'è qualcosa come il seguente? 

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

Si prega di non provare a farmi usare il pulsante JS, grazie.

È stato utile?

Soluzione

Il codice del pulsante Pinterest standard (che è possibile Genera qui ), è un tag <a> che avvolge un <img> del pulsante Pinterest.

Se non si include lo script pinit.js sulla pagina, questo tag <a> funzionerà "AS-IS".È possibile migliorare l'esperienza registrando il tuo gestore di clic su questi tag che apre una nuova finestra con dimensioni appropriate o almeno aggiungendo target="_blank" al tag per renderlo aperto clic in una nuova finestra.

La sintassi tag sarebbe simile 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 l'utilizzo delle versioni JavaScript dei pulsanti di condivisione vengono rovinando i tempi di caricamento della pagina, è possibile migliorare il tuo sito utilizzando metodi di caricamento asincrono.Per un esempio di farlo con il pulsante Pinterest, controlla il mio GitHub Pinterest Button Project con una sintassi HTML5 migliorata .

Altri suggerimenti

Se si desidera creare un semplice collegamento ipertestuale anziché il pulsante PIN IT,

Cambia questo: 

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

A questo: 

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

Allora, un URL URL completo potrebbe semplicemente assomigliare a questo:

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

Ho avuto la stessa domanda.Questo funziona alla grande in WordPress! 

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

Per questi casi, ho trovato molto utile il Condividi il generatore di collegamento , aiuta a creare Facebook, Google+, Twitter, Pinterest, Pulsanti di condivisione LinkedIn.

Ho trovato un codice per 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>
.

Quindi inserisci il seguente nel tuo 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>
.

Quindi vuoi il codice al PIN Pulsante IT senza installare il pulsante?Se è così semplicemente incollare questo codice nel luogo dell'URL della pagina da cui stai bloccando.Dovrebbe funzionare come un pulsante Pin IT senza il pulsante.

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

È possibile creare un link personalizzato come descritto qui usando un piccolo 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; 
});
.

Questo funzionerà per tutti i collegamenti con la classe linkPinItwhich ha l'immagine e la descrizione memorizzata negli attributi dati 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>
.

Vedi questo JFIDDLE Esempio

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top