• Beauty
  • Fashion
  • Lifestyle
    • Blogger Tipps
    • DIY
    • Food
    • Interior
  • Travel
  • Life
  • Infos
    • Über tantedine
    • Kontakt
    • Kennzeichnung
    • Blogroll
  • Impressum
  • Datenschutzerklärung
  • tantedine auf Instagram


  • tantedine Lifestyle Blogazine aus Norddeutschland
  • Beauty
  • Fashion
  • Lifestyle
    • Blogger Tipps
    • DIY
    • Food
    • Interior
  • Travel
  • Life
  • Infos
    • Über tantedine
    • Kontakt
    • Kennzeichnung
    • Impressum
    • Datenschutzerklärung
    • Blogroll

So könnt ihr einen Pinterest Hover Pin it Button einfügen

22. September 2017
So könnt ihr einen Pinterest Hover Pin it Button einfügen
22. September 2017 In Blogger Tipps

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.

Pinterest Hover Pin it Button einfügen tantedine
 

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.

Pinterest Hover Pin it Button einfügen tantedine

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!

Pinterest Hover Pin it Button einfügen tantedine
 

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

Pinterest Hover Pin it Button einfügen tantedine

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

Pinterest Hover Pint it Button einfügen tantedine

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.
Pinterest Hover Pin it Button einfügen tantedine

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 + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' nopin='nopin' style='display: block'/>

Pinterest Hover Pin it Button einfügen tantedine

Viel Spaß beim Pinnen! Wie ihr Rich Pins für WordPress aktiviert verrate ich euch hier.

Fotocredits: Unsplash 1 & 2

Blogger TippsHover ButtonPinterest
Teilen

Blogger Tipps

Das könnte dir auch gefallen

So erstellst du einen FTP Zugang für deinen WordPress Blog
22. Juni 2018
DSGVO Checkliste – diese Punkte habe ich umgesetzt
11. Mai 2018
HTTPS Umstellung – diese Punkte solltet ihr beachten!
5. Mai 2018

59 Kommentare


Liam
22. September 2017 at 11:29
Reply

Bei Squarespace geht das zum Glück automatisch. Ich habe aber auch bereits mit WP Seiten gearbeitet – danke für die hilfreiche Anleitung



    Nadine
    22. September 2017 at 13:10
    Reply

    Ich kenne mich leider nur mit WP und Blogspot aus 🙂

Lena
22. September 2017 at 12:10
Reply

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



    Nadine
    22. September 2017 at 13:11
    Reply

    Danke liebe Lena 🙂 Ich wünsche dir auch ein tolles Wochenende 🙂

Jacky von Tschaakii's Veggie Blog
22. September 2017 at 12:20
Reply

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



    Nadine
    22. September 2017 at 13:12
    Reply

    Das stimmt aber ich nutze Pinterst, wie schon beschrieben, eher über mein Smartphone und da wir dann leider kein Button angezeigt 😉

Alexandra
22. September 2017 at 12:42
Reply

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/



    Nadine
    22. September 2017 at 13:12
    Reply

    Man muss ja nicht jeden Kanal bedienen 🙂

Bea
22. September 2017 at 13:10
Reply

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



    Nadine
    22. September 2017 at 13:13
    Reply

    Manchmal lese ich meine Texte und denke: Wie soll man das denn ohne Bilder verstehen 😀

Jil
22. September 2017 at 13:27
Reply

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



    Nadine
    22. September 2017 at 19:18
    Reply

    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 🙂

Südstadtmutter
22. September 2017 at 15:01
Reply

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!



    Nadine
    22. September 2017 at 19:22
    Reply

    Ja das stimmt aber du kannst bei WordPress.com unter den Einstellungen deinen Account verifizieren und dann die Sharing Buttons aktivieren 🙂

Eileen
22. September 2017 at 15:44
Reply

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



    Nadine
    22. September 2017 at 19:24
    Reply

    Jetzt bin ich aber überrascht. Du hast ja gar kein Pinterest. Ich dachte du bist auch dort unterwegs 😀

Nina
22. September 2017 at 19:05
Reply

Danke, sehr nützlich, da ich mich schon länger mit Pinterest näher beschäftigen wollte, als nur Mason Jar Salate zu pinnen 😉



    Nadine
    22. September 2017 at 19:15
    Reply

    😀 Jetzt habe ich aber hungi 😉

Sandra | Zart wie Federblümchen
22. September 2017 at 19:20
Reply

Hey Nadine und danke für den Tipp. Ich habe so einen Hover Button und nutze den wirklich gerne.

Liebste Grüße,
Sandra.



    Nadine
    22. September 2017 at 19:24
    Reply

    Ich finde den auch sehr praktisch 🙂

Filine
22. September 2017 at 19:39
Reply

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



    Nadine
    22. September 2017 at 19:48
    Reply

    Ich finde ihn sehr praktisch weil ich gerne unterwegs pinne 🙂

Linni
22. September 2017 at 20:14
Reply

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



    Nadine
    23. September 2017 at 10:21
    Reply

    Ich finde es auch super 🙂

Natascha
22. September 2017 at 20:31
Reply

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



    Nadine
    23. September 2017 at 10:22
    Reply

    Genau, der Button wird dann eben auch auf mobilen Geräten ausgegeben und so kann man von unterwegs pinnen 🙂 Danke Natascha 🙂

sophias.kleine.welt
23. September 2017 at 12:48
Reply

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/



    Nadine
    23. September 2017 at 16:11
    Reply

    Das ist gar nicht schwer 🙂 Ich helfe dir gerne 🙂

Franzy
23. September 2017 at 13:02
Reply

Danke für den Post. Ich habe mich immer gefragt wie das geht. Das werde ich in naher Zukunft bei mir auch noch einbinden.



    Nadine
    23. September 2017 at 16:11
    Reply

    Super, das freut mich 🙂

AnnLee Beauty
23. September 2017 at 14:31
Reply

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♡



    Nadine
    23. September 2017 at 16:13
    Reply

    Danke du Liebe <3 Wegen dem Slider schau ich morgen mal 😉

Lisa
23. September 2017 at 15:47
Reply

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



    Nadine
    23. September 2017 at 16:13
    Reply

    Danke Lisa 🙂 Freut mich immer wenn ichhelfen kann 🙂

Anna
24. September 2017 at 00:32
Reply

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



    Nadine
    24. September 2017 at 11:24
    Reply

    Das finde ich super 🙂

Victoria
24. September 2017 at 18:41
Reply

Oh der Tool ist so klasse, ich habe mich schon immer gefragt wie das funktioniert <3 danke für diese tolle Chance <3



    Nadine
    24. September 2017 at 19:53
    Reply

    Super wenn es dir hilft 🙂

Jana
24. September 2017 at 20:55
Reply

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



    Nadine
    24. September 2017 at 21:25
    Reply

    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 🙂

Schminktussi
25. September 2017 at 10:51
Reply

Eine sehr schöne Erklärung. Wenn ich demnächst mal ein bisschen mehr Zeit habe, werde ich es bei mir mal umsetzen.



    Nadine
    25. September 2017 at 10:55
    Reply

    Schön, wenn es dir weiterhilft 🙂

Jenny
25. September 2017 at 22:44
Reply

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



    Nadine
    26. September 2017 at 10:25
    Reply

    Das freut mich total liebe Jenny 🙂 Für Wünsche und Anregungen bin ich immer offen 🙂

Sissy
26. September 2017 at 15:26
Reply

Voll super, dass du so eine übersichtliche Reihe startest! Man kann immer wieder neue Dinge lernen <3



    Nadine
    26. September 2017 at 16:08
    Reply

    Danke Sissy <3

Andrea
26. September 2017 at 16:12
Reply

Eine super Anleitung! Ich habe so einen Button auch.



    Nadine
    26. September 2017 at 16:44
    Reply

    Sehr praktisch oder? 🙂

Andreas
29. September 2017 at 21:30
Reply

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…



    Nadine
    30. September 2017 at 12:27
    Reply

    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 🙂

Avaganza
29. September 2017 at 22:50
Reply

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



    Nadine
    30. September 2017 at 12:22
    Reply

    Ich persönlich nutze Pinterest sehr gerne und ich glaube, dass es für deinen Blog auch nützlich sein kann 🙂

Suse
1. September 2018 at 13:38
Reply

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



    Nadine
    1. September 2018 at 15:03
    Reply

    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)

Suse
1. September 2018 at 18:13
Reply

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… :((



    Nadine
    1. September 2018 at 18:15
    Reply

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

      Suse
      1. September 2018 at 18:49

      Ja klar, sehr gerne. Tausend Dank schon mal. : )

Sybille
20. August 2020 at 14:00
Reply

Hallo Nadine,

ich bin sehr glücklich und dankbar, dass mich das www zu dir geführt hat. Wie immer auf der Suche nach was ganz anderem habe ich deine Anleitung direkt umgesetzt und – was soll ich sagen? Es funktioniert !!! YEAH! Aber sowas von genial!

Herzlichen Dank für die tolle Beschreibung!

Ich wünsche dir eine tolle und kreative Zeit.

Liebe Bastelgrüße
Sybille



    Nadine
    17. October 2020 at 21:42
    Reply

    Das freut mich sehr. Toll, dass es geklappt hat! Liebe Grüße Nadine

Schreibe einen Kommentar Antworten abbrechen

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



@tantedine
  • Ich bin tantedine

    tantedine Lifestyle Blogazine aus Norddeutschland

    tantedine ist ein Lifestyle Blogazine aus Norddeutschland. Hier findet ihr Alltägliches, Modetrends und Beauty-Neuheiten sowie Interior und DIY Inspirationen. Gerne teile ich auch meine Erfahrung zum Thema ‚Bloggen‘ und verrate euch meine ‚Places to see‘.

  • Schlagwörter

    Adventskalender Adventsverlosung Beauty Blogger Tipps Blumen Catrice Cosnova Deko DIY DSGVO essence essence Event Fashion Garten Geschenkideen gewinnspiel H&M Highlighter Interior Kuba Lidschatten Limited Edition Lippenstift makeup Mascara Mood Nagellack Outfit Pressemitteilung Produktneuheiten Schottland Shein Shopping Snapchat Sommer Sylt Boheme Travel Treaclemoon Trend Edition Urlaub westwing WestwingNow Wochenrückblick Wordpress Yankee Candle
  • Beliebte Beiträge

    • wo-kaufe-ich-meine-yankee-candles-tantedine Wo kaufe ich meine Yankee Candles?
    • So baut man ein Opt-Out Cookie auf dem Blog ein DSGVO tantedine Opt-Out – Google Analytics mit einem Klick deaktivieren | DSGVO
    • CATRICE Beauty Trends Neuheiten HErbst Winter 2018 Produktupdate Beauty tantedine CATRICE Beauty Trends & Neuheiten | Herbst & Winter 2018
    • niedliche-vasen-aus-glühbirnen-diy-tantedine Niedliche Vasen aus Glühbirnen | DIY
    • Sukkulenten vermehren mit Stecklingen DIY Gardening Succulenten tantedine Sukkulenten vermehren | DIY mit Stecklingen

© 2015-2019 tantedine   Impressum | Datenschutz | Sitemap