Erstellen Sie einen Merken-Button für Ihre Website

Tipps und Fehlerbehebung

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

Mit dem Merken-Button können Nutzer Ihr Unternehmen auf Pinterest ganz einfach entdecken. Wenn Sie den Merken-Button den Seiten Ihrer Website hinzufügen, können Ihre Kunden die Inhalte, die ihnen gefallen, auf Pinterest speichern. Das heißt, dass noch mehr Nutzer die entsprechenden Inhalte finden können. 
 
Falls Sie eine Wordpress-, Blogger-, Tumblr-, Wix- oder Squarespace-Website haben:
 
WordPress.com WordPress.com
Für den Wordpress „Pin it“-Button benötigen Sie auf ihrer Website keinen zusätzlichen Code. In den standardmäßigen WordPress-Optionen zum Teilen können Sie festlegen, dass der „Pin it“-Button allen Artikeln hinzugefügt wird.
  1. Rufen Sie das Dashboard Ihres WordPress-Blogs auf.
  2. Gehen Sie zu Einstellungen und dann zu Teilen.
  3. Ziehen Sie im Abschnitt Sharing Buttons den Pinterest-Dienst von Verfügbare Dienste auf Aktivierte Dienste.
  4. Wenn Sie das standardmäßige Bild des „Pin It“-Buttons anzeigen möchten, ändern Sie die Einstellung in der Dropdown-Liste Button-Stil in Offizielle Buttons.
  5. Klicken Sie unten auf der Seite auf Änderungen übernehmen.
WordPress.org WordPress.org

Für den „Pin it“-Hover-Button finden Sie im Plug-in-Verzeichnis von WordPress.org ein Plug-in zum Herunterladen.

Blogger Blogger
  1. Öffnen Sie im Blogger-Dashboard den Bereich Layout.
  2. Klicken Sie im Bereich „Posts“ auf Bearbeiten.
  3. Scollen Sie auf Freigabeschaltflächen anzeigen und markieren Sie ggf. das Kontrollkästchen.
  4. Ordnen Sie dann im Bereich Elemente anordnen alles wie gewünscht an und klicken Sie auf Speichern.
Tumblr Tumblr
Fügen Sie zunächst eine JavaScript-Zeile ein.
 
Folgen Sie zum Hinzufügen der JavaScript-Zeile diesen Schritten:
  1. Wählen Sie in Ihrem Tumblr-Dashboard den Blog, den Sie bearbeiten möchten, und klicken Sie dann auf Customize.
  2. Klicken Sie auf der Bildschirmanzeige Anpassen auf HTML bearbeiten.
  3. Scrollen Sie an das Ende des Codes.
  4. Überprüfen Sie, ob Ihr Code pinit.js enthält.
  5. Wenn nicht, fügen Sie die folgende Zeile direkt über dem </body>-Endtag ein: <script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
 
So fügen Sie einen „Pin it“-Hover-Button hinzu:
  1. Voraussetzung ist, dass Sie die JavaScript-Zeile wie oben erläutert hinzugefügt haben.
  2. Wählen Sie in Ihrem Tumblr-Dashboard den Blog, den Sie bearbeiten möchten, und klicken Sie dann auf Customize.
  3. Klicken Sie auf der Bildschirmanzeige Anpassen auf HTML bearbeiten.
  4. Scrollen Sie an das Ende des Codes.
  5. Fügen Sie vor das „src=“ aus dem vierten Schritt data-pin-hover="true" ein. Ihre neue Zeile sollte nun so aussehen: <script type="text/javascript" async data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
  6. Klicken Sie auf Vorschau aktualisieren. Wenn Sie den Cursor über das Beispielbild rechts verschieben, sehen Sie den „Pin it“-Button. Wenn nicht, gehen zurück zum vierten Schritt und überprüfen Sie Ihre Eingabe.
  7. Klicken Sie auf Speichern.
Wix.com Wix.com
  1. Klicken Sie links im Editor auf Hinzufügen (+).
  2. Klicken Sie auf Soziale Medien.
  3. Scrollen Sie an das Seitenende und klicken Sie auf Pinterest Pin It.
  4. Ziehen Sie den „Pin it“-Button an die gewünschte Position auf der Seite.
  5. Der „Pin it“-Button erstellt einen Pin entsprechend dem Bild und der Beschreibung, den Sie ausgewählt haben. Der Pin wird mit der Seite verknüpft, auf der Sie gerade sind, wenn Sie auf Pin it klicken.
Squarespace Squarespace

Hier lernen Sie, wie Sie einen „Pin it“-Button für Ihre Website erstellen. 

 
Wenn Sie selbst einen Button erstellen möchten, entscheiden Sie zunächst, welche Art Merken-Button Sie hinzufügen möchten. Sie haben 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. Öffnen Sie den Widget Builder.
    2. Wählen Sie Mouseover-Button im Abschnitt Button-Art aus.
    3. Passen Sie die Größe und Form Ihres Buttons an. 
    4. Rufen Sie Ihren Button auf, indem Sie den Cursor über das Beispielbild halten. Ob er funktioniert, sehen Sie, wenn Sie auf den „Pin it“-Button klicken.
    5. Wenn er Ihnen gefällt, kopieren Sie den Code im Bereich Code kopieren.
    6. Fügen Sie den Code auf jeder Seite, auf der der Button auf Ihrer Website 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. Öffnen Sie den Widget Builder.
    2. Wählen Sie Alle Bilderim Abschnitt Button-Art aus.
    3. Passen Sie die Größe, Form, Sprache und das Bild für Ihren Button an. 
    4. Rufen Sie Ihren Button auf, indem Sie den Cursor über das Beispielbild halten. Sie können feststellen, ob er funktioniert, wenn Sie auf den Merken-Button klicken.
    5. Wenn er Ihnen gefällt, kopieren Sie den im rechten Bereich der Seite angezeigten Code.
    6. Fügen Sie den Code auf jeder Seite, auf der der Button auf Ihrer Website 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. Gehen Sie zum Widget Builder.
    2. Passen Sie die Größe, Form, Sprache oder das Bild für Ihren Button an. 
    3. Fügen Sie die URL für die Webseiten hinzu, die das Bild enthalten, für das Sie einen Merken-Button erstellen möchten. Das kann die Startseite oder jede andere Seite Ihrer Website sein.
    4. Öffnen Sie Ihre Website in einem neuen Browserfenster.
    5. Klicken Sie mit der rechten Maustaste auf das Bild, für das Sie einen Merken-Button erstellen möchten.
    6. Wählen Sie Bild-URL kopieren aus.
    7. Öffnen Sie wieder den Widget-Builder und fügen Sie die Bild-URL in das Feld „Bild“ ein.
    8. Formulieren Sie eine Beschreibung für das Bild.
    9. Klicken Sie auf Jetzt erstellen!, um eine Voransicht des Buttons zu sehen.
    10. Wenn er Ihnen gefällt, kopieren Sie den im rechten Bereich der Seite angezeigten Code.
    11. Fügen Sie den Code auf jeder Seite, auf der der Button auf Ihrer 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 Sie auf den Merken-Button klicken, 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 Sie im Code des Button definiert haben. Wenn diese Seite nicht die ist, auf der Sie sich augenblicklich befinden, kann es sein, dass der Zähler eine andere Zahl als erwartet anzeigt.

Wenn Sie einen Zähler für einen Bild-Merken-Button verwenden, wird die Zahl für all die Pins angegeben, die auf die URL der Seite verweisen, auf der Sie sich gerade befinden.

Wenn Sie einen Zähler neben dem Button verwenden 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 Sie einen Merken-Button eines anderen Plug-In-Anbieters verwenden, wenden Sie sich an den Entwickler des Plug-Ins. Möglicherweise kann er das Problem beheben. 

Wenn Sie Ihren eigenen Merken-Button verwenden, haben wir ein paar Tipps für Sie:

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

Versuchen Sie es mit diesen Tipps:
 
  • Ihre 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.
  • Achten Sie darauf, dass Ihre Bilder nicht im CSS-Hintergrund definiert werden und dass jedes Bild über ein src-Attribut verfügt, das mit „img“ beginnt.
  • Fügen Sie 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 Ihrer 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 Sie Ihre Website dahingehend überprüfen.