Login Pop-up

+ 49(0)6407) 905691 Login
Montag, Juni 27, 2016

Der dynamische Pinterest Button für Wordpress und Joomla

by / Montag, 11 Juni 2012 / 2 Kommentare

Pinterest-Button-fuer-Joomla-und-Wordpress

Nachdem die "Probiere-den-neuesten-Hype-aus-Nutzer" Pinterest wieder den Rücken gekehrt haben, haben sich die Nutzerzahlen, des noch jungen sozialen Netzwerkes, relativ  stabil bei ca. 9 Millionen wiederkehrender Nutzer mit munteren Pin-Boards eingespielt. Ob sich Pinterest neben Facebook, Twitter und Google+ als weiterer, ernstzunehmender Multiplikator im Mix der sozialen Netzwerke etablieren wird muss sich noch rausstellen. Unter Beobachtung steht die Plattform alle Male, denn Pinterest-Backlinks sind immer an vorderer Front in den Google SERPs  zu finden. Fun für den Privat-Bereich und erkennbarer Nutzen für das Business-Profil sind also gegeben. Für den Business-Bereich ist natürlich einfaches Handling beim Teilen der Inhalte von der Firmen Webseite ein Muss. Der Pinterest-Button, der im Style des Google+ Buttons angeboten wird, erweist sich hier als Hemmschuh. Während Google- und Facebook-Button dynamisch die zu teilenden Inhalte über Metatag-ähnliche Strukturen einlesen wird, der Pinterest Button über einen Wizzard statisch zur jeweiligen URL generiert und bringt keine eigene Dynamik mit. Hier muss also eine PHP-Routine her um den Button im Artikel bzw. auf der Webseite passend zum jeweiligen Inhalt zu generieren, damit er auf Klick den Titel, die URL und den Bildlink für den Pin generiert.

Inzwischen gibt es Plugins und Module die den Button per Installation in die Seite einbauen. Allerdings ist man damit nicht sehr flexibel und muss sich dem Geschmack des Programmierers ergeben. Bei den beiden hier vorgestellten Lösungen kann der Button an quasi beliebigerer Stelle zu Beginn oder am Ende des Artikels eingebunden werden. Selbst ein Einbinden in bestehende Module/Plugins ist möglich um bereits vorhandene Social-Button-Leisten um den Pinterest-Button zu erweitern.

Wichtig ist eine Datensicherung der Seite bevor mit dem Einbau begonnen wird. Das sollte aber selbstverständlich sein, auch bei solch einfachen Eingriffen in den Quellcode.

Da Joomla und Wordpress selbstredend unterschiedliche Frameworks nutzen sind natürlich auch unterschiedliche Ansätze notwendig. Zum Bearbeiten und Einfügen des Button Code eignet sich hervorragend Notepad++ das hier heruntergeladen werden kann. Als FTP-Client empfehlen wir das Open-Source Programm Filezilla.

1. Der dynamische Pinterest Button für Wordpress

Der Button besteht im Prinzip aus zwei Code-Schnippseln. Zum Einen aus dem Initialisierungsscript, das seitenweit gilt und zum Anderen aus dem eigentlichen Code, der an der Stelle eingefügt wird wo der Button erscheinen soll.

Das Initialierunfgsscript des Buttons

wird in der Datei "wp-content\themes\IHR TEMPLATE\footer.php" direkt über dem schließenden </BODY> Tag eingefügt. Laden Sie hierzu die Datei mit dem FTP-Client zum Bearbeiten auf Ihren Rechner.

Kopieren Sie die folgende Scriptzeile und fügen fügen Sie das Schnippsel in footer.php ein.

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

Speichern Sie die Datei ab und laden Sie sie wieder per FTP an den Ursprungsort ( "wp-content\themes\IHR TEMPLATE\" ) auf Ihren Webserver zurück.

Der eigentliche Pinterest Button-Code

ist die angepasste Variante des statischen, auf der Pinterest-Seite angebotenen Snippets. Die Variablen url, media und description werden mit den per PHP ausgelesenen aktuellen Werten des Artikels gefüllt. Der Code wird in der Datei "wp-content\themes/IHR TEMPLATE/single.php" eingefügt. Kopieren Sie folgende Zeilen :

<!--      Begin Pinterest Button Solution for Wordpress       -->    
<a href="http://pinterest.com/pin/create/button/?url=<?php echo the_permalink(); ?>
&media=<?php echo $image["url"];?>&description= "  
class="pin-it-button" count-layout="horizontal"><img border="0" 
src="//assets.pinterest.com/images/PinExt.png" title="Pin it" /></a>
<!--      End Pinterest Button Solution for Wordpress         -->

und fügen Sie das Schnipsel an geeigneter Stelle ein. Wenn schon andere Schaltflächen vorhanden sind, einfach vor oder nach diesen den Code einfügen. Ansonsten ist der Absatz nach <?php the_title(); ?> (oberhalb des Artikeltextes) oder nach <?php the_content(); ?> ” (unterhalb des Artikeltextes) geignet. Ein wenig Probieren ist erlaubt.

Will man den Button zusätzlich auf der Startseite ist der Wizard von Pinterest durchaus geeignet, da man zur Wiedererkennung das Bild, den Text und auch die URL am besten manuell vorgibt. Hier sollte der Code dann auch in der Datei : "wp-content\themes/IHR TEMPLATE/footer.php" eingebunden werden.

 

2. Der dynamische Pinterest Button für Joomla

Auch bei Joomla sind zwei Schritte nötig.

Das Initialierungsscript des Pinterest Buttons,

also die Initialsierungszeile

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

ist obligatorisch und muss zunächst in die Datei "/template/IHR TEMPLATE/index.php" direkt über dem schließenden </BODY> Tag eingefügt werden. Im zweiten Schritt wird

Der eigentliche Pinterest Button-Code,

den Sie bitte hier kopieren:

<!--        Begin Pinterest Button Solution for Joomla         -->    
<?php  
$buttonlayout = "horizontal";
// Get Item URL --------------------------------------------------
$itemurl = JURI::root() . substr(JRoute::_(JRequest::getURI( )),1);
// Get first Picture URL -----------------------------------------
preg_match("/(<img[^>]+?>)/i", $this->item->text, $res);
list(, $imgtag) = $res;
preg_match("/src=\"(.+?)\"/i", $imgtag, $res);
list(, $imgsrc) = $res;
$picurl=JURI::root().$imgsrc;
// Get current title ---------------------------------------------
$doc=&JFactory::getDocument();
$ctitle=$doc->getTitle(); 
// Button Code ---------------------------------------------------
echo '<a href="http://pinterest.com/pin/create/button/?url=' . 
$itemurl . '&media='. $picurl . '&description=' . $ctitle .   '" 
class="pin-it-button" count-layout="'. $buttonlayout . '">
<img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin it" />'; 
?>
<!--       End Pinterest Button Solution for Joomla            --> 

an entsprechender Stelle über oder unter dem Artikel in der Datei
"templates/IHR TEMPLATE/html/com_content\article/default.php" eingefügt.
Bei Joomla 2.5 ist dies nach der Zeile <?php echo $this->item->event->afterDisplayContent; ?>

Sollte die K2-Blog Komponente installiert sein ist es die Datei "/templates/IHR TEMPLATE/com_k2/blog/item.php". Hier sollte das Code-Schnipsel nach der Zeile <?php echo $this->item->event->K2AfterDisplayContent; ?> eingefügt werden. Eventuell auch außerhalb des, den Container schließenden </div>, falls der Abstand zum Text zu gering ist.

Zu beachten ist, dass Bildnamen auf der Homepage keine Leerzeichen, Umlaute oder Sonderzeichen enthalten sollten.

Links, hier drunter sehen Sie den Pinterest Button in Action!

2 Kommentare

  • Kommentar-Link Freitag, 15 Juni 2012 17:55 gepostet von Arnold Margolf

    Wenn Du mir sagst wie das Plugin heißt schicke ich Dir den PHP Code für den Pinterest-Button per Mail

    Melden
  • Kommentar-Link Freitag, 15 Juni 2012 14:51 gepostet von Marko Buhlmann

    Würde gerne ein Wordpress Plugin um den Pinterest-Button erweitern. Irgend einen Tipp dazu ?

    Melden

Schreibe einen Kommentar

Achten Sie darauf, die erforderlichen Informationen einzugeben (mit Stern * gekennzeichnet).
HTML-Code ist nicht erlaubt.

Kommentare

Wichtiges zum Schluss

The Internet? We are not interested in it!

Bill Gates, 1993

Zufriedene Kunden kommen wieder. Begeisterte Kunden bringen ihre Freunde mit.

Prof. Dr. Thomas K. Stauffert

640K ought to be enough for anybody.

Bill Gates, 1981

Je planmäßiger ein Mensch googelt, desto wirksamer vermag ihn die Werbung zu treffen.

Unbekannter Author
TWEET | PLUS | LIKE
Anmelden

Anmelden

Benutzername: *
Passwort: *
Angemeldet bleiben
Scroll to top