Individuelle Pinterest-Button ohne Plugin

Pinterest. Bekannt, geliebt, teilweise vergöttert. Pinterest bietet auf seiner Website auch einen Generator für den wohl bekannten “Pin-It-Button”. Schön und gut ist dieser Generator aber nicht gerade. Individualisierungswünsche lassen sich damit nicht realisieren. Dieses kleine Tutorial zeigt, wie man den “Pin-It-Button” anpasst bzw. individualisieren kann.

Pin-It-Button anpassen – garnicht so schwer

Zuvor sollte man sich die Frage stellen: was will ich eigentlich? Wie soll der Button angepasst werden und aussehen? Um nicht auf hunderte, gar tausende Individuallösungen eingehen zu müssen, zeige ich das Grundgerüst jener gewollten Individualität. Zuerst zeige ich den “Pin-It-Button”, wie er vom Generator auf Pinterest ausgegeben wird. Dies ist die Variante ohne Zähler.

Zuerst der Code, welcher im Code dort positioniert wird, wo der Button erscheinen soll.

<a href="//pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" ><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>

Zuzüglich muss noch eine kleiner Code auf der Website zwischen <body> und </body> eingefügt werden, welcher eine JavaScript-Datei einbindet. Diese Datei liegt auf dem Server von Pinterest. Generell ist es ja zu bevorzugen, wenn man möglichst wenige Dinge von externen Servern einbindet – aber das ist eine andere Geschichte.

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

Obige Beispiele sehen auf den ersten Blick so aus, als könne man einfach das Bild, welches vom Link umschlossen wird, austauschen und somit frei wählen, welches Element den Pinterest-Link erhalten soll. Falsch. Funktioniert nicht. Viel mehr wird die Grafik auch von JavaScript bestimmt, welche im body eingebunden wird. Lässt man die JavaScript-Datei einfach weg, funktioniert die Funktion nicht…

Pin-It-Button für Individualisten

Wir erkennen also: Einerseits benötigen wir die Funktion der JavaScript-Datei, andererseits müssen wir den Code umschreiben. Nun könnte man den Code aus der Datei extrahieren und in eine eigene externe Datei auslagern. Könnte man. Um mein Beispiel zu veranschaulichen, habe ich den benötigten JavaScript einfach direkt im von uns benötigten Link integriert. Somit steht es mir frei, welches Element ich wie zum Pin-It-Button umwandeln will.

<a href='javascript:void((function()%7Bvar%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)%7D)());'>
 
Hier nun der zu verlinkende Inhalt. Ob Bild, Text, Container - was auch immer.
 
</a>

Da nun der benötigte JavaScript schon im Link enthalten ist, kann auf die Einbindung der externen JavaScript-Datei von Pinterest verzichtet werden.

Eigentlich ganz einfach, oder? Wenn man weiß, wie… Du schneidest das nicht ganz mit oder hast Fragen? Schreibe ruhig einen Kommentar. Oder Du hast einfach nicht das Können oder Lust, um diese Technik in die eigene Website zu integrieren? Nicht schlimm – dafür gibt es ja wellseo – einfach anrufen oder anschreiben.

0 Kommentare

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.