So könnt ihr einen Pinterest Hover Pin it Button einfügen
Pinterest ist mittlerweile einer meiner liebsten Kanäle. Auch wenn ich nicht täglich etwas pinne, lasse ich mich regelmäßig von den hübschen Ideen inspirieren. In den meisten Fällen nutze ich Pinterest über mein Smartphone und pinne hauptsächlich von unterwegs. Damit das überhaupt möglich ist, habe ich einen Hover Pin it Button für Pinterest auf meinem Blog installiert. Wie das ganze funktioniert, damit auch ihr mit einem Klick eure Bilder direkt vom Blog teilen könnt, erkläre ich euch. Vor jeder Änderung an eurem Blog solltet ihr ein Backup erstellen.
Hover Pin it Button für WordPress.org
1. Plugin installieren
Ich nutze für meinen WordPress Blog das Plugin von Pinterest ‚Pinterest Hover Pin it Button‘. Dieses installiert ihr über den Reiter ‚Plugins‘ und weiter auf ‚Installieren‘. In der Suchleiste gebt ihr den Namen ‚Pinterest Hover Pin it Button‘ ein, klickt auf ‚Jetzt installieren‘ und aktiviert das Plugin. Achtung: Das Plugin wurde die letzten 2 Jahre nicht aktualisiert, daher erfolgt die Installation wie immer auf eigene Gefahr. Bei mir funktioniert es einwandfrei und auch auf einem anderen Blog habe ich es vor einiger Zeit ohne Probleme installiert.
2. Einstellungen für den Button
Nachdem ihr das Plugin erfolgreich installiert und aktiviert habt, stellt ihr unter dem Reiter ‚Einstellungen‘ und ‚Pin it Button‘ die Ausgabe ein. Auf dem oberen Bild seht ihr meine Einstellungen. Übernehmt die Änderungen und aktualisiert eure Seite. Fertig!
Hover Pin it Button für Blogspot
1. Code einfügen
Für euren Blogspot Blog benötigt ihr einen Code welcher ins HTML eingefügt wird. Wählt dafür unter dem Reiter ‚Design‘ den Button ‚HTML bearbeiten‘.
Sucht nun den </body> Endtag, fügt folgenden Code vor dem Tag ein und speichert alles ab.
<script data-pin-hover='true' data-pin-tall='true' src='//assets.pinterest.com/js/pinit.js' type='text/javascript'/>
Für ein runden Button fügt ihr diesen Code vor dem </body> Endtag:
<script data-pin-hover='true' data-pin-tall='true' data-pin-round='true' src='//assets.pinterest.com/js/pinit.js' type='text/javascript'/>
2. Nopin Attibut hinzufügen
Habt ihr im Header eine Grafik, wird nun auch auf dieser der Pinterest Button angezeigt. Das sieht natürlich nicht so schön aus. Um diesen auszublenden, müsst ihr noch ein Nopin Attribut im HTML hinzufügen.
Dafür sucht ihr den <div id=’header-inner‘> Code auf den das <a expr:href=’data:blog.homepageUrl‘ style=’display: block‘> folgt. Fügt hinter expr:width=’data:width‘ das nopin=’nopin‘ ein. Abspeichern und aktualisieren nicht vergessen. Fügt nur das rot markierte Nopin ein! Denkt daran, dass jeder Code anders ist weil auch jeder Blog anders aussieht. So sieht es später ungefähr aus:
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' nopin='nopin' style='display: block'/>
Viel Spaß beim Pinnen! Wie ihr Rich Pins für WordPress aktiviert verrate ich euch hier.
Das könnte dir auch gefallen
57 Kommentare
Bei Squarespace geht das zum Glück automatisch. Ich habe aber auch bereits mit WP Seiten gearbeitet – danke für die hilfreiche Anleitung
Ich kenne mich leider nur mit WP und Blogspot aus 🙂
Liebe Nadine
Ich hätte deine Tutorials echt so gut brauchen können, als ich neu bei Pinterest war. So toll, dass du so eine informative Starthilfe für die wichtigsten Sachen auf Pinterest gibst.
Hab ein wunderschönes Wochenende,
Lena
Danke liebe Lena 🙂 Ich wünsche dir auch ein tolles Wochenende 🙂
Sehr toll erklärt 🙂 Aber ich muss sagen ich halte das für eher überflüssig, da die meisten Pinterest Nutzer sowieso das Addin für den Browser installiert haben und somit den Button sowieso schon haben 😉
Liebe Grüße
Jacky
Das stimmt aber ich nutze Pinterst, wie schon beschrieben, eher über mein Smartphone und da wir dann leider kein Button angezeigt 😉
Hi, ja ich muss das bei mir auch unbedingt machen. Irgendwie gehe ich mit Pintrest eher nachlässig um obwohl ich sehr gerne darin stöbere. Ich wünsche dir ein wunderbares Wochenende und liebe Grüße Alex von https://margreblue.de/
Man muss ja nicht jeden Kanal bedienen 🙂
Hallo Nadine,
ich habe mir das damals total aufwendig selber eingebaut. Hätte ich deine Anleitung eher gehabt, hätte ich mir viel Zeit und Nerven sparen können. Toll geschrieben und schön, dass du immer Bilder dazu gemacht hast, so weiß man immer wovon die Rede ist.
Liebe Grüße
Bea
Manchmal lese ich meine Texte und denke: Wie soll man das denn ohne Bilder verstehen 😀
Ich frage mich ja immer, ob es Sinn macht meine Beiträge zu verpinnen oder nicht. Bin mir da immer noch sehr unschlüssig, da ich ja selten Bilder von Filmen tatsächlich einfüge (aus rechtlichen Gründen). Nutze es hauptsächlich für meine Burgerkritiken. Muss das nochmal genau durchdenken, wenn mal eine freie Minute ist 😉
Lieben Gruß
Jil
Selbt gemachte Bilder sind ja nicht so das Problem aber ich würde immer prüfen, wie das mit den Urheberrechten ist bei den Filmen 🙂
Cooler Artikel! Wenn man wordpress.com verwendet, ist es ja leider nix mit Plug-Ins, außer man upgradet auf die Business Version. Wirklich schade, sonst würde ich das Plug-In wirklich gerne verwenden!
Ja das stimmt aber du kannst bei WordPress.com unter den Einstellungen deinen Account verifizieren und dann die Sharing Buttons aktivieren 🙂
Huhu Nadine,
mal wieder hilfreiche Tipps für Leute die auf Pinterest aktiv sind! Toll erklärt 🙂
Hab ein schönes Wochenende <3
Liebe Grüße
Elli
http://www.elliberry.blogspot.de
Jetzt bin ich aber überrascht. Du hast ja gar kein Pinterest. Ich dachte du bist auch dort unterwegs 😀
Danke, sehr nützlich, da ich mich schon länger mit Pinterest näher beschäftigen wollte, als nur Mason Jar Salate zu pinnen 😉
😀 Jetzt habe ich aber hungi 😉
Hey Nadine und danke für den Tipp. Ich habe so einen Hover Button und nutze den wirklich gerne.
Liebste Grüße,
Sandra.
Ich finde den auch sehr praktisch 🙂
Vielen lieben Dank für deine tolle Erklärung. Ichnwerde mir das auch jeden Fall in den nächsten Tagen näher anschauen, denn ich habe diesen Button noch nicht und bin immer für jede Hilfe sehr dankbar. Ganz liebe Grüße von Silvia
Ich finde ihn sehr praktisch weil ich gerne unterwegs pinne 🙂
Hallo Nadine,
ich mache es auch so und habe es niemals bereut, meinen Blog mit Pinterest zu verbinden. Ganz im Gegenteil!
Liebst Linni
http://www.linnisleben.de
Ich finde es auch super 🙂
Schln wenn einige ein Kommentar hier hinterlassen ohne den Beitrag gelesen zu haben.
Du hast es toll erklärt und vor allem auf mobilen Geräten ist es sehr praktisch. Ich nutze mein Handy immer unterwegs um Wartezeiten zu überbrücken. Da wäre ein Button auf einigen Seiten schon sinnvoll.
Besten Gruß Natascha
Genau, der Button wird dann eben auch auf mobilen Geräten ausgegeben und so kann man von unterwegs pinnen 🙂 Danke Natascha 🙂
Auf den ersten Blick sieht das immer so unfassbar kompliziert aus. Ich muss mir etwas Zeit dafür nehmen und nochmal alles in Ruhe durchlesen =)
Liebe Grüße
Sophia
http://sophiaskleinewelt04.blogspot.de/
Das ist gar nicht schwer 🙂 Ich helfe dir gerne 🙂
Danke für den Post. Ich habe mich immer gefragt wie das geht. Das werde ich in naher Zukunft bei mir auch noch einbinden.
Super, das freut mich 🙂
Dank dir hat es mit dem süßen Button geklappt♥
Du kannst das so gut beschrieben & erklären, aber das hab ich dir schon mal erzählt hihi 😀
So oft bin ich nicht bei Pinterest unterwegs, weil ich das nur am pc nutze und nicht am handy ^-^
Liebe Grüße AnnLeeBeauty♡
Danke du Liebe <3 Wegen dem Slider schau ich morgen mal 😉
Dieses Tool benutze ich auch schon einige Zeit, echt klasse. Das vereinfacht total viel. Danke für deine Tipps, wie immer super.
Liebe Grüße Lisa
von Pinkybeauty.de
Danke Lisa 🙂 Freut mich immer wenn ichhelfen kann 🙂
Pinterest ist sooo cool! Früher wusste ich gar nicht, dass das Pinnen so viel Spaß machen kann. Mittlerweile nutze ich Pinterest täglich. Danke für die Anleitung. 🙂
Liebe Grüße
Anna <3
annashines.com
Das finde ich super 🙂
Oh der Tool ist so klasse, ich habe mich schon immer gefragt wie das funktioniert <3 danke für diese tolle Chance <3
Super wenn es dir hilft 🙂
Eine zeitlang hatten wir diesen Button auch mal! Aber jetzt ist er irgendwie gar nicht mehr da! Zum Glück habe ich jetzt diese Anleitung von dir, die ich mir in einer ruhigen Minute noch mal näher anschauen werde!
Liebe Grüße
Jana
Wenn man vom PC pinnt und ein Add on nutzt, benötigt man den nicht unbedingt. Aber viele, so wie ich, pinnen vom Smartphone und da ist es echt praktisch 🙂
Eine sehr schöne Erklärung. Wenn ich demnächst mal ein bisschen mehr Zeit habe, werde ich es bei mir mal umsetzen.
Schön, wenn es dir weiterhilft 🙂
Ich habe es bestimmt schonmal erwähnt, aber ich liebe deine Beiträge zu Pinterest. =) Sie sind immer sehr hilfreich!
Liebe Grüße,
Jenny von http://www.rockerbella.de
Das freut mich total liebe Jenny 🙂 Für Wünsche und Anregungen bin ich immer offen 🙂
Voll super, dass du so eine übersichtliche Reihe startest! Man kann immer wieder neue Dinge lernen <3
Danke Sissy <3
Eine super Anleitung! Ich habe so einen Button auch.
Sehr praktisch oder? 🙂
Liebe Nadine,
eine wirklich tolle Anleitung! Leider habe ich weder WP noch blogspot und ich suche so eine Anleitung, wie ich das in meinen normalen Quellcode bekomme… Ich überlege, ob ich dafür deine Anleitung trotzdem irgendwie nutzen kann, weil du ja hier auch den html code anzeigst. Ich versuche es mal…
Genau, es müsste auch so bei dir funktionieren weil du auf deiner Website ja auch einen Body Tag haben solltest 😉 Berichte mal, ob es geklappt hat 🙂
Liebe Nadine,
…ich bin wohl eine der wenigen hier, die nicht mal wissen dass es einen „Hover Pin“ gibt ;-)! Aber ich lerne ja gerne dazu und mit Pinterest muss ich mich jetzt wirklich mal näher beschäftigen. Das ist mein To Do für die nächsten Wochen bzw. bis Jahresende. Bis dahin werde ich jeden deiner Beiträge dazu „verschlingen“.
Danke für die gut verständlichen Infos!
Schönen Abend!
Verena
Ich persönlich nutze Pinterest sehr gerne und ich glaube, dass es für deinen Blog auch nützlich sein kann 🙂
Hallo Nadine,
deine Anleitung ist super und hat auch beim ersten Versuch sofort mit blogger.com geklappt.
Vielen Dank dafür.
Nun würde ich gerne noch die Farbe des Hover-Buttons über den HTML-Code auf die Farbe meines Blogdesigns anpassen. Hast du dahingehend vielleicht noch einen Tipp für mich und die andere, die dass ebenfalls vorhaben?
Ich wäre begeistert, da ich mir leider schon seit einiger Zeit die Finger wund tippe und einfach nix brauchbares im Netz finden kann.
Lieben Dank schon mal für deine Antwort. 🙂
Hey Suse 🙂 Wenn du den Button an dein Blogdesign anpassen möchtest, müsstest du einen eigenen erstellen und einfügen. Der rote Button von Pinterest wird ja direkt von Pinterest ‚gezogen‘. Es ist schon ‚etwas‘ aufwändiger das zu erklären aber du erstellst dir einen Button als png und speicherst den in deiner Mediathek. Anschließend fügst du die URL vom Button in einem Code ein, den du in deinem HTML hinterlegst. Hier ist eine Anleitung von Copy Paste Love die ich über Google gefunden habe 🙂 (http://blog.miradesigns.de/2013/11/individuellen-pinterest-hover-button.html)
Wow, danke für deine schnelle Antwort.
Die Seite hab ich auch gefunden und bin der Anleitung gefolgt, aber es will einfach nicht funktionieren. 🙁
Hab das Bild auf einer extra Seite gespeichert, veröffentlicht und kann es auch über die URL finden. Die URL (png) vom Bild habe ich, wie in der Anleitung beschrieben, im „HTML anpassen“ samt dem Code für den Hover-Button eingefügt und gespeichert, aber ich sehe nach wie vor keinen Hover-Button. Ist der HTML-Code vielleicht nicht mehr aktuell? Für mich sind das quasi böhmische Dörfer… :((
Mhhh, da müsste ich mal genau schauen wen ich Zeit habe. Der Beitrag ist ja auch schon etwas älter, vielleicht ist er wirklich nicht mehr aktuell. Ich schau mal und melde mich dann nochmal wenn das okay ist? 🙂
Ja klar, sehr gerne. Tausend Dank schon mal. : )