Wikipedia für die eigene Webseite mit PHP – Teil 2Wikipedia ist in! Die deutschsprachige Ausgabe von Wikipedia ist die zweitgrößte weltweit und sie wächst und wächst weiter. Doch wie kann man Wikipedia für die eigenen Benutzer als nützliches Tool zugänglich machen und an die eigenen Wünsche anpassen?

Dieser Artikel ist ebenfalls bei Dr.Web erschienen!

Bestimmt ist er Ihnen auch schon mal bei einer Reise durch das WWW begegnet – der kleine Mr. Check der Firma Xpolis.Das kleine Tool hat jedoch auch seinen Preis – anfangs war er noch kostenlos zu haben, heute muss man ordentlich dafür bezahlen (ab 14 € pro Monat). Mit ein wenig Aufwand kann man jedoch ein ähnlich funktionierendes System für umsonst programmieren.
Dabei verwenden wir wiederum unser Wikipedia-Skript und ein wenig JavaScript. Grundsätzlich soll der Benutzer wie bei Mr.Check sich ein Stichwort markieren können und daraufhin nach Klick auf den kleinen Helfer einen passenden Wikipedia Artikel zu sehen bekommen. So in etwa könnte unser kleiner Helfer bei Dr.Web aussehen:

So in etwa könnte unser BiblioBulo aussehen

So in etwa könnte unser BiblioBulo aussehen

Um zu ermitteln, welches Wort ein Benutzer markiert hat, muss man mit ein wenig JavaScript herumhantieren; für den Internet Explorer gibt es hierfür das document.selection-Objekt, für Mozilla kann man direkt die document.getSelection() Funktion verwenden.

<script type="text/javascript">
<!--
function getString() {
var str;
if (document.selection) // fuer IE
{
str = document.selection.createRange().text;
if(str == "") {
str = prompt("Bitte geben Sie den gesuchten Fachbegriff ein","");
}
}
else if(document.getSelection()) { //fuer Mozilla, etc.
str = document.getSelection();
if(str == "") {
str = prompt("Bitte geben Sie den gesuchten Fachbegriff ein","");
}
}
else { //falls anderer Browser
str = prompt("Bitte geben Sie den gesuchten Fachbegriff ein","");
}
//PopUp wird geöffnet
wikipedia = window.open("http://localhost/wikipedia/wikistatic.php?begriff="+str, "Wikipedia", "width=500,height=500,scrollbars=yes,resizable=yes,toolbar=yes");
wikipedia.focus(); //Fokus auf PopUp setzen
}
// -->
</script>

Falls die Funktionen nicht unterstützt werden (Probleme gibt es eventuell mit Opera), so wird schlicht ein Javascript prompt-Fenster geöffnet, in das der Besucher den Fachbegriff manuell eintippen kann. Nachdem der Begriff erfolgreich in der Variablen str hinterlegt wurde, wird ein PopUp geöffnet. Die Größe des PopUps und die angezeigten Toolbars kann man natürlich nach belieben anpassen.
Über den Query-String der Anfrage lädt es die entsprechenden Seiten von Wikipedia. Findet sich im Query-String z.B. die Anfrage search=php, so wird der Wikipedia Artikel über PHP ausgegeben. Sollte es sich bei dem Begriff um einen mit Leerzeichen verbundenen Begriff handeln, so wird das Leerzeichen http konform umgewandelt. Falls es zu einem bestimmten Begriff keinen Artikel geben, so wird die Suche bemüht und die Suchergebnisse daraufhin angezeigt.

Unser BiblioBulo kann über folgenden Code in die Seite integriert werden:

<a href="#" onclick="javascript:getString()"><img src="bibliobulo.gif" alt="BiblioBulo"></a>

Und so sieht das Beispiel dann aus:


Fachbegriff XML wurde markiert, das Wikipedia-Skript liefert den passenden Artikel

Fachbegriffe mit Wikipedia verlinken
Mit HTML 4.0 wurden viele neue Textauszeichnungen eingeführt, z.B. der acronym-Tag, der eine Abkürzung bzw. ein Akronym auszeichnet. Wer sich dieser Tags bedient hat, und seine Fachbegriffe oder Abkürzungen stets mit solchen Textauszeichnungen ausgezeichnet hat, der soll nun davon auch ein wenig profitieren. Mithilfe von JavaScript und dem DOM soll nun anhand der acronym-Tags jedes Acronym auf verdacht mit unserem Wikipedia-Skript verlinkt werden.

Das hierzu notwendige JavaScript funktioniert mit allen gängigen Browsern (außer Opera 6).

<script type="text/javascript">
function showFachbegriffe() {
if(document.getElementsByTagName && document.getElementById) { //nur wenn der Browser das DOM unterstützt

var acronym = document.getElementsByTagName("acronym"); //alle Akronyme ermitteln

for (var l = 0; l < acronym.length; l++) {
var link = document.createElement("a"); //Erzeugung des Links
var link_text = document.createTextNode(acronym[l].firstChild.nodeValue);
link.href="http://localhost/wikipedia/wikistatic.php?title=Spezial:Search&search="+acronym[l].firstChild.nodeValue;
link.target="_blank";
link.appendChild(link_text);
acronym[l].appendChild(link);
acronym[l].firstChild.nodeValue=""; //damit das Akronym nicht zweimal dasteht
}
} //Ende Browser-if
}//Ende Funktion
</script>

Die Verweise auf das Skript müssten natürlich angepasst werden. Die Funktion muss beim laden der Seite aufgerufen werden. Dies kann über den onLoad-Eventhandler im body-Tag erreicht werden.

<body onLoad="showFachbegriffe()">

Man kann das ganze noch ein wenig weiter verzieren. Man könnte z.B. neben jedes Akronym noch ein kleines Icon setzen, das anzeigt, dass der Link auf die Wikipedia Datenbank verweist.

Hierzu müsste man den JavaScript-Code um ein paar Zeilen erweitern:

for (var l = 0; l < acronym.length; l++) {
var icon = document.createElement("img");
icon.src="wikipedia-favicon.png";
icon.alt="Fachbegriff: " + acronym[l].firstChild.nodeValue;
var link = document.createElement("a"); //Erzeugung des Links
var link_text = document.createTextNode(acronym[l].firstChild.nodeValue);
link.href="http://localhost/wikipedia/wikistatic.php?title=Spezial:Search&search="+acronym[l].firstChild.nodeValue;
link.target="_blank";
link.appendChild(link_text);
acronym[l].appendChild(link);
acronym[l].firstChild.nodeValue=""; //damit das Akronym nicht zweimal dasteht
acronym[l].appendChild(icon); //Icon hinzufügen
}

Das Ergebnis könnte im Browser etwa wie folgt aussehen:


 Jedes Akronym wurde mit Wikipedia verlinkt und entsprechend gekennzeichnet

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: