Erstelle einen Merken-Button für deine Website

Tipps und Fehlerbehebung

"Bitte beachte: Wenn du den offiziellen Merken-Button vor Juni 2016 zu deinem Code hinzugefügt hast, haben wir das Design am 3. Oktober 2017 von "Pinnen" in "Merken" geändert.

Mit dem Merken-Button können Nutzer dein Unternehmen auf Pinterest ganz einfach entdecken. Wenn du den Merken-Button den Seiten deiner Webseite hinzufügst, können deine Kunden die Inhalte, die ihnen gefallen, auf Pinterest sammeln. Das heißt, dass sogar noch weitere Nutzer die entsprechenden Inhalte finden können. 
 
Falls du eine Wordpress-, Blogger-, Tumblr-, Wix- oder Squarespace-Webseite hast:
 
WordPress.com WordPress.com
Für den Wordpress „Merken“-Button benötigst du auf deiner Website keinen zusätzlichen Code. In den standardmäßigen WordPress-Optionen zum Teilen kannst du festlegen, dass der „Merken“-Button allen Artikeln hinzugefügt wird.
  1. Rufe das Dashboard deines WordPress-Blogs auf.
  2. Geh zu Einstellungen und dann zu Teilen.
  3. Ziehe im Abschnitt Sharing Buttons den Pinterest-Dienst von Verfügbare Dienste auf Aktivierte Dienste.
  4. Wenn du das standardmäßige Bild des „Pin It“-Buttons anzeigen möchtest, ändere die Einstellung in der Dropdown-Liste Button-Stil in Offizielle Buttons.
  5. Klicke unten auf der Seite auf Änderungen übernehmen.
WordPress.org WordPress.org

Für den „Merken“-Hover-Button findest du im Plug-in-Verzeichnis von WordPress.org ein Plug-in zum Herunterladen.

Blogger Blogger
  1. Öffne im Blogger-Dashboard den Bereich Layout.
  2. Klick im Bereich „Posts“ auf Bearbeiten.
  3. Scolle auf Freigabeschaltflächen anzeigen und markiere ggf. das Kontrollkästchen.
  4. Ordne dann im Bereich Elemente anordnen alles wie gewünscht an und klicke auf Speichern.
Tumblr Tumblr
Füge zunächst eine JavaScript-Zeile ein.
 
Folge zum Hinzufügen der JavaScript-Zeile diesen Schritten:
  1. Wähle in deinem Tumblr-Dashboard den Blog, den du bearbeiten möchtest, und klicke dann auf Customize.
  2. Klick auf der Bildschirmanzeige Anpassen auf HTML bearbeiten.
  3. Scrolle an das Ende des Codes.
  4. Überprüfe, ob dein Code pinit.js enthält.
  5. Wenn nicht, füg die folgende Zeile direkt über dem </body>-Endtag ein: <script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
 
So fügst du einen „Merken“-Hover-Button hinzu:
  1. Voraussetzung ist, dass du die JavaScript-Zeile wie oben erläutert hinzugefügt hast.
  2. Wähle in deinem Tumblr-Dashboard den Blog, den du bearbeiten möchtest, und klicke dann auf Customize.
  3. Klicke auf der Bildschirmanzeige Anpassen auf HTML bearbeiten.
  4. Scrolle an das Ende des Codes.
  5. Füge vor das „src=“ aus dem vierten Schritt data-pin-hover="true" ein. Deine neue Zeile sollte nun so aussehen: <script type="text/javascript" async data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
  6. Klicke auf Vorschau aktualisieren. Wenn du den Cursor über das Beispielbild rechts verschiebst, siehst du den „Pin it“-Button. Wenn nicht, geh zurück zum vierten Schritt und überprüfe deine Eingabe.
  7. Klick auf Merken.
Wix.com Wix.com
  1. Klicke links im Editor auf Hinzufügen (+).
  2. Klick auf Soziale Medien.
  3. Scrolle an das Seitenende und klicke auf Pinterest Pin It.
  4. Zieh den „Pin it“-Button an die gewünschte Position auf der Seite.
  5. Der „Merken“-Button erstellt einen Pin entsprechend dem Bild und der Beschreibung, den du ausgewählt hast. Der Pin wird mit der Seite verknüpft, auf der du gerade bist, wenn du auf Merken klickst.
Squarespace Squarespace

Hier lernst du, wie du einen „Merken“-Button für deine Webseite erstellst. 

 
Wenn du selbst einen Button erstellen möchtest, entscheide zunächst, welche Art Merken-Button du hinzufügen möchtest. Du hast drei Auswahlmöglichkeiten: 
 
  • Hover-Button (siehe hier): Wenn der Mauszeiger über ein beliebiges Bild auf der Seite gehalten wird, wird der Merken-Button eingeblendet.
    Learn how to build it Learn how to build it
    1. Öffne den Widget Builder.
    2. Wähle Mouseover-Button im Abschnitt Button-Art aus.
    3. Passe die Größe und Form deines Buttons an. 
    4. Rufe deinen Button auf, indem du den Cursor über das Beispielbild hältst. Ob er funktioniert, siehst du, wenn du auf den „Merken“-Button klickst.
    5. Wenn er dir gefällt, kopiere den Code im Bereich Code kopieren.
    6. Füge den Code auf jeder Seite, auf der der Button auf deiner Webseite angezeigt werden soll, direkt vor das </body>-Endtag ein.
  • Alle Bilder  (siehe hier): Wenn ein Nutzer auf diesen Button klickt, kann er alle Bilder auf dieser Website speichern. Schwierigkeitsgrad: Einfach.
    Learn how to build it Learn how to build it
    1. Öffne den Widget Builder.
    2. Wähle Alle Bilder im Abschnitt Button-Art aus.
    3. Passe die Größe, Form, Sprache und das Bild für deinen Button an. 
    4. Rufe deinen Button auf, indem du den Cursor über das Beispielbild hältst. Du kannst feststellen, ob er funktioniert, wenn du auf den Merken-Button klickst.
    5. Wenn er dir gefällt, kopiere den im rechten Bereich der Seite angezeigten Code.
    6. Füge den Code auf jeder Seite, auf der der Button auf deiner Webseite angezeigt werden soll, zwischen den Tags <body> und </body> ein.
  • Ein Bild (siehe hier): Mit diesem Merken-Button kann ein einzelnes Bild auf der Seite gespeichert werden. Er erfordert einige Programmierkenntnisse.
    Learn how to build it Learn how to build it
    1. Geh zum Widget Builder.
    2. Passe die Größe, Form, Sprache oder das Bild für deinen Button an. 
    3. Füge die URL für die Webseiten hinzu, die das Bild enthalten, für das du einen Merken-Button erstellen möchtest. Das kann die Startseite oder jede andere Seite deiner Website sein.
    4. Öffne deine Webseite in einem neuen Browserfenster.
    5. Klicke mit der rechten Maustaste auf das Bild, für das du einen Merken-Button erstellen möchtest.
    6. Wähle Bild-URL kopieren aus.
    7. Öffne wieder den Widget-Builder und füge die Bild-URL in das Feld „Bild“ ein.
    8. Formuliere eine Beschreibung für das Bild.
    9. Klicke auf Jetzt erstellen!, um eine Voransicht des Buttons zu sehen.
    10. Wenn er dir gefällt, kopiere den im rechten Bereich der Seite angezeigten Code.
    11. Füge den Code auf jeder Seite, auf der der Button auf deiner Website angezeigt werden soll, zwischen den Tags <body> und </body> ein.

Häufig auftretende Schwierigkeiten

Der Zähler für den Merken-Button wird nicht eingeblendet oder ist nicht korrekt.
Wenn du auf den Merken-Button klickest, wird die Pinnwandauswahl nicht in einem neuen Fenster geöffnet.
Der Hover-Button funktioniert nicht
Pinterest scheint Probleme bei der Kommunikation mit meiner Website zu haben.

Der Zähler zeigt die Anzahl der Pins, die mit der URL verknüpft sind, die du im Code des Button definiert hast. Wenn diese Seite nicht die ist, auf der du dich in dem Moment befinden, kann es sein, dass der Zähler eine andere Zahl als erwartet anzeigt.

Wenn du einen Zähler für einen Bild-Merken-Button verwendest, wird die Zahl für all die Pins angegeben, die auf die URL der Seite verweisen, auf der du dich gerade befindest.

Wenn du einen Zähler neben dem Button verwendest und keine Pins für diese Seite gezählt wurden, wird der Zähler nicht angezeigt. Er wird erst eingeblendet, wenn mindestens einmal von dieser Seite gepinnt wurde.

Wenn du einen Merken-Button eines anderen Plug-In-Anbieters verwendest, wende dich an den Entwickler des Plug-Ins. Möglicherweise kann er das Problem beheben. 

Wenn du deinen eigenen Merken-Button verwendest, haben wir ein paar Tipps für dich:

  • Die JavaScript-Zeile muss in deinem Seitencode enthalten sein, direkt über dem abschließenden Tag.
  • Überprüfe, ob die Java-Script-Zeile mehrmals auf der Seite vorhanden ist. Entferne dann alle Zeilen außer der letzten.
  • Wenn du sowohl das normale als auch das weiterführende asynchrone JavaScript verwendest, entferne eines davon.
  • Wenn du das Plug-in eines Drittanbieters verwendest, überprüfe, ob es standardmäßig eine pinit.js-Zeile in deinen Code einfügt. In diesem Fall brauchst du sie nicht selbst hinzuzufügen.
Einige Hosts unterstützen JavaScript nicht, sodass du den Code nicht über deinen Widget Builder hinzufügen kannst. Eventuell bieten sie andere Möglichkeiten an, Widgets hinzuzufügen.

Versuch es mit diesen Tipps:
 
  • Deine Bilder sollten im Hoch- oder Querformat mindestens 100 x 200 Pixel groß sein. Damit der Merken-Hover-Button eingeblendet werden kann, müssen sie mindestens 120 x 120 Pixel groß sein.
  • Achte darauf, dass deine Bilder nicht im CSS-Hintergrund definiert werden und, dass jedes Bild über ein src-Attribut verfügt, das mit „img“ beginnt.
  • Füge den Code für den Mouseover-Button direkt oberhalb des Endtags ein.

Das bedeutet, dass die Verbindung mit Pinterest unterbrochen wird, bevor wir einen Pin auf deiner Website erstellen können. Leider können wir dieses Problem nicht beheben. Es tritt in der Regel dann auf, wenn eine Website sehr langsam lädt. Wir schlagen vor, dass du deine Webseite dahingehend überprüfst.