Die meisten Widgets kommen per Script-Tag auf die Seite. Der Browser lädt die Seite, dann das Skript, und erst das Skript baut das Widget. Bis dahin gibt es das Widget nicht. Eine Suchmaschine, die kein JavaScript ausführt, sieht es nie, und ein Besucher mit abgeschaltetem JavaScript auch nicht.

Widget Storm hat ebenfalls einen Script-Tag, und warum wir dabei ohne iframe auskommen, steht in Native Widgets vs. iframe-Embeds. Auf einer PHP-Seite würden wir aber den anderen Weg nehmen. Dann rendert Ihr Server das Widget gleich mit.

Eine Zeile PHP

In der Station laden Sie zwei Dateien herunter, Ihre persönliche wgclient.php und die wghandler.php. In der wgclient.php steckt Ihr Kontoschlüssel, also behandeln Sie sie wie ein Passwort. Legen Sie beide neben Ihre Seite und schreiben Sie:

<?php include "wgclient.php";
$wg->get("wg_flipcard", "WidgetStormSystem", '{"front":"Was ist das?","back":"Auf dem Server gerendert."}', "php"); ?>

Ein echo brauchen Sie nicht, $wg->get() gibt das HTML selbst aus.

So prüfen Sie, ob es geklappt hat

Öffnen Sie die Seite im Browser und lassen Sie sich den Quelltext anzeigen, in den meisten Browsern mit Strg+U. Dort steht jetzt das HTML des Widgets, in diesem Beispiel ein <div class="wg-flipcard"> mit Ihrem Text „Was ist das?“. Genau dieses HTML bekommt auch eine Suchmaschine.

Neben Ihrer Seite liegt außerdem ein neuer Ordner wgbuilds/WidgetStormSystem/ mit den Dateien des Widgets. Dazu gleich mehr.

CSS in den Kopf, JavaScript ans Ende

Das vierte Argument bestimmt, was zurückkommt. "php" liefert nur das HTML, "css" nur die Stile, "js" nur das Skript. Ein leerer String liefert alles zusammen, verpackt in einen Style- und einen Script-Tag. So verteilen Sie die Teile auf die üblichen Plätze:

<?php include "wgclient.php"; ?>
<!doctype html>
<html lang="de">
<head>
  <style><?php $wg->get("wg_flipcard", "WidgetStormSystem", '', "css"); ?></style>
</head>
<body>
  <?php $wg->get("wg_flipcard", "WidgetStormSystem", '{"front":"Was ist das?","back":"Auf dem Server gerendert."}', "php"); ?>
  <script><?php $wg->get("wg_flipcard", "WidgetStormSystem", '', "js"); ?></script>
</body>
</html>

Woher der Code kommt

Beim ersten Aufruf holt der Handler den Code des Widgets einmal verschlüsselt von widget-storm.de und legt ihn in wgbuilds ab. Ab dann läuft alles aus dieser lokalen Kopie. Die Dateien sind ganz normaler Code. Sie können sich also jederzeit ansehen, was auf Ihrem Server läuft.

Neue Versionen holt der Handler von selbst. Höchstens einmal pro Stunde fragt er nach, ob sich ein Widget geändert hat, und ersetzt eine Datei nur, wenn die neue Kopie zur Prüfsumme passt, die unser Server meldet. Geht dabei etwas schief, bleibt die alte Kopie. Dieser eine Aufruf pro Stunde wartet auf unsere Antwort, alle anderen Seitenaufrufe nicht. Ihre eigenen Widgets im Ordner Ihres Kontos überschreibt er nie. Das kann der Handler ab Version 4.2. Welche Sie haben, steht ganz oben in der wghandler.php.

Am besten darf PHP in wgbuilds schreiben. Kann es das nicht, legt der Handler ab Version 4.4 den Widget-Code stattdessen im temporären Verzeichnis des Systems ab. Das Widget bleibt sichtbar, und den Grund nennt der Handler als Kommentar im Seitenquelltext und als Zeile im PHP-Fehlerprotokoll. Ältere Handler zeigen das Widget in diesem Fall leer, ohne Meldung auf der Seite.

Was Sie davon haben

Der Text im Widget steht in dem HTML, das ein Crawler bekommt. Statische Widgets erscheinen auch ohne JavaScript. Interaktive brauchen ihr Skript weiterhin für die Bedienung. Und weil das Widget Teil Ihres Markups ist, gilt Ihr eigenes Stylesheet.

Was Sie brauchen

PHP, die Erweiterung curl für den Abruf und am besten einen Ordner wgbuilds, in den PHP schreiben darf. Mit Composer geht es auch, über das private Repository mit Ihrem Station-Login:

composer config repositories.widget-storm composer https://widget-storm.de/composer
composer require widget-storm/wgclient:^4.1

Das Paket heißt 4.1, der Handler darin ist trotzdem der aktuelle. Wer schon früher per Composer installiert hat, bekommt mit composer update keinen neueren Handler und lädt ihn besser in der Station neu herunter.

Zum schnellen Ausprobieren ist der Script-Tag auf der Widget-Seite immer noch der kürzeste Weg. Läuft Ihre Seite aber ohnehin auf PHP, würden wir mit $wg->get() anfangen.