Ein Pin It-Button ohne Plugin

Mit dieser Anleitung kannst du ganz leicht einen eigenen Pin It-Button in deine Webseite einbauen – für WordPress sogar mit einem eleganten Shortcode:



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:

Shortcode in WordPress einfügen - Pin It-Button

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

    Kommentare

  1. INA am 14. März 2019 um 19:08:

    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 am 15. März 2019 um 15:22:

      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 am 15. März 2019 um 15:33:

    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 am 15. März 2019 um 17:04:

    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. Das war mein März 2019 - Himmelsblau.org am 17. April 2019 um 10:01:

    […] 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 […]

Schreibe einen Kommentar

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