HTML #16: PinIt-Button hinzufügen

Schon vor einigen Wochen - oder sind es schon Monate - hat Anja von Starkysstücke mich gefragt wie sie einen PinIt-Button für ihre Bilder auf dem Blog bekommen kann. Bisher hatte ich eine Version, für die man wieder am HTML vom Blog etwas ändern musste, aber es geht auch so viel leichter, wenn einem die Lösung, die Pinterest selbst zu Verfügung stellt, gefällt. Und genau das möchte ich euch heute gerne erklären.



Zunächst müssen wir die Goodieseite von Pinterest aufrufen. Diese erreichen wir über diesen Link.


Nun scrollen wir nach unten, bis wir zu denn"Pinterest Widgets" kommen.


Hier klicken wir nun auf den roten Button mit der Aufschrift "Add a Pin It button".


In der Kategorie "Button Type" wählen wir die Version "Image Hover" aus. So wird der Button nur angezeigt, wenn man mit der Maus über das Bild fährt. In der Kategorie "Appearance" können wir das Aussehen verändern. Ein großer oder kleiner Button? Rund oder eckig? Rot, grau oder weiß? Hier entscheidet der Geschmack, nur bei der Sprache sollten wir bei Englisch bleiben. Bewegt ihr die Maus über das Beispielbild so könnt ihr sehen, wie euer Button mit den gewählten Einstellungen aussieht.


Wenn der Button euch gefällt, dann könnt ihr ein Stück nach unten scrollen, bis zum Feld mit der Überschrift "Copy the code". Wir wählen hier den gesamten Text aus dem grauen Feld aus.


Zum Testen habe ich wie immer meinen Testblog genommen, der ist zwar nicht schön, dafür wurde im Gegensatz zu meinem eigentlichen Blog noch nichts verändert, was wirklich von Vorteil ist. Wir gehen in den Layout bereich und fügen ein neues HTML/Java-Widget hinzu. Meinem habe ich zum Probieren den Titel Pinterest gegeben, ihr könnt ihn aber auch weglassen. In das Feld "Content" fügt ihr nun den zuvor kopierten Text ein, klickt auf "Speichern" und danach noch einmal auf "Layout speichern" klicken. Nun können wir im Blog sehen ob alles geklappt hat.


Wir haben nun zwar einen Button, aber dafür auch in der Sidebar das Wort "Pinterest" stehen. Mir gefällt das nicht so gut. Auch ohne einen Titel wäre zumindest eine Lücke zu sehen. Darum habe ich es mir ein bisschen schön gefuscht.


In meinem eigentlichen Blog habe ich das Widget geöffnet, in dem meine Sozialmedia-Button sind. Unterhalb des HTML habe ich nun einfach noch den Text für den PinIt-Button eingefügt. Damit ich später auch noch weiß, was das eigentlich ist habe ich mir einen Kommentar eingefügt. Dieser wird zwar in der HTML-Ansicht aber nicht im Blog selbst angezeigt. Dazu müssen wir den Kommentar in bestimmte Zeichen setzten.

<!-- [Kommentar] -->

Das Wort Kommentar könnt ihr inklusive der eckigen Klammern ersetzten. Danach sieht es dann nämlich aus wie auf dem Testblog nur ohne Lücke oder überflüssige Überschriften in der Sidebar.


Ein, zwei, drei Fragen habe ich noch, dann habe ich alle Fragen beantwortet, die ihr mir bisher gestellt habt. Vielleicht fällt mir selbst noch etwas ein, ansonsten macht die Reihe danach Pause bis ihr mich wieder löchert. Wie immer hoffe ich, dass alles klappt und sonst versuche ich gerne zu helfen.

24 liebe & nette Meinungen

  1. Wie immer wunderbar erklärt, liebe Rebecca.
    Ich bin gerade ganz verblüfft - ein Testblog? Das ist ja mal eine gute Idee!
    Gähn - muss ins Bettchen, gute Nacht und schönen Sonntag.
    LG Astrid

    AntwortenLöschen
    Antworten
    1. Hallo Astrid,

      eigentlich sind es nun schon zwei, denn auf dem ersten teste ich alles für meinen Blog und da ist so viel schon verändert worden, dass sich viele grundlegende Sachen gar nicht mehr probieren lassen. Und wenn ich mich mal verbastel, dann ist es halb so wild und hier läuft alles wie gewohnt weiter :)

      Liebe Grüße
      Rebecca

      Löschen
  2. Moin, das ist toll meine Liebe! Ich hatte mich mal damit beschäftigen wollen und hatte null verstanden! hihi... jetzt habe ich leider keine Zeit zum lesen..... habe noch nicht mal eine Kulturtasche für morgen gepackt! :-@
    Liebe Grüße,
    Betty

    AntwortenLöschen
  3. Super, vielen Dank Rebecca. Das geht ja ganz einfach, ich kannte das Widget noch nicht und dachte immer, dass ich da selbst ans html ran muss und Du weißt ja, das läuft dann nicht immer glatt ;). Aber so, kein Problem. Schönen Sonntag noch. Viele liebe Grüße, Tini

    AntwortenLöschen
  4. Super erklärt! Habs gerade ausprobiert! Hat sofort geklappt.Vielleicht kannst Du mir bei Pinterest weiterhelfen. Ich bin zu dumm meine Seite zu verifizieren. ich weiß nicht wo ich diesen Verifizierungscode eintragen soll:(
    LG Claudia

    AntwortenLöschen
    Antworten
    1. Hallo Claudia,

      bei mir ist das schon eine Weile her, aber ich probiere das gerne und mache nebenbei Screenshots. Ob ich es zum nächsten Sonntag schaffe weiß ich noch nicht, aber es wird eine Anleitung für dich kommen.

      Viele Grüße
      Rebecca

      Löschen
    2. Hab viiiiiiielen Dank! Ich lese immer sehr gern bei Dir!
      GLG Claudia

      Löschen
  5. Supi! Hab's gerade eingerichtet! :-) Danke für's Zeigen wie's geht! Du Liebe!
    Geklappt hat es zwar nicht ganz, denn obwohl ich groß, rund und weiß ausgewählt habe ist mein Button klein und rot?! ... Aaaaaaaber, er ist da und das ist mir persönlich schon mal viel wert, denn bisher konnte ich immer nur das erste Bild in einem Post auf Pinterest teilen und nun kann ich auswählen! - Grandios! :-)
    Du bist ein Schatz und eine Bereicherung für die Bloggerwelt! Aber das weißt du sicher?! :-D
    Alles Liebe und eine schöne Woche!

    AntwortenLöschen
    Antworten
    1. Oh Danke, liebe Pamela,

      du schaffst es immer wieder, dass ich rot werde. Woran es liegt, dass das Ausgewählte nicht da ist weiß ich leider auch nicht. Das liegt dann ja am HTML, dass du kopiert hast und müsste somit von Pinterest falsch angeboten worden sein.

      Liebe Grüße
      Rebecca

      Löschen
  6. Liebe Rebecca!
    Ich glaube du bekommst sicher wieder Fragen von uns geliefert ;-)
    glg
    Sonja

    AntwortenLöschen
  7. Rebecca, meine "Blog-Änderungswunschliste" wird immer länger ;) Wo ist nur die Zeit um all das auszuprobieren? Ich bin dir so dankbar, dass ich nicht immer das halbe Internet durchsuchen muss, sondern einfach schnell bei dir gucken kann! Du erklärst das einfach so gut!

    Liebe Grüße, Jessica

    AntwortenLöschen
  8. Liebe Rebecca,

    ich hab's ausprobiert und es hat funktioniert, ich finde die erwähnte Lücke zwar nicht, bin aber momentan auch eher von diesen ewigen Werbe-Blink-Teilen genervt, die überall auftauchen und die ich immer wieder wegklicken muss.

    Vielen Dank für die Erklärung

    Ich wünsche dir noch einen schönen Sonntagabend.
    Viele liebe Grüße
    Martina

    AntwortenLöschen
    Antworten
    1. Hallo Martina,

      wenn du ein Widget in die Sidebar einfügst, dann kannst du ja immer einen Titel angeben. Der Platz, den dieser Titel braucht ist im Prinzip immer reserviert. Also ist dort einfach ein Stück frei in der Sidebar, wenn du nichts angibst.

      Was für blinkende Werbeteile meinst du denn? Da habe ich z.B. seit langer Zeit kein Problem mehr mit. Bei mir hier auch? Das würde mich nämlich sehr ärgern!

      Liebe Grüße
      Rebecca

      Löschen
  9. Liebe Rebecca,

    vielen Dank für den Button,
    Nach gefühlten Monaten habe ich es endlich geschafft ihn einzupflegen und siehe da, eigentlich ist es ganz einfach :) (Wenn man weiß wies geht)
    Vielen Dank, dass Du dir immer wieder die zeit nimmst es so zu erklären, dass man folgen kann.

    Liebe Grüße
    Anja

    AntwortenLöschen
    Antworten
    1. Hallo Anja,

      es freut mich, dass alles geklappt hat. Vielen Dank für deine lieben Worte.

      Liebe Grüße
      Rebecca

      Löschen
  10. Hab mich immer schon gefragt, wie man das da reinkriegt! Dank Dir, klappt das nun auch, genau wie die mittige Seitenverlinkung! Großes, liebes DANKE <3! Auch für die anderen Hilfestellungen, Du machst Dir ja soviel Mühe!
    Bloglovin liebe ich, nun verpasse ich auch hier keinen Post mehr :-)!

    LG
    Mel von ninonos.blogspot.de

    AntwortenLöschen
  11. Hallo Rebecca,

    tolle Erklärung. Nur, leider erscheint der Pin-It-Button nicht bei allen Bildern, siehe http://www.neue-autoren.club/autor/Ralf-Dostal :-(

    Bei den kleineren Bildern fehlt er. Ein Fehler? Hast Du vielleicht eine Erkläruing dafür?

    Herzlichen Dank und liebe Grüße
    Ralf

    AntwortenLöschen
    Antworten
    1. Hallo Ralf,

      da müsstest du mal direkt bei Pinterest nachfragen, denn ich hatte hier nur auf nachfrage erklärt, wie man den Button einfügen kann. Möglicherweise liegt es aber daran ob Bilder direkt eingefügt werden oder über Widgets zur Verfügung gestellt werden. Ich könnte mir aber auch vorstellen, das die Bilder eine Mindestgröße haben müssen, da sie darunter für Pinterest einfach uninteressant sind.

      Liebe Grüße
      Rebecca

      Löschen
    2. Hallo Rebecca,

      habe die Antwort durch Ausprobieren herausgefunden. Es ist wirklich so, wie Du schon vermutest hast::

      Dass kleinere Bilder keinen Pin-It-Button bekommen, ist kein Fehler von Pinterest (und auch nicht von meiner/Deiner/sonst wessen Website), sondern Absicht von Pinterest. Deren Javascript ist so programmiert, dass der Pin-It-Button nur bei Bildern eingeblendet wird, deren Kantenlänge (Breite UND Höhe) jeweils mindestens 120 Pixel beträgt.

      Dafür wird nur die Bildgröße verwendet, wie die Website sie anzeigt (durch die Parameter "width" und "height" erzwungen) und nicht die wahre Bildgröße der Original-Bilddatei.

      Kann man also nichts gegen unternehmen, es sei denn, man vergrößert die Bildanzeige auf die notwendigen Mindestmaße (120x120 pix).

      Liebe Grüße
      Ralf

      Löschen
    3. Hallo Ralf,

      unschön, dass da nicht die wahre Größe berücksichtigt wird, aber an sich ja doch sinnvoll. Vielen Dank, dass du es ausprobiert hast.

      Liebe Grüße
      Rebecca

      Löschen
  12. Hallo Rebecca,

    vielen Dank für die tolle Anleitung. Endlich habe ich auch die Pin-it-Buttons auf meinen Bildern.

    Gruß Gabriele

    AntwortenLöschen
    Antworten
    1. Hallo Gabriele,

      es freut mich so sehr, dass ich dir helfen konnte, nachdem ich mit deinem Tatüta-Tutorial meine ersten Nähte gemacht habe :D

      Liebe Grüße
      Rebecca

      Löschen
  13. Hey Rebecca!
    Ich danke dir sehr für deine tollen HTML-Anleitungen! Nachdem ich Linkwithin eeendlich eingebunden habe, hat es auch mit dem Pinterest-Button geklappt! Echt toll, denn damit habe ich mich irgendwie eine ganze Weile schon herumgeärgert...
    Vielen Dank!

    AntwortenLöschen
  14. Hallo Rebecca,

    deine Erklärungen sind echt toll und haben mir bei der Gestaltung meines Blogs schon einige Male weitergeholfen.
    Vielen Dank für deine Mühe!

    Viele Liebe Grüße
    Bine

    AntwortenLöschen

Vielen lieben Dank, dass du dir die Zeit genommen hast mir einen Kommentar zu schreiben. Ich freue mich sehr.Solltest du eine Frage haben, so lass mir doch bitte eine Mailadresse da, damit ich dir auch antworten kann.

Related Posts Plugin for WordPress, Blogger...