WP Shortcode für die Einbindung von Angeboten per iFrame

Einbinden Produkten und Angeboten

In diesem Beitrag möchten wir ein Tutorial beginnen, dass sich mit der Einbindung von Produkten und Angeboten per iFrame beschäftigt. Zu den veröffentlichten Beispielen und Code-Listings sei einführend bemerkt, dass sich diese Art der Einbindung praktisch für die Ausgabe von Web-Inhalten aus unterschiedlichen Quellen eignet. Wenn in diesem Tutorial dennoch speziell auf Angebote von Amazon eingegangen wird, so lediglich aus dem Grund, weil sich die Angebote von Amazon leicht per Web Service abrufen lassen.

Dieses Tutorial besteht aus mehreren Seiten, wobei auf der einführenden Seite ein Plugin für den iFrame vorgestellt wird, welches jedoch noch Wünsche offen lässt. Eine erweiterte Variante wird auf Seite 2 (onLoad-Variante) vorgestellt.
Ein PHP-Script, welches als ‘In-Frame-Seite’ für die Anforderung der ausgewählten Angebote von Amazon im iFrame referenziert wird, stellen wir ebenfalls vor, jedoch wurde das Code-Listing für diese Script-Seite (angebote-einholen.php) unter einer anderen Domain veröffentlicht, da es sich für die Einfügung in einem Blogbeitrag für zu unhandlich (zu lang) erwies. Ob noch weitere Scripts vorgestellt werden, die zur Nutzung des Amazon Web Service geeignet sind, steht zum jetzigen Zeitpunkt noch nicht fest.

Übersicht:

Einbettung eines Inline-Frames

Die Einbettung eines iFrames in eine Webseite bereitet mehrheitlich keine Probleme, gleich ob es sich dabei um eine WordPress-Beitragsseite handelt oder um eine beliebige andere HTML-Seite. Ein kleiner Unterschied besteht lediglich zwischen den HTML Versionen. War es unter HTML 4.0.1 noch üblich typische Eigenschaften innerhalb des öffnenden Frame-Tags mit Frame-Attributen zu definieren, sollte diese Schreibweise unter HTML5 durch CSS ersetzt werden.

Wie bereits erwähnt, praktisch besteht kein Unterschied zwischen der Einbettung eines Inline-Frames in WordPress-Seiten gegenüber einer Einbettung in andere HTML-Seiten. Nur bietet WP zusätzlich noch die Möglichkeit, die Einbettung von häufig benutzten Elementen durch die Verwendung von Shortcodes zu erleichtern. So genügt es einen Quelltext-Schnipsel, der auf unterschiedlichen Beitragsseiten benötigt wird, nur noch einmal innerhalb eines kleinen Plugins zu notieren. Ändern sich dabei von Seite zu Seite die Werte einiger Attribute oder Parameter, können diese ebenfalls mit dem Shortcode übergeben werden.

Erster Beispiel-Shortcode mit Übergabe der gewünschten Rubrik und der Artikelnummer:

[angebote_von_amazon rubrik="Books" artikel="0123456789"]

Mehrere Artikel lassen sich innerhalb einer Seite anzeigen, in dem die gewünschten Artikelnummern durch ein Minuszeichen getrennt (oder eigentlich verbunden) notiert werden.

[angebote_von_amazon rubrik="Books" artikel="0123456789-0123456789"]

Die mit dem Shortcode übergebenen Attribute und Werte werden von WP bei der Übergabe in ein assoziatives Array gespeichert, aus dem die Werte wie aus jedem anderen Array ausgelesen werden können.
Erwähnenswert ist weiterhin die WP Funktion plugins_url, die stets die richtige URL und somit den richtigen Pfad zur Seite im iFrame liefern sollte, gleich unter welcher Domain und in welchem Verzeichnis WordPress installiert wurde. Die magische PHP Konstante __ FILE__ liefert dabei den vollständigen Pfad zur Plugin-Seite und die WP Funktion plugins_url übernimmt diesen für die angegebene Datei. Voraussetzung ist lediglich, dass die aufgerufene Datei im selben Plugin-Verzeichnis abgelegt wurde.

Der restliche Code ist eigentlich keiner weiteren Erwähnung wert, einzig dass lieber einmal zu viel als einmal zu wenig gefiltert werden sollte.

<?php
/*-----------------------------------------------------------------------------------
 Plugin Name: HM-Inline-Frame
 Plugin URI:  http://www.coder-welten.com/einbinden-von-produkten-und-angeboten/
 Description: Inline-Frame für die Einbindung von einzelnen Produkten und Angeboten mit Shortcode, wobei die Rubrik und die ASIN des gewünschten Artikels zu übergeben ist. Ein Beispiel [angebote_von_amazon rubrik="Books" artikel="0123456789"]
 Author:      Horst Müller
 Version:     Beta 1.00
 Author URI:  http://www.coder-welten.com
 Datum:       16. September 2013
 License:     GPL v2 und Lizenz für Software

 *  PHP- und HTML-Code der Pluginseite angebote-onload.php stehen unter der GNU General Public License (GPL) Version 2
 *  http://www.gnu.org/licenses/gpl-2.0.txt
 *  JavaScript- und CSS-Code sowie die Angebotsseite angebote-einholen.php stehen unter der Lizenz für Software vom Verlag
 *  http://www.coder-welten.de/projekte/lizenz-fuer-software.htm

 Copyright:   © 2006/2013 - Verlag Horst Müller - Stendal
-------------------------------------------------------------------------------------
*/
add_shortcode("angebote_von_amazon", "einbinden_von_Produkten_und_Angeboten");

function einbinden_von_Produkten_und_Angeboten($atts) {

    /*-------------------------------------------------------------------------------
     Die Breite und Höhe des iFrames wird durch JavaScript korrigiert.
    ---------------------------------------------------------------------------------
    */
    $urlpfad = plugins_url("angebote-einholen.php", __FILE__);
    $dwidth  = 420;
    $dheight = 200;
    $rubrik  = $atts["rubrik"];
    $artikel = $atts["artikel"];
    $rubrik  = preg_replace("/[^a-z]/i", "", $rubrik);
    $artikel = preg_replace("/[^a-z0-9-]/i", "", $artikel);

    $deframe = "<iframe id=\"angebote\" name=\"angebote\" ".
    "src=\"".$urlpfad."?rubrik=".$rubrik."&amp;artikel=".$artikel."\" ".
    "style=\"width:".$dwidth."px; height:".$dheight."px; overflow:hidden; border:none\">".
    "</iframe>\n";

    return $deframe;
}
?>

Hinweis: Eine Mindesthöhe sollte vorgewählt werden, um die Seite oder deren Content auch noch dann anzuzeigen, wenn JavaScript deaktiviert ist. Ist JavaScript hingegen aktiviert, passt sich die Höhe des Inline-Frames dem Content der Seite im Frame an. Der JavaScript Code für diese Anpassung befindet sich im Script angebote-einholen.php, das wir auf einer anderen Seite vorstellen.

Das auf der nächsten Seite vorgestellte Plugin mit dem Script für die Seite im iFrame in Aktion:

Platzhalter AWS

Hinterlasse eine Antwort

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