 Slideshare Präsentationen in einer Lightbox anzeigen lassen
Vor kurzem war ich auf der Suche nach einer Möglichkeit, Slideshare Präsentationen in einer sogenannten Lightbox anzeigen lassen zu können. Dabei habe ich auf die Schnelle nichts brauchbares gefunden und deshalb selbst etwas programmiert. Wie es geht und was eigentlich eine Lightbox ist, das könnt ihr hier lesen.
Genauer gesagt war ich auf der Suche nach einer Möglichkeit für ein kleines SEO Projekt automatisiert YouTube Videos, Tweets und Slideshare Präsentationen auf einer Website einzubinden. Dies kann gut sein, um regelmäßig frischen Content zu haben. Was ist nun eine Lightbox?Im Prinzip kann man sich eine Lightbox so vorstellen: Der User klickt auf etwas auf der Website, die dann verdunkelt wird. Parallel dazu öffnet sich eine sog. Lightbox, die meist ein Bild oder ein Video enthält: 
Was dabei herauskommen sollEs soll eine Slideshare Präsentation in einer Lightbox erscheinen, wenn der User auf den entsprechenden Link klickt. Hier habe ich ein kleines Beispiel vorbereitet. Da klicken! Wie installiere ich diesen Lightbox-Effekt?Auf der Website http://videobox-lb.sourceforge.net/ kann man sich die dazu benötigten Javascript und CSS-Dateien herunterladen. Dort ist auch beschrieben, wie man diese in einem HTML-Dokument einbinden muss, damit alles funktioniert. Jedoch möchte ich dies an dieser Stelle nocheinmal auf deutsch tun und einige Kleinigkeiten etwas anders machen: Zuerst lädt man sich die entsprechenden Dateien von der oben genannten Website herunter und platziert sie entsprechend in seinem Verzeichnis, in dem auch die HTML-Datei liegt, welche den Lightbox-Effekt anwenden soll. Dann bindet man im Head der HTML-Datei die CSS Datei der Lightbox ein:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf8">
<title>Slideshare Lightbox Demo</title>
<link rel="stylesheet" href="/css/videobox.css" type="text/css" media="screen" />
</head>
<body style="height:100%;">
....
</body>
</html>
Nun müssen noch die entsprechenden Javascript-Dateien im HTML-Dokument untergebracht werden. Die Original-Website, von der man sich alles herunterlädt sagt, man solle diese im Head integrieren. Das ist Quatsch. Nicht dass es nicht funktionieren würde. Es ist einfach aus Suchmaschinensicht besser, wenn Javascript-Dateien erst möglichst am Ende einer HTML-Datei eingebunden werden. Dies ist so, weil ein HTML-Dokument von einer Suchmaschine immer von oben nach unten abgearbeitet wird. Wenn nun massig Javascript-Dateien im Head geladen werden, muss die Suchmaschine warten, bis alles da ist, bevor sie den restlichen (und eigentlichen) Inhalt der Webseite crawlen kann:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf8">
<title>Slideshare Lightbox Demo</title>
<link rel="stylesheet" href="/css/videobox.css" type="text/css" media="screen" />
</head>
<body style="height:100%;">
....
<script type="text/javascript" src="/js/mootools.js"></script>
<script type="text/javascript" src="/js/swfobject.js"></script>
<script type="text/javascript" src="/js/videobox.js"></script>
</body>
</html>
Als nächstes muss nun im body-Bereich ein Link platziert werden, der die Lightbox öffnet, welche dann ein Youtube-Video enthalten soll:
<a href="http://www.youtube.com/watch?v=IZF13_4obbQ" rel="vidbox 800 600" title="Mein Titel">YouTube Video ansehen</a>
Hier ist zu beachten, dass man zuerst den URL kopiert und an der entsprechenden Stelle einfügt: ...watch?v=... Dann kann man im title noch einen individuellen Titel bestimmen, der dann auch in der Lightbox erscheint: 
Was letztenendes im Hintergrund passiert, wenn der User auf den Link klickt ist folgendes: Durch das rel-Attribut des a-Tags schaltet das Javascript einen Eventhandler darauf. Somit wird nicht der eigentliche YouTube Link geöffnet, sondern es tritt ein Javascript Effekt ein. Der komplette Body-Bereich wird ausgedunkelt (macht das Javascript) und ein weiteres Element erscheint: Die Lightbox, welche das Video enthält. Wie bekomme ich eine Slideshare Präsentation da rein?Standardmäßig kann diese Lightbox schon viel enthalten, nämlich Flash-Inhalte von: - YouTube
- Metacafe
- Google Video
- iFilm
- und eigene Flash Filme
Aber eben keine Slideshare Präsentationen. Zuerst platzieren wir in unserer HTML-Datei einen weiteren Link, der dann die Lightbox mit der Präsentation öffnen soll:
<a href="http://www.slideshare.net/watch?v=4a-whitehat-linkbuilding-strategies-beginner-to-advanced-1232403131034344-2" rel="vidbox 800 600" title="Mein Titel">Slideshare Präsentation ansehen</a>
Wie man sieht, ist dieser genau so aufgebaut, wie der YouTube Link. Er würde so aber nicht funktionieren, weil der URL bei Slideshare, um eine Präsenation abzuspielen ein anderes Muster hat als der bei YouTube. Das macht aber nichts, weil wir ja auch nicht auf die Seite von Slideshare wollen, sondern wir wollen ja explizit auf unserer Website bleiben und dort in der Lightbox die Präsi abspielen. Wo bekommt man aber den Link her?Das ist ganz einfach: Man öffnet einfach bei Slideshare die Präsentation seiner Wahl und kopiert sich den embed-Code in einen Codeeditor: 
Von diesen Code-Schnipse brauchen wir aber nicht alles, sonden nur im embed-Tag den Bereich nach dem doc=
<embed src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=4a-whitehat-linkbuilding-strategies-beginner-to-advanced-1232403131034344-2&stripped_title=whitehat-linkbuilding-strategies-beginner-to-advanced-presentation"
Also nicht diesen kompletten Rotz, sondern nur:
4a-whitehat-linkbuilding-strategies-beginner-to-advanced-1232403131034344-2
Das Javascript verändern Anschließend muss noch das mitgelieferte Javascript verändert werden. Dazu muss die Datei videobox.js geöffnet werden. Dort sind diverse Abfragen, welcher Videodienst aktuell verwendet werden soll (YouTube, Google Video...)
if (sLinkHref.match(/youtube\.com\/watch/i)) {
this.flash = true;
var hRef = sLinkHref;
var videoId = hRef.split('=');
this.videoID = videoId[1];
this.so = new SWFObject("http://www.youtube.com/v/"+this.videoID, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
this.so.addParam("wmode", "transparent");
}
else if (sLinkHref.match(/metacafe\.com\/watch/i)) {
this.flash = true;
var hRef = sLinkHref;
var videoId = hRef.split('/');
this.videoID = videoId[4];
this.so = new SWFObject("http://www.metacafe.com/fplayer/"+this.videoID+"/.swf", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
this.so.addParam("wmode", "transparent");
}
...
Wir müssen hier eine weitere Abfrage einbauen: else if (sLinkHref.match(/slideshare\.net\/watch/i)) {
this.flash = true;
var hRef = sLinkHref;
var array_parameter = hRef.split('=');
this.videoID = array_parameter[1];
this.so = new SWFObject("http://static.slidesharecdn.com/swf/ssplayer2.swf?doc="+this.videoID, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
this.so.addParam("wmode", "transparent");
}
Wir fragen hier ab, ob im Link slideshare.net drin steht. Ist dies der Fall, holen wir uns mit array_parameter die ID der Präsentation. Das machen wir mit der Javascript-Funktion split. Damit teilen wir die Zeichenkette auf. Trennzeichen soll das = sein, dass ja nur einmal vorkommt. Das split() in Javascript funktioniert dabei genau so, wie z. B. explode() in PHP. D. h. wir erhalten ein Array. mit new SWFObject erzeugen wir, analog zu den anderen Abfragen, ein neues Flash-Objekt, welches die Video-ID von Slideshare enthält. Ein Wort zu SEOEs werden unweigerlich Fragen aufkommen, ob das aus SEO Sicht gut ist, eine solche Lightbox zu verwenden. Die Antwort lautet: Nö. Grundsätzlich ist es nämlich so, dass dies eine Ajax-Geschichte ist und Suchmaschinen Probleme haben, Ajax-Content zu indexieren. Wenn man mit den einzelnen Videos und Präsentationen (in der Detail- bzw. Abspielen-Ansicht) gefunden werden möchte, kann man eigentlich nur für jedes Video eine eigene Seite anlegen, die einen eindeutigen URL hat. Dann hat man halt auch keine Lightbox mehr. Es sei denn man wendet auf dieser Seiten ebenfalls den Lightbox-Effekt schon beim Laden der Seite an. Wenn der User dann auf das "Close" klickt, könnte man das mit einem Link auf die vorherige Seite verknüpfen. Es wäre weiterhin wichtig, auf der Abspielen-Seite jeweils noch einen Text zu haben, der die Video-/Präsentationsinhalte beschreibt. Dieser kann z. B. jeweils unter dem Flash-Inhalt platziert werden. Denn rein mit einer Flash-Präsentation wird man On-Page-mäßig nicht besonders weit vorne sein.
|
Kommentare