HM-AngebotsBlende (Angebote von Amazon nach onload per Inline-Frame laden - Release-Version 1.0)
Bekanntlich spielt die Ladezeit von Webseiten eine zuweilen nicht
unerhebliche Rolle und entscheidet mit darüber, ob Besucher genervt das Weite suchen. Die Ladezeit
wiederum ist abhängig von der Anzahl und größere der eingebundenen Ressourcen und von der Anzahl der
Requests, die erforderlich sind, um alle Ressourcen vom anzufordern.
Eine weitere Rolle für Besucher spielt das Design einer Website, welches sich den Screens von
unterschiedlichen Endgeräten so gut wie möglich anpassen sollt (responsives Webdesign).
Das auf dieser Seite vorgestellte Script verringern nicht die Anzahl der
eingebundenen Ressourcen, sorgt jedoch im Zusammenspiel mit einer der beiden iFrame-Varianten dafür (bei
der zweiten Variante handelt es sich um ein Plugin für WP), dass die erforderlichen Requests erst
ausgeführt werden, wenn das Fenster mit der HTML-Seite bereits geladen und somit für Besucher zugänglich
ist.
Weiterhin wird ebenfalls die Anzahl der Request dahingehend beeinflusst, dass die erforderliche XML vom
Amazon Server nur stündlich abgerufen wird und nicht bei jedem Aufruf der Seite.
Erwähnenswert ist ebenfalls, dass nicht nur die Höhe der Script-Seite an den Inline-Frame übermittelt
wird, sondern umgekehrt ebenfalls die Weite des Inline-Frames an die Script-Seite. Um auf eine
Verkleinerung oder Vergrößerung des Fensters und somit des Anzeigebereiches zu reagieren, erfolgt
(entsprechend der gegenwärtigen Einstellung) alle 0,4 Sekunden ein Abgleich.
Unterhalb einer Mindestbreite von 480 Pixeln für den Anzeigebereich werden die Einzelheiten zum Angebot
nicht mehr neben dem Produktbild dargestellt, sondern unterhalb des jeweiligen Images. Weiterhin werden
nur noch die wichtigsten Einzelheiten eingeblendet, womit das Script innerhalb einer Website mit
responsiven Webdesign verwendet werden kann.
Die ausgewählten Produkte bzw. die ausgewählten Angebote werden mit ihrer
Produkt-ID (ASIN) bei 'var artikel' im Code-Schnipsel für den Inline-Frame notiert. Es kann
eine einzelne ASIN für ein einzelnes ausgewähltes Angebot notiert werden oder mehrere, wobei mehrere
Produkt-IDs durch Minuszeichen bzw. Bindestriche wie im Beispiel ersichtlich zu verbinden sind.
Bei jeder Bearbeitung des Scripts, wozu auch das Einfügen der Produkt-IDs gehört, sollte (um
Probleme mit Umlauten vorzubeugen) darauf geachtet werden, dass die bearbeitete Datei mit UFT-8
ohne BOM gespeichert wird. Falls bisher nicht vorhanden, sollten Sie sich zu diesem Zweck einen
geeigneten Editor, wie zum Beispiel den Notepad++, installieren.
Die Speicherung des Caches erfolgt momentan im selben Verzeichnis, in dem die Script-Seite liegt. Insofern für die Speicherung ein gesondertes Verzeichnis erwünscht ist, können Sie die nachfolgende Zeile entsprechend editieren:
// von: $cachedatei = $this->rubrik."-".$artikelstring.".xml"; // in: $cachedatei = "name-des-verzeichnisses/".$this->rubrik."-"...
Code-Listing für die Einbindung des Inline-Frames in beliebige
HTML-Webseiten
(eine spezielle Plugin-Variante für WordPress wird unter dem
oben verlinkten Menüpunkt 'Inline-Frame als WP-Plugin' vorgestellt):
<!-- An beliebiger Stelle im Dokument einfügen --> <div id="platzhalter">Platzhalter für Angebote</div> <!-- Unterhalb des Platzhalters oder im Footer einfügen --> <script type="text/javascript"> "use strict"; if (window.addEventListener) { window.addEventListener("load", fuegeFrameEin, false); } else if (window.attachEvent) { window.attachEvent("onload", fuegeFrameEin); } function fuegeFrameEin() { var rubrik = "Books"; var artikel = "0123456789-0123456789-0123456789"; var fuegeein = "<p><iframe id='angebote' name='angebote' src='http://www.example.com/angebote-einholen.php?rubrik="+rubrik+"&artikel="+artikel+"' style='width:620px; height:200px; overflow:hidden; border:none'></iframe></p>"; document.getElementById("platzhalter").innerHTML = fuegeein; } </script>
Unabhängig davon, ob der iFrame mit dem hier vorgestellten Code-Schnipsel in eine beliebige HTML-Webseite eingebunden wird oder die spezielle Plugin-Variante für WordPress für die Einbindung verwendet wird, sollte für die zu ladende Script-Seite im iFrame nur die nachfolgende Datei verwendet werden. Zwar würde auch jede andere HTML-Seite im iFrame laden, doch nur das hier vorgestellte Script garantiert, dass die ID des iFrames und die IDs des Schripts richtig vom Script erkannt werden. Ohne Erkennung der IDs würden sich jedoch die Weite und Höhe des Inline-Frames und die Weite und Höhe der Seite im iFrame sich nicht wechselseitig anpassen. Die Lizenz GPL v2 bezieht sich dabei nur auf das der Einbindung in WP dienende Code-Listing der Datei angebote-onload.php, welche unter www.coder-welten.com/...onload-laden/ einsehbar ist.
Code-Listing der Datei angebote-einholen.php
<?php header("Content-Type: text/html; charset=UTF-8"); /*------------------------------------------------------------------------------------------------------------------ Software-Name: HM-AngebotsBlende Dateiname: angebote-einholen.php Beschreibung: PHP-Script für die Einbindung von einzelnen Produkten und Angeboten von Amazon Einzelheiten: http://www.coder-welten.com/einbinden-von-produkten-und-angeboten/ Autor: Horst Müller Version: Release 1.0 Datum: 22. Juni 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 ------------------------------------------------------------------------------------------------------------------- */ ?> <!DOCTYPE html> <html> <head> <title>Angebote, Produkte und Empfehlungen</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="robots" content="noindex,nofollow"> <style type="text/css"> body {margin:0px; font-size:14px} table {width:620px; text-align:center; border:none} .dklein {width:400px; text-align:center; padding-top:10px; padding-bottom:20px; border:none} .linien {color:#e2e2e2; background-color:#e2e2e2; margin:20px; border:0px; height:1px} .ftitele2 {font-size:16px; font-weight:normal; margin: 2px; color:#966c12} .ftitele3 {font-size:14px; font-weight:normal; margin-bottom:10px; margin-top:2px; color:#a88314} a.details:link, a.details:visited {text-decoration:none; color:#966c12} a.details:hover,a.details:active {text-decoration:none; color:#004080} a.hinweis:link, a.hinweis:visited {text-decoration:none; font-size:12px; color:#a88314} a.hinweis:hover,a.hinweis:active {text-decoration:none; font-size:12px; color:#004080} .inhalt {padding-top:20px; padding-bottom:20px} .randun {border-bottom:1px solid #e2e2e2} .abstand {padding-left:8px} </style> </head> <body> <?php /*----------------------------------------------------------------------------------- Nachfolgende Angaben müssen editiert werden. Weiterhin sollte unterhalb der Zeile 'Abschluss groß und klein' die richtige URL zum Impressum oder zu einer anderen Datei eingefügt werden, welche die Angaben zum Partnerprogramm enthält. ------------------------------------------------------------------------------------- */ $geheime_key_id = "xxx"; // Hier den geheimen Zugangs-Schlüssel eintragen $access_key_id = "xxx"; // Hier die AWSAccessKeyId eintragen $associate_id = "xxx-21"; // Hier die Partner-Id eintragen $rubrik = "Books"; // Als Vorwahl, nur für den Fall das nichts mit Get übergeben wurde $artikel = "0123456789"; // Als Vorwahl, nur für den Fall das nichts mit Get übergeben wurde /*----------------------------------------------------------------------------------- Klasse zur Übernahme und Auswertung der per QueryString übergebenen Parameter und Werte. Wurde nichts übergeben, werden die Werte für die vorgewählte Rubrik und für den vorgewählten Artikel weiterverarbeitet. ------------------------------------------------------------------------------------- */ class ParameterUebernahme { protected $rubrik; protected $artikel; protected function uebernehmeRubrik() { if(isset($_GET["rubrik"]) and !empty($_GET["rubrik"])){ $this->rubrik = $_GET["rubrik"]; $this->rubrik = preg_replace("/[^a-z]/i", "", $this->rubrik); } return $this->rubrik; } protected function uebernehmeArtikel() { if(isset($_GET["artikel"]) and !empty($_GET["artikel"])){ $this->artikel = $_GET["artikel"]; $this->artikel = preg_replace("/[^a-z0-9-]/i", "", $this->artikel); $this->artikel = str_replace("-", "%2C", $this->artikel); } return $this->artikel; } } /*----------------------------------------------------------------------------------- Eine Klasse zur Aufbereitung der Daten für die Anfrage beim Amazon-Server. ------------------------------------------------------------------------------------- */ class AnfrageDaten extends ParameterUebernahme { public $geheime_id; public $access_key_id; public $associate_id; public $artikel; public $datenneu; public function bereiteDatenAuf() { date_default_timezone_set("Europe/Berlin"); $aktuell = urlencode(gmdate("Y-m-d\TH:i:s\Z")); $imjahre = explode("-", $aktuell); /*--------------------------------------------------------------------------- Da ein Server bei jedem 8 bis 10 Aufruf das Jahr verschluckte, erfolgt eine Nachkontrolle. ----------------------------------------------------------------------------- */ if($imjahre[0] >0) $aktuelle = $aktuell; else { $datum = getdate(); $jahr = $datum["year"]; $aktuelle = urlencode($jahr."-".gmdate("m-d\TH:i:s\Z")); } $this->artikel = $this->uebernehmeArtikel(); $respara = "AWSAccessKeyId" ."=". $this->access_key_id ."&". "AssociateTag" ."=". $this->associate_id ."&". "ItemId" ."=". $this->artikel ."&". "Operation" ."=". "ItemLookup" ."&". "ResponseGroup" ."=". "Medium" ."&". "Service" ."=". "AWSECommerceService" ."&". "Timestamp" ."=". $aktuelle ."&". "Version" ."=". "2011-08-31"; $strgsigna = "GET\n"."ecs.amazonaws.de"."\n"."/onca/xml"."\n".$respara; $signature = base64_encode(hash_hmac("sha256", $strgsigna, $this->geheime_id, true)); $signature = urlencode($signature); $this->datenneu = "http://ecs.amazonaws.de/onca/xml?".$respara."&Signature=".$signature; return $this->datenneu; } } /*----------------------------------------------------------------------------------- Eine Klasse, um die XML mit einem oder mehreren Angeboten per cURL anzufordern, für eine begrenzte Zeit zu speichern (3.600 Sekunden abzüglich zwei Minuten) und diese XML als String direkt oder aus dem Cache zu laden. Im Falle eines Fehlers wird nur der HTTP-Statuscode gespeichert. ------------------------------------------------------------------------------------- */ class VerbindungsAufbau extends ParameterUebernahme { public $antwort; public $rubrik; public $artikel; private function initialisiere_cURL() { $agent = "Mozilla/5.0 (compatible; PHP-Script; +http://".$_SERVER["HTTP_HOST"].")"; $ch = curl_init($this->antwort); curl_setopt($ch, CURLOPT_HEADER, false); curl_setopt($ch, CURLOPT_USERAGENT, $agent); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); if (curl_exec($ch) !== false) { $response = curl_exec($ch); $statusco = curl_getinfo($ch, CURLINFO_HTTP_CODE); if ($statusco == 200 or $statusco == 301 or $statusco == 304){ $this->antwort = $response; } else {$this->antwort = $statusco; } } else {$this->antwort = 906; } curl_close($ch); return $this->antwort; } public function speichereCache() { $this->rubrik = $this->uebernehmeRubrik(); $this->artikel = $this->uebernehmeArtikel(); $artikelstring = preg_replace("/(%2C|%2c)/", "-", $this->artikel); $cachedatei = $this->rubrik."-".$artikelstring.".xml"; $cachezeit = time()-3480; if (file_exists($cachedatei) and filesize($cachedatei) > 1024){ if (filemtime($cachedatei) < $cachezeit){ $data = $this->initialisiere_cURL(); file_put_contents($cachedatei, $data, LOCK_EX) or die ("F Cache 1"); return $data; } else { if (is_readable($cachedatei)) { $data = file_get_contents($cachedatei); return $data; } else { $data = $this->initialisiere_cURL(); return $data; } } } else { $data = $this->initialisiere_cURL(); file_put_contents($cachedatei, $data, LOCK_EX) or die ("F Cache 2"); return $data; } } } /*----------------------------------------------------------------------------------- Aufbereitung der Daten aus der XML mit simpleXML für die Ausgabe. ------------------------------------------------------------------------------------- */ class AusgabeDaten { public $ladexml; public $sammlegr; public $sammlekl; private $pixelw = 100; private $pixelh = 160; public function leseString() { if (($response = simplexml_load_string($this->ladexml)) !== false) { if($response->Items->Item) { $this->sammlegr .= "<table id=\"einholen\">\n". "\x20\x20<tr>\n\t<td class=\"inhalt randun\" colspan=\"2\">". "<span class=\"ftitele3\">Buchempfehlungen</span><br />\n". "\t<em>Angebote erhältlich bei Amazon.de</em></td>\n\x20\x20</tr>\n"; $this->sammlekl .= "<div id=\"holeklein\" class=\"dklein\">\n". "<span class=\"ftitele3\">Buchempfehlungen</span><br />\n". "\t<em>Angebote erhältlich<br />\n\tbei Amazon.de</em><hr class=\"linien\" />\n"; foreach ($response->Items->Item as $movie) { /*-- Bild mit Link zur Detailseite -------------------------------*/ if ($movie->MediumImage->Width->attributes()) { $attr = $movie->MediumImage->Width->attributes(); if ($attr["Units"] == "pixels") $this->pixelw = $movie->MediumImage->Width; } if ($movie->MediumImage->Height->attributes()) { $attr = $movie->MediumImage->Height->attributes(); if ($attr["Units"] == "pixels") $this->pixelh = $movie->MediumImage->Height; } if ($movie->MediumImage->URL){ $this->sammlegr .= "\x20\x20<tr>\n\t<td class=\"inhalt randun abstand\">". "\t<a href=\"".htmlspecialchars($movie->DetailPageURL, ENT_QUOTES)."\" target=\"_blank\">". "<img src=\"".htmlspecialchars($movie->MediumImage->URL, ENT_QUOTES)."\" alt=\"Cover\" ". "style=\"width:".$this->pixelw."px; hight:".$this->pixelh."px; border-style:none\" /></a></td>\n". "\t<td class=\"inhalt randun\">"; } else { $this->sammlegr .= "\x20\x20<tr>\n\t<td class=\"inhalt randun abstand\">". "\tKein<br />\n\tBild<br />\n\tverfügbar</td>\n". "\t<td class=\"inhalt randun\">"; } /*-- Bild mit Link zur Detailseite klein -------------------------*/ if ($movie->MediumImage->URL){ $this->sammlekl .= "\x20\x20". "\t<a href=\"".htmlspecialchars($movie->DetailPageURL, ENT_QUOTES)."\" target=\"_blank\">". "<img src=\"".htmlspecialchars($movie->MediumImage->URL, ENT_QUOTES)."\" alt=\"Cover\" ". "style=\"width:".$this->pixelw."px; hight:".$this->pixelh."px; border-style:none\" /></a>\n"; } /*-- Der Titel für groß und klein --------------------------------*/ if ($movie->ItemAttributes->Title){ $titel = $movie->ItemAttributes->Title; $fuersammle = ""; if ((strpos($titel, ":")) !== false) { $titel = explode(":", $titel); $fuersammle .= "<h2 class=\"ftitele2\">".htmlspecialchars($titel[0], ENT_QUOTES)."</h2>\n"; $fuersammle .= "\t<h3 class=\"ftitele3\">".htmlspecialchars($titel[1], ENT_QUOTES)."</h3>\n"; } else { $fuersammle .= "\t<h2 class=\"ftitele2\">".htmlspecialchars($titel, ENT_QUOTES)."</h2>"; } $this->sammlegr .= $fuersammle; $this->sammlekl .= "\t".$fuersammle; } /*-- Autoren, Mitautoren und Uebersetzer -------------------------*/ if ($movie->ItemAttributes->Author[0]){ $this->sammlegr .= "\tAutor: ".htmlspecialchars($movie->ItemAttributes->Author[0], ENT_QUOTES); } if ($movie->ItemAttributes->Author[1]){ $this->sammlegr .= ", ".htmlspecialchars($movie->ItemAttributes->Author[1], ENT_QUOTES); } if ($movie->ItemAttributes->Author[2]){ $this->sammlegr .= ", ".htmlspecialchars($movie->ItemAttributes->Author[2], ENT_QUOTES); } /*-- Verlag oder Produzent, Art der Bindung, Datum ---------------*/ if ($movie->ItemAttributes->Publisher){ $this->sammlegr .= "<br />\n\tVerlag: ". htmlspecialchars($movie->ItemAttributes->Publisher, ENT_QUOTES); } if ($movie->ItemAttributes->Binding){ $this->sammlegr .= " - ".htmlspecialchars($movie->ItemAttributes->Binding, ENT_QUOTES); } if ($movie->ItemAttributes->PublicationDate){ $this->sammlegr .= "<br />\n\terschienen: ". htmlspecialchars($movie->ItemAttributes->PublicationDate, ENT_QUOTES); } /*-- Neupreis groß und klein -------------------------------------*/ $sammlepreis = ""; if ($movie->OfferSummary->LowestNewPrice->FormattedPrice){ $sammlepreis .= "<br />\n\tPreis: ". htmlspecialchars($movie->OfferSummary->LowestNewPrice->FormattedPrice, ENT_QUOTES); } else { $sammlepreis .= "<br />\n\tPreis: keine Angaben"; } $this->sammlegr .= $sammlepreis; $this->sammlekl .= "\t".$sammlepreis; /*-- Angebotspreis groß und klein --------------------------------*/ if ($movie->OfferSummary->LowestUsedPrice->FormattedPrice){ $this->sammlegr .= " / erhältlich ab: ". htmlspecialchars($movie->OfferSummary->LowestUsedPrice->FormattedPrice, ENT_QUOTES); } if ($movie->OfferSummary->LowestUsedPrice->FormattedPrice){ $this->sammlekl .= "\n\t<br />erhältlich ab: ". htmlspecialchars($movie->OfferSummary->LowestUsedPrice->FormattedPrice, ENT_QUOTES); } /*-- Link zur Detailseite groß und klein --------------------------*/ if ($movie->DetailPageURL){ $this->sammlegr .= "<br />\n\t<br />\n\t» <a href=\"". htmlspecialchars($movie->DetailPageURL, ENT_QUOTES)."\" ". "class=\"details\" target=\"_blank\">weitere Details bei Amazon.de</a> «<br />". "</td>\n\x20\x20</tr>\n"; $this->sammlekl .= "<br />\n\t<br />\n\t<a href=\"". htmlspecialchars($movie->DetailPageURL, ENT_QUOTES)."\" ". "class=\"details\" target=\"_blank\">weitere Details bei:<br />\n". "\t» Amazon.de «</a>\n\t<hr class=\"linien\" />\n"; } } /*-- Abschluss groß und klein -----------------------------------------*/ $this->sammlegr .= "\x20\x20<tr>\n\t<td class=\"inhalt\" colspan=\"2\">\n". "\t<em>Einblendungen per Amazon Web Services</em><br />\n". "\t<a href=\"http://www.example.com/impressum/#partnerprogramm\" target=\"_top\" ". "class=\"hinweis\">» Hinweise zum Partnerprogramm von Amazon «</a></td>\n\x20\x20</tr>\n". "</table>\n"; $this->sammlekl .= "\t<em>Einblendungen per Amazon Web Services</em><br />\n". "\t<a href=\"http://www.example.com/impressum/#partnerprogramm\" target=\"_top\" ". "class=\"hinweis\">» Hinweise zum Partnerprogramm von Amazon «</a>\n". "</div>\n"; } } } } $fuerrespo = new AnfrageDaten(); // Instanziieren des Objektes AnfrageDaten $fuerrespo->geheime_id = $geheime_key_id; // Zuweisung der Werte für die Eigenschaften $fuerrespo->access_key_id = $access_key_id; $fuerrespo->associate_id = $associate_id; $fuerrespo->artikel = $artikel; $verbinden = $fuerrespo->bereiteDatenAuf(); // Rückgabewert der Methode bereiteDatenAuf in der Variablen $verbinden speichern $verbindung = new VerbindungsAufbau(); // Instanziieren des Objektes VerbindungsAufbau $verbindung->rubrik = $rubrik; // Zuweisung des Wertes für die Eigenschaften rubrik $verbindung->artikel = $artikel; // Zuweisung des Wertes für die Eigenschaften artikel $verbindung->antwort = $verbinden; // Übernahme des Rückgabewertes der Methode 'bereiteDatenAuf' der Eigenschaft $antwort zuweisen $ladestring = $verbindung->speichereCache(); // Rückgabewert der Methode 'speichereCache' in derVariablen $ladestring speichern $ausgabegro = new AusgabeDaten(); // Instanziieren des Objektes AusgabeDaten $ausgabegro->ladexml = $ladestring; // Übernahme des Rückgabewertes der Methode 'speichereCache' der Eigenschaft $ladexml zuweisen $ausgabegro->leseString(); // Aufruf der Methode leseString echo $ausgabegro->sammlegr; // Ausgabe für Endgeräte mit größeren Screens echo $ausgabegro->sammlekl; // Ausgabe für Endgeräte mit kleineren Screens ?> <script type="text/javascript"> "use strict"; window.onload = function() { pruefeHoeheWeite(); } function pruefeHoeheWeite() { /*-- Elemente --*/ var einholen_e = document.getElementById("einholen"); var holklein_e = document.getElementById("holeklein"); var angebote_e = parent.document.getElementById("angebote"); /*-- Eingangswerte, Korrekturwerte, Ausgangswert Höhe Frame --*/ var diehoehe = einholen_e.offsetHeight + 4; var hdkleine = holklein_e.offsetHeight + 4; var vonweite = angebote_e.offsetWidth; var fuerweit = vonweite -6; /*-- Responsive Regelung von Ansicht, Höhe und Breite --*/ if (vonweite >= 480) { angebote_e.style.height = diehoehe +"px"; einholen_e.style.display = "block"; einholen_e.style.width = fuerweit +"px"; holklein_e.style.display = "none"; } else if (vonweite < 480) { angebote_e.style.height = hdkleine +"px"; holklein_e.style.display = "block"; holklein_e.style.width = fuerweit +"px"; einholen_e.style.display = "none"; } window.setTimeout("pruefeHoeheWeite()", 400); } </script> </body> </html>