Erstellen Sie eine dynamische Pinterest-Schaltfläche?

Gibt es eine Möglichkeit, eine dynamische Pinterest-Schaltfläche zu erstellen? Ich versuche, Pinterest-Unterstützung zu einer Website hinzuzufügen, deren Hauptbestandteil dynamisch ist. Daher hätte ich nur eine einzelne Schaltfläche "Pin It" in der Seitenquelle, die den aktuellen Inhalt festlegte.Erstellen Sie eine dynamische Pinterest-Schaltfläche?

Ich kann nicht einen Weg finden, dies mit dem vorgebauten Pin It Button zu tun, weil es erfordert, dass Sie eine hartcodierte URL im Voraus angeben.

Es gibt jedoch auch ein Pin It-Bookmarklet, das den gewünschten Effekt erzielt - aber das erfordert, dass der Benutzer es manuell zu seiner Lesezeichenleiste hinzufügt.

Gibt es eine Möglichkeit, dass ich (a) die Schaltfläche "Pin It" ändern kann oder (b) das Bookmarklet irgendwie in meine Seite integrieren kann, sodass der aktuelle Seiteninhalt fixiert wird?

Quelle

2012-06-20 daGUY

Für jeden, der interessiert ist, ist hier, was ich tat:

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

Normalerweise, wenn Sie die Pin It Bookmarklet in der Lesezeichenleiste des Browsers klicken , fügt es dynamisch ein Skript ein (pinmarklet.js), das automatisch eine Funktion ausführt, die die Pinterest-Benutzeroberfläche zum Auswählen der Bilder anzeigt, die Sie anheften möchten.

Ich habe dies geändert, so dass das Skript eingefügt wird, wenn stattdessen auf einen Link geklickt wird (#pinit). Ich habe auch eine id zu dem Skript hinzugefügt (#pinmarklet), so dass ich es entfernen() und es jedes Mal neu hinzufügen kann, wenn der Link angeklickt wird - andernfalls doppelte Verknüpfungen zu demselben Skript häufen sich, wenn Sie den Link klicken.

Wie auch immer, der End-Effekt ist, dass Sie das gleiche wie das Bookmarklet tun, nur von der Seite statt. So funktioniert es auf die gleiche Weise und zieht, was auch immer der aktuelle Seiteninhalt ist, was bedeutet, dass Sie anderen Inhalt dynamisch ändern können, und es wird von demselben "Pin It" -Link aufgenommen.

Quelle

2012-06-21 13:50:47 daGUY

Vielen Dank für das Teilen! : D – Jess

Das ist großartig. Delorian zurück zu '12 für immer noch die beste Lösung, irgendwie. – bplittle

Ich habe eine improved Pinterest button that supports an HTML5-valid syntax on GitHub gebaut.

Die Art und Weise, wie Sie diese Lösung verwenden, hängt davon ab, ob Ihre Site die Seite dynamisch auf der Serverseite (mit PHP oder einer anderen Backend-Sprache) oder auf der Clientseite über JavaScript- und AJAX-Methoden auffüllt. in der Vorlage ausgefüllt und dann laden Sie die pinterest-plus-html5.min.js Datei mit einem <script> Tag vor dem Ende der <body>

Für die Server-Seite, würden Sie die HTML5 <div> mit seinen data-* Attributen erzeugen.

Für die Client-Seite müssen Sie die Datei pinterest-plus-html5.min.js entweder mit einem <script>-Tag in der oder über asynchrones Laden laden, wie in der Dokumentation beschrieben. Als nächstes würden Sie das HTML5 <div> mit JavaScript generieren, dynamisch das Pinterest-Button-Tag auf der Seite einfügen oder ersetzen und dann PinterestPlus.pinit() aufrufen, um das <div> in einen Pinterest-Button umzuwandeln.

Ich hoffe, das hilft!

Quelle

2012-06-26 16:32:20

Eine einfache serverseitige Lösung ist wahrscheinlich besser als die Clientseite. The code is here (PHP, WordPress oder ASP)

Quelle

2013-01-17 11:57:28 user1987005

fügen Sie einen Code mit Ihrer Antwort hinzu. So kann der Benutzer es beziehen. –

Was die Pintrest Button Pins wird durch die Parameter in der href der Taste gesteuert.

Quelle

2013-05-17 04:29:06 chuckles

Dynamic Link für Pinterest

Im Folgenden Code wird dynamisch pinterest Taste für verschiedene Seiten generieren.

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

Quelle

2013-08-30 09:26:42 Cnab

Pinterest stellt eine "build" -Funktion für den Aufbau von dynamischen Tasten. Das bedeutet, dass Sie Ihre Pinterest-Anker dynamisch generieren können & Verwenden Sie diese Funktion, um sie in eine Pinterest-Schaltfläche zu konvertieren, genauso wie pinit.js, wenn sie geladen wird.

Hier wird erklärt, wie Sie den Namen der Funktion angeben: http://porizi.wordpress.com/2013/11/07/dynamic-pinterest-button/

Quelle

2013-11-11 12:27:29 phidias

Ich habe eine Seite mit einer Vollbild-Galerie, mit nur einem pinterest Schaltfläche am unteren Rand der Seite, landete ich in dieser Seite nach oben auf der Suche nach einer Lösung. Ohne Erfolg kam ich mit auf den Punkt:

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");

Die Regex /\((.+)\)/ nützlich ist, um die Bild-URL im Hintergrund Attribut zu analysieren, weil das Format url('image.jpg') ist, so entfernt die regex die url('') und gibt nur den Weg.

Dann setze ich einfach das Attribut data-pin-href mit meinem neuen Bild, funktioniert super!

Quelle

2014-09-11 15:43:44

Erstellen Sie eine dynamische Pinterest-Schaltfläche?

Antwort

Verwandte Themen