Crea un pulsante dinamico Pinterest?

C'è un modo per creare un pulsante dinamico di Pinterest? Sto cercando di aggiungere il supporto di Pinterest a un sito in cui il contenuto principale è dinamico, quindi avrei solo un singolo pulsante "Si" nell'origine della pagina che ha bloccato qualunque sia il contenuto corrente.Crea un pulsante dinamico Pinterest?

Non riesco a capire un modo per farlo con il pulsante Pin It precostruito, perché richiede di specificare un URL hardcoded in anticipo.

Tuttavia, c'è anche un bookmark Pin It che raggiunge l'effetto desiderato, ma che richiede all'utente di aggiungerlo manualmente alla barra dei segnalibri.

C'è un modo che sia possibile (a) modificare il pulsante Pin It o (b) in qualche modo integrare il bookmarklet nella mia pagina in modo tale da bloccare qualunque sia il contenuto della pagina corrente?

fonte

2012-06-20 daGUY

Per chiunque sia interessato, ecco quello che ho fatto:

HTML:

<a href="#" id="pinit">Pin It</a>

JS:

$(document).ready(function(){ 
    $("#pinit").click(function(){ 
     $("#pinmarklet").remove(); 
     var e = document.createElement('script'); 
     e.setAttribute('type','text/javascript'); 
     e.setAttribute('charset','UTF-8'); 
     e.setAttribute('id','pinmarklet'); 
     e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e); 
    }); 
});

Normalmente, quando si fa clic sul bookmarklet Pin It nella barra dei preferiti del browser , inserisce dinamicamente uno script (pinmarklet.js) che esegue automaticamente una funzione che richiama l'interfaccia utente di Pinterest per scegliere le immagini che si desidera bloccare.

Ho modificato questo in modo che lo script venga inserito quando viene fatto clic su un collegamento (#pinit). Ho anche aggiunto uno id allo script (#pinmarklet) in modo da poterlo rimuovere ($("#pinmarklet").remove();) e aggiungerlo di nuovo ogni volta che si fa clic sul collegamento, altrimenti i collegamenti duplicati allo stesso script continuano ad accumularsi se si continua a fare clic sul collegamento.

In ogni caso, l'effetto finale è che si sta facendo la stessa cosa del bookmarklet, invece dall'interno della pagina. Quindi funziona allo stesso modo e tira qualunque sia il contenuto della pagina corrente, il che significa che puoi modificare altri contenuti in modo dinamico e verrà preso dallo stesso link "Pin It".

fonte

2012-06-21 13:50:47 daGUY

Grazie mille per la condivisione! : D – Jess

Questo è fantastico. Delorian torna al '12 per ancora la migliore soluzione, in qualche modo. – bplittle

Ho creato un improved Pinterest button that supports an HTML5-valid syntax on GitHub.

Il modo in cui si utilizza questa soluzione dipende dal fatto che il sito stia compilando dinamicamente la pagina sul lato server (con PHP o qualche altro linguaggio di back-end) o sul lato client tramite i metodi JavaScript e AJAX.

Per il lato server, si potrebbe generare il HTML5 <div> con i suoi attributi data-* compilati nel modello e quindi caricare il file pinterest-plus-html5.min.js con un tag <script> prima della chiusura del <body>.

Per il lato client, è necessario caricare il file pinterest-plus-html5.min.js, con un tag <script> nello <head> o tramite caricamento asincrono, come descritto nella documentazione. Successivamente, si genera HTML5 <div> con JavaScript, si inserisce o si sostituisce dinamicamente il tag Pulsante Pinterest sulla pagina e quindi si chiama PinterestPlus.pinit() per convertire lo in un pulsante Pinterest .

Spero che questo aiuti!

fonte

2012-06-26 16:32:20

Una semplice soluzione lato server è probabilmente migliore del client. The code is here (PHP, WordPress o ASP)

fonte

2013-01-17 11:57:28 user1987005

aggiungi del codice con la tua risposta. Quindi l'utente può riferirlo. –

Quali pin del pulsante pintrest sono controllati dai parametri nel href del pulsante.

fonte

2013-05-17 04:29:06 chuckles

Dynamic Link per Pinterest

Sotto codice genererà tasto dinamica pinterest per le pagine differenti.

<a href="http://pinterest.com/pin/create/button/?url=http://www.printe-z.com/booked-forms.html&amp;media=http://www.printe-z.com/image/cache/data/newImages/business_forms_Booked-200x120.jpg&amp;description=description will come here" class="pin-it-button" count-layout="none"> 
<img src="http://assets.pinterest.com/images/PinExt.png" data-cfsrc="//assets.pinterest.com/images/PinExt.png" title="Pin It" border="0"> 
</a>

fonte

2013-08-30 09:26:42 Cnab

Pinterest fornisce una funzione di "costruire" per la costruzione di pulsanti dinamici. Ciò significa che puoi generare dinamicamente le tue ancore Pinterest. & usa questa funzione per convertirla in un pulsante di Pinterest, proprio come fa pinit.js quando carica.

Qui spiega come è possibile specificare il nome della funzione: http://porizi.wordpress.com/2013/11/07/dynamic-pinterest-button/

fonte

2013-11-11 12:27:29 phidias

Ho una pagina con una galleria a schermo intero, con un solo pinterest tasto in fondo alla pagina, sono finito in questa pagina alla ricerca di una soluzione. Senza successo sono arrivato fino a questo:

var imgurl = player.children(".gallery-image").eq(next).css("background-image").match(/\((.+)\)/)[1]; 
$(".pintrest-container > a").attr("data-pin-href", "//www.pinterest.com/pin/create/button/?url=http://mywebsite.com/&media=" + imgurl + "&description=My Website");

L'espressione regolare /$(.+)$/ è utile per analizzare l'URL dell'immagine nell'attributo sfondo, perché il suo formato è url('image.jpg'), quindi la regex rimuove il url('') e dà solo il percorso.

Quindi ho appena impostato l'attributo data-pin-href con la mia nuova immagine, funziona benissimo!

fonte

2014-09-11 15:43:44

Crea un pulsante dinamico Pinterest?

risposta

Problemi correlati