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:

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):

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

sowie der Seite Über mich

Screenshots mit folgendem Shortcode ergänzt:

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

• WordPress Website Screenshot Dienst
• An Automated Way to Take Screenshots of any Website – Free
• BM Shots – Automated Screenshots for Your Website
• Automated Screenshots for Your Website with BM Shots
• An Automated Way of Taking Website Screenshot in WordPress (Nachtrag)

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:

Kommentare

• 6. Juni 2011, Armin schreibt: Dankeschön, nach so etwas habe ich gesucht um meine Links schöner zu gestalten. Danke
• 6. Juni 2011, Dieter schreibt: @Armin Gern geschehen. Bin erst gestern über Tanja aka Grazy Girl auf Dein lesenswertes Blog gestoßen. Man(n) liest sich. ;-)
• 28. Juni 2011, Pascal Birchler schreibt: 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: .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.
• 28. Juni 2011, Dieter schreibt: 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
• 3. Juli 2011, Dieter schreibt: Hi Pascal, CSS-Regel mit browsershot img {} funktioniert. Ich habe den Blogbeitrag entsprechend angepasst. Danke! Gruß Dieter
• 5. Oktober 2011, Andre schreibt: Habe mich noch nie mit dem Thema auseinandergesetzt. Klingt aber alles sehr interessant. Werde das wahrscheinlich mal ausprobieren.
• 5. Oktober 2011, Dieter schreibt: @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. November 2011, Tibor schreibt: 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.
• 8. November 2011, Dieter schreibt: @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?").
• 12. Januar 2012, Robert Hartl schreibt: 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.
• 12. Januar 2012, Dieter schreibt: @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
• 30. April 2012, Dan schreibt:

  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?
• 1. Mai 2012, Dieter schreibt: 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. 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.

Ähnliche Beiträge

• iPhone-Simulatoren sind für die Tonne!
• Plugins für WordPress als CMS
• Webseitenanalyse mit Webmastercoffee
• DENIC-Antwort bleibt hinter Erwartung zurück
• Der BITV-Selbsttest mit Fragebogen

Permalink | 13 Kommentare | Seite speichern bei Twitter | Mister Wong | del.icio.us | Y!GG | Linkarena
Schlagwörter: BM Shots, Screenshots, Shortcode, Website, WordPress, WordPress-Plugin