Pin It-Button ohne Plugin erstellen

Ein Pin It-Button ohne Plugin

So ein Pin It-Button ist eine schnieke Sache: deine Leser können darüber ein Bild auf Pinterest teilen und deine Artikel somit bekannter machen. So schaut das Ganze aus – klick mal auf die Grafik:

Es gibt natürlich entsprechende Plugins dafür, aber du kannst diese Funktionalität auch ziemlich einfach selbst basteln. So handhabe ich das etwa hier im Blog.

In diesem Tutorial lernst du, wie du ein Pin It-Feature selber baust!
Übrigens kannst du den Code auch außerhalb von WordPress verwenden. 🙂

Wie funktioniert das Pinnen?

Schauen wir uns erstmal an, wie das Pinnen von einer externen Webseite überhaupt läuft. Das geht herzlich simpel – du brauchst dazu nur einen stinknormalen Link mit einigen Parametern.

  • die Linkadresse lautet https://pinterest.com/pin/create/button
  • daran hängst du 3 Parameter:
    • url: der Link zu deinem Artikel
    • media: der Link zu der Grafik, die gepinnt werden soll
    • description: die Beschreibung deines Pins

Wie immer hängst du den ersten Parameter über ein ? an und alle weiteren mit einem &.

Ein vollständiger Link sieht damit beispielsweise so aus:

<a href="https://pinterest.com/pin/create/button/?url=https://deinblog.de/toller-artikel/&media=https://deinblog.de/tolles-bild.jpg&description=Toller Artikel über ein tolles Thema" target="_blank">Pin mich</a>

Das Schöne hieran ist: in Sachen DSGVO bist du hiermit auf der sicheren Seite. Viele Plugins ziehen nämlich eine von Pinterest bereitgestellte JavaScript-Datei ein, über die Pinterest auf deiner Seite im Hintergrund „mithorchen“ könnte. Da wir hier aber nur einen ganz normalen Hyperlink setzen, werden erst dann Daten an Pinterest übermittelt, wenn jemand den Link anklickt und somit die Seite aufruft – wie überall im Internet.

Jetzt kommt das Styling

In Sachen Usability ist es immer gut, das Rad nicht völlig neu zu erfinden und stattdessen Konventionen zu folgen – sonst verwirrst du deine Leser.

Wir werden also ganz klassisch dafür sorgen, dass das pinnbare Bild direkt im Artikel angezeigt wird. Beim Überfahren mit der Maus soll es ein bisschen verblassen und ein Pinterest-Logo soll erscheinen.
Diesen Effekt möchte ich nur auf Bildschirmen mit einer gewissen Mindestgröße haben.
Außerdem wollen wir ja niemandem mit einem riesigen Bild erschlagen, deswegen verkleinern wir die Grafik für die Anzeige im Artikel ein bisschen.

Hier ist erstmal der ganze HTML-Code:

<div class="pinterest-link">
   <img src="https://deinblog.de/tolles-bild.jpg" alt="Toller Artikel über ein tolles Thema">
      <a target="_blank" href="https://pinterest.com/pin/create/button/?url=https://deinblog.de/toller-artikel/&media=https://deinblog.de/tolles-bild.jpg&description=Toller Artikel über ein tolles Thema" title=" Auf Pinterest merken">
         <i class="fab fa-pinterest-square"></i>
   </a>
</div>

Bild, Link und Icon packen wir zusammen in ein div mit der Klasse .pinterest-link. Das Icon wird über Font Awesome und das <i> generiert. Falls dein Layout Font Awesome noch nicht nutzt, musst du also noch die entsprechende CSS-Datei einbinden.

Der folgende Code stylt die ganze Sache:

.pinterest-link {
    text-align: center;
}

.pinterest-link img {
    height: auto;
    max-width: 100%;
    margin-bottom: 30px;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

.pinterest-link i {
  display: none;
}

@media only screen and (min-width: 767px) {
	.pinterest-link {
    	position: relative;
      	overflow: hidden; 
    }

    .pinterest-link img {
        max-width: 400px;
        width:100%;
      	transition: all 100ms linear; 
    }

    .pinterest-link i {
      	display: inline;
    }

    .pinterest-link:hover img {
      	opacity: 0.5;
    }

    .pinterest-link:hover a {
      	opacity: 1; 
      	top: 0;
      	z-index: 500;
    }

    .pinterest-link:hover a i {
	top: 50px;
	position: absolute;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	font-size: 60px;
	color: #E33979;
    }

    .pinterest-link a {
	display: block;
	position: absolute;
	top: -100%;
	opacity: 0;
	left: 0;
	bottom: 0;
	right: 0;
	text-align: center;
	color: inherit;
    }
}

Die Farben und so weiter kannst du natürlich an deinen Blog anpassen.

Ein Pin It als Shortcode

Sofern du keinen WordPress-Blog nutzt, kannst du die drei oben genannten Parameter einfach manuell eintragen. In WordPress geht es noch einen Schritt eleganter: wir bauen uns einen entsprechenden Shortcode!

Füge den folgenden Code in deine functions.php ein:

// Shortcode für das Pinterest-Bild
function pin_shortcode( $atts, $content = null ) {   
    $title = ( isset( $atts['title'] ) ) ? $atts['title'] : 'Auf Pinterest merken';
    $postpermalink = urlencode( get_permalink() ); // Link zum Beitrag
    $posttitle =  get_the_title(); // Titel des Beitrags

  extract(shortcode_atts( array('src' => '', 'alt' => ''), $atts ));

    $html = 
        '<div class="pinterest-link">
            <img src="' . $src . '" alt="'. $alt .' " class="size-full aligncenter">
        <a target="blank" href="https://pinterest.com/pin/create/button/?url=' 
        . $postpermalink 
        . '&media='
        . $src
        . '&description='
        .  $alt
        . '" title=" '. $title .'"><i class="fab fa-pinterest-square"></i>
        
        </a></div>';

    return $html;
}
add_shortcode( 'pin', 'pin_shortcode' );

In deinem Beitrag kannst du dann einen Shortcode einfügen, dem du nur den Link zu deiner Grafik mitteilst sowie den Text, der auf Pinterest als Beschreibung angzeigt werden soll.

Für die Pinterest-Grafik am Anfang von diesem Artikel hier sieht das zum Beispiel so aus:

Pin It-Button ohne Plugin erstellen

Die Adresse deines Beitrags fügt WordPress automatisch ein.


Ich hoffe, diese Anleitung hat dir weitergeholfen!
In diesem Falle würde ich mich natürlich freuen, wenn du sie pinnst. 😉

9 Kommentare

  1. INA sagt:

    Danke für die Anleitung … hatte ich eigentlich auch auf dem Schirm, aber in Zeiten von DSGVO weiß ich nicht, ob selbst der selbstgemachte Button okay ist. Fakt ist, es darf ja keine Verbindung zum Pinterest-Server hergestellt werden, kann man ja mit den Developer Tools -> Netzwerk testen.
    Ich bin daher echt unschlüssig … wie ist das dann im Bezug auf deine Anleitung, ist das dann „safe“?

    • Anne sagt:

      Hallo Ina,

      das ist das Schöne an dieser Lösung: solange du nicht auf den Link klickst (und damit halt ganz normal Pinterest aufrufst), besteht keine Verbindung zu Pinterest. Bei vielen Plugins ist das anders, da sie grundsätzlich eine von Pinterest bereitgestellte JavaScript-Datei einbinden und Pinterest darüber schon auf der Webseite „mithorchen“ kann.
      Den Hinweis ergänze ich oben im Artikel gleich nochmal, danke. 🙂

      Viele Grüße
      Anne

  2. Jasmina sagt:

    Hi Anne,

    <3-lichen Dank für die umfassende Anleitung. Habe ich direkt auf meiner ToDo-Liste:Plugin raus schmeißen und die Code Snippets einfügen 🙂

    DANKE und Liebe Grüße
    Jasmina

  3. INA sagt:

    wow, danke Anne, wenn das echt so einfach und DSGVO konform geht … muss ich dann doch echt mal ausprobieren. Das Plugin hab ich nämlich genau aus dem Grund leider rausgeworfen (müssen).

  4. […] WWW gab es eine Anleitung für die Einbindung eines Pinbuttons bei Anne, Sabine zeigt kulinarische zero-waste Adressen in Hamburg und Bine spricht über das […]

  5. Sabrina sagt:

    Ein toller, hilfreicher Beitrag. Das ist wirklich toll, dass du eine Lösung gefunden hast, wie man Beiträge weiterhin vom Blog aus teilen kann – und das ganz ohne sich in einer Grauzone zu bewegen. 🙂

    An welcher Stelle des funktion.php muss der Code denn eingebaut werden?

    Liebe Grüße an Dich!

    • Anne sagt:

      Hallo Sabrina,

      es freut mich, dass ich dir da weiterhelfen konnte! 🙂

      In welcher Reihenfolge die einzelnen Funktionen in der functions.php stehen, ist egal. Im Zweifelsfall setzt du es einfach ganz ans Ende. 🙂

      Liebe Grüße
      Anne

  6. Sabrina sagt:

    Wahnsinns Post! Ich dachte schon mein Kopf explodiet bei den ganzen opt in Regularien und dann finde ich deinen Post, wirklich super. Wir werden sehen wie gut ich das hinbekomme aber auf jeden Fall wirkt es simpler auf mich als diese ganze Optin Geschichte 😀

    Würde das auch mit Instagram so funktionieren? Man pinnt natürlich den Beitrag nicht aber als Link zu dem jeweiligen Post? Ich bin totale Anfängerin also falls diese Frage dämlich ist,einfach ignorieren😀

    • Anne sagt:

      Hallo Sabrina,

      freut mich, dass ich dir weiterhelfen konnte! 🙂

      Hmm, was genau möchtest du mit Instagram denn machen? Ein bereits dort gepostetes Foto bei dir anzeigen? – Das geht nicht so ohne weiteres. Denn das würde ja bedeuten, dass du ein von Instagram gehostetes Bild bei dir einbindest, was rechtliche Fragen aufwirft und halt auch in Sachen Datenschutz problematisch ist. Aber vielleicht hab ich deine Frage auch einfach nicht richtig verstanden. Was genau möchtest du denn machen? 🙂

Schreibe einen Kommentar

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

Ich freue mich über jeden ehrlichen Kommentar und gebe mein Bestes, alle Kommentare zeitnah zu beantworten!

Ein Hinweis an die Spam-Fraktion: Ich überprüfe die Kommentare vor dem Freischalten. Wer etwa scheinheilig fragt, ob wir einen Malerbetrieb empfehlen können, nur um selber einen ebensolchen als Link anzugeben - der kann sich seine Mühe sparen.