Automatisierte Screenshots von Webseiten

Meine Freundin wollte für ihre WordPress-Website Screenshots (Bildschirmfotos) für externe Links. Das Ganze möglichst automatisiert, so dass sich der Aufwand bei den vielen externen Links auf ihrer Website in Grenzen hält.

Leider habe ich bisher keinen kostenlosen Webdienst gefunden, der ihren Anforderungen vollständig gerecht würde. So wurden teilweise nur Screenshots von den Startseiten geliefert und keiner der von mir getesteten kostenlosen Webdienste (unter anderem fadeout.de, websnapr) machte Screenshots von pdf-Dateien im Web.

Normalerweise meide ich für meine Websites den Einsatz externer Webdienste (siehe hierzu meinen Blogbeitrag „Empfehlenswerte externe Dienste„). Dies deswegen, weil dadurch eine Abhängigkeit von diesem Anbieter des Dienstes entsteht und im schlimmsten Fall (Worstcase) bei einem Ausfall des Webdienstes die eigene Seite nicht mehr vollständig geladen wird bzw. nicht mehr erreichbar ist.

Gleichwohl mache ich hier bei Screenshots eine Ausnahme. Und das hat etwas mit dem Anbieter zu tun. Webseiten-Infos.de wird mit WordPress betrieben. WordPress verfügt aber auch über einen Screenshot-Service und diesen kann man auch mit einer selbstgehosteten WordPress-Installation, ja sogar mit einer beliebigen Website nutzen.

Für WordPress gibt es zur Nutzung des Screenshot-Service das Plugin BM Shots. Da ich das Plugin nicht im Verzeichnis der WordPress-Plugins finde konnte, musste ich es leider von der Website des Autors herunterladen und manuell installieren. Die Schritte dafür sind:

  • Herunterladen (Download) des im ZIP-Format gepackten Plugins.
  • Entpacken der Datei bm-shots.zip (= index.php)
  • Anlegen eines Verzeichnisses pm-shots unter wp-content/plugins/.
  • Hochladen (Upload) der entpackten index.php in das Verzeichnis pm-shots auf dem Webspace.
  • Aktivieren des Plugins im Administrationsbereich (Backend) Deiner WordPress-Installation unter Plugins BM_Shots den Link Aktivieren anklicken.

Der Code ist sehr übersichtlich. Die Plugin-Datei index.php ist entpackt gerade mal 2 KB groß.

Mir fehlte bei den Screenshots jedoch ein mit CSS3 realisierter Schatteneffekt, der den Eindruck von räumlicher Tiefe vermittelt. Hierzu habe ich entsprechend dem Tipp von Pascal in meiner CSS-Datei den Selektor .browsershot img wie folgt definiert:

1
2
.browsershot img { box-shadow: 5px 5px 5px #888; -moz-box-shadow: 5px 5px 5px #888; -khtml-box-shadow: 5px 5px 5px #888; }
.browsershot img { padding: 0; }

Verrückt, aber den Schatteneffekt sah ich erst nur beim Firefox. Warum das so war? Der Div-Container um das Bild brauchte zusätzlich ein display: inline-block, den ich der bereits vorhandenen Klasse browsershot zuwies (siehe hierzu die Wikiseite „Elementschatten mit CSS3 Box Shadow“ auf Webmasterpro.de):

1
.browsershot { display: inline-block; }

Sofern Du eine andere Breite (width) für die Screenshots als 250px festlegen willst, musst Du den Wert 250 in der Zeile 20 der index.php entsprechend ändern.

Ausprobiert habe ich das Plugin erst einmal auf einer Testinstallation. Nachdem ich es dann für ok befunden habe, habe ich das Plugin auf Webseiten-Infos.de aktiviert und auf der Startseite

http://www.webseiten-infos.de

sowie der Seite Über mich

http://www.webseiten-infos.de/home/ueber-mich/

Screenshots mit folgendem Shortcode ergänzt:

1
[browsershot url="http://feedburner.google.com/fb/a/mailverify?uri=Webseiten-infosde&loc=de_DE" width="foo-value"]
1
[browsershot url="http://www.dieter-welzel.de" width="foo-value"]
1
[browsershot url="http://www.jurafernstudium.de" width="foo-value"]
1
[browsershot url="http://bluelight-rock.de" width="foo-value"]

Wo Licht ist, ist aber auch Schatten! Zwar beinhaltet der img-Tag auch ein alt-Attribut, aber das ist leider mit der URL als Wert versehen. Das ist alles andere als sinnvoll! Allerdings muss ich zugeben, dass mir aus dem Stehgreif auch keine bessere Lösung für eine automatische Generierung des alt-Attributs einfällt.

Weitere Infos zu dem Screenshot-Webdienst von WordPress (unter anderem Nutzung ohne WordPress-Plugin) sowie zu dem WordPress-Plugin BM Shots (unter anderem PHP-Funktion statt Shortcode) findest Du unter

Zum Schluss noch der Hinweis, dass das Generieren der Screenshots einige Minuten braucht. Solange erscheint statt des Screenshots der Hinweis Generating Preview… Anschließend ist der Screenshot schnell geladen, denn er wird auf dem WordPress-Server gecacht. Wie oft er aktualisiert wird, habe ich allerdings noch nicht herausgefunden.

Und ist dieser Screenshot-Service eventuell auch etwas für Dich?

Nachtrag vom 6. Juni 2011:
Eben erst habe ich durch den Qualidator festgestellt, dass es noch einen kleinen Schönheitsfehler beim Plugin BM Shots gibt. Es gibt nur die Weite (width) des Screenshots, aber nicht die Höhe (height) aus. Mit Hilfe des Firefox-Addons MeasureIt ermittelte ich die Höhe der Screenshots bei einer Breite von 250px: 190px. Dementsprechend ergänzte ich die Zeile 51 noch um height=“190″ wie folgt:

1
$image = '<img class="schatten" src="' . $imageUrl . '" alt="' . $url . '" width="' . $width . '" height="190" />';

13 Kommentare

  1. 1. Armin

    Kommentar vom 6. Juni 2011 um 19:33

    Dankeschön, nach so etwas habe ich gesucht um meine Links schöner zu gestalten.
    Danke

  2. 2. Dieter

    Kommentar vom 6. Juni 2011 um 19:45

    @Armin
    Gern geschehen.
    Bin erst gestern über Tanja aka Grazy Girl auf Dein lesenswertes Blog gestoßen.
    Man(n) liest sich. ;-)

  3. 3. Pascal Birchler

    Kommentar vom 28. Juni 2011 um 10:11

    Hi Dieter

    Kleiner Vertipper: Das Plugin heisst BM Shots (Binary Moon), nicht PM Shots. Und zwar ist es auch nicht neu, aber:

    Warum hast du extra das Plugin abgeändert und eine eigene Klasse hinzugefügt? Wenn ja der Container bereits ein Klasse hat, kannst du das darin enthaltene Bild ganz einfach ansprechen:

    1
    .browsershot img {}

    Ausserdem ist die Höhe mit gutem Grund nicht fix angegeben: Die kann nämlich variieren, bei mir sind es z.B. gerade 188px.

  4. 4. Dieter

    Kommentar vom 28. Juni 2011 um 10:41

    Hi Pascal,

    herzlichen Dank für Deine Hinweise.

    Den Tippfehler habe ich korrigiert.

    Das Plugin BM Shots ist zwar nicht neu, aber ich bin erst jetzt darauf gestoßen. Da ich hier meine Arbeiten an Webseiten-Infos.de dokumentiere, habe ich darüber gebloggt. ;-)

    Das mit der CSS-Regel .browsershot img {} probiere ich mal aus. Wenn es klappt, passe ich das hier an.

    Die Höhe habe ich zwecks Validierung explizit angegeben. Das ist ja kein Muss, aber für mich persönlich wichtig, denn Validität ist ein wichtiges Qualitätsmerkmal einer Website (siehe hierzu z.B. Was macht eine gute Webpräsenz aus?).

    Gruß
    Dieter

  5. 5. Dieter

    Kommentar vom 3. Juli 2011 um 14:53

    Hi Pascal,

    CSS-Regel mit browsershot img {} funktioniert. Ich habe den Blogbeitrag entsprechend angepasst. Danke!

    Gruß
    Dieter

  6. 6. Andre

    Kommentar vom 5. Oktober 2011 um 11:42

    Habe mich noch nie mit dem Thema auseinandergesetzt. Klingt aber alles sehr interessant. Werde das wahrscheinlich mal ausprobieren.

  7. 7. Dieter

    Kommentar vom 5. Oktober 2011 um 15:59

    @Andre
    Ausprobieren ist eine gute Idee. Der automatisierte Screenshot wird in regelmäßigen Abständen erneuert, so dass mit einer gewissen zeitlichen Verzögerung auch Änderungen auf der entsprechenden Website sich im Screenshot wiederfinden.

  8. 8. Tibor

    Kommentar vom 8. November 2011 um 10:28

    Hi, ich hätte da zwei kurze Fragen.

    1. wie heisst der CSS-File in dem ich die Änderungen vornehmen kann.

    2. Wo trage ich genau ein, dass der Link in einem neuen Fenster geöffnet werden soll? Ich möchte nicht dass der Besucher meine eigene Seite verlässt, es soll lieber in einem neuen Fenster die neue Seite begutachten. Ich habe mit target=_blank im Shortcode versucht, klappt aber leider nicht.

  9. 9. Dieter

    Kommentar vom 8. November 2011 um 23:17

    @Tibor
    zu 1.
    Das kommt auf Dein WordPress-Theme an. Die CSS-Datei würde für kolumne24.de z.B. style.css heißen.

    zu 2.
    Da wirst Du wohl die Plugin-Datei index.php modifizieren müssen. Ich habe es nicht ausprobiert aber eventuell klappt es, wenn Du in Zeile 19 (‚target‘ => “,) “ durch ‚_blank‘ oder ‚blank‘ ersetzt.

    Ich persönlich würde aber die Finger davon lassen (Begründung siehe „Externe Links in neuem Fenster öffnen?„).

  10. 10. Robert Hartl

    Kommentar vom 12. Januar 2012 um 09:43

    Klasse Hinweis, schon lange suche ich nach einer Alternative zu den halbkommerziellen und semizuverlässigen Thumbshotdienste. WordPress mit interner Lösung kommt da gerade recht.

  11. 11. Dieter

    Kommentar vom 12. Januar 2012 um 14:39

    @Robert
    Du nutzt für Deine Website Textpattern. Da wird das mit dem WordPress-Plugin wohl nicht funktionieren.

    Sofern Du da eine Lösung für Textpattern hast, wäre es nett, wenn Du darüber berichten würdest.
    Gruß
    Dieter

  12. 12. Dan

    Kommentar vom 30. April 2012 um 17:32

    Weitere Infos zu dem Screenshot-Webdienst von WordPress (unter anderem Nutzung ohne WordPress-Plugin)..

    Ich kann keinen solchen Link und keine Infos zur Nutzung OHNE WP finden …gibt es einen?

  13. 13. Dieter

    Kommentar vom 1. Mai 2012 um 02:57

    Ich schon! Einfach den nachfolgenden Code, den ich Anlehnung an die Links in den Beiträgen gewählt habe, im Quelltext verwenden. Dazu musst Du lediglich die URL der gewünschten Website austauschen, hierbei %2F anstelle von / verwenden und ggf. 520 durch die gewünschte Breite des Screenshots ersetzen.

    1
    http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwww.webseiten-infos.de%2F?w=520

    Nachtrag: Bei neuen Screenshots kann es einige Minute dauern bis er zur Verfügung steht.

Kommentar schreiben (Datenschutzerklärung)

Kommentarformular





Erstkommentare und Kommentare mit Links werden moderiert.

Übersicht der Tastaturkürzel für Smilies

Abonnieren ohne einen Kommentar abzugeben

 

Durch die weitere Nutzung der Seite stimmst Du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen