Ein Pin It-Button ohne Plugin

functions.php, Pinterest

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:

[pin src=“https://bloghexe.de/wp-content/uploads/2022/09/pin-it-button-kein-plugin-bloghexe-pinterest.jpg“ alt=“Anleitung: so kannst du einen Pin It-Button ohne Plugin nutzen“]

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

Das findest du hier

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: