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!
