TYPO3: Facebook Like Button per TypoScript

8. November 2010 in TYPO3 von Leo

Mittlerweile findet man den Facebook “Like”-Button ja überall. Dazu gibt es auch passende Extensions im TYPO3 Ext Repository, mit welchen man den Like Button sehr einfach einbauen kann. Jedoch waren diese Extensions nur sehr schwer anpassbar (HTML musste im PHP Code angepasst werden) und man muss sie als Plugin manuell auf jeder Seite platzieren – mühsam!
Deshalb fragte ich mich ob es auch eine bessere Variante gibt – sicher, per TypoScript!
Kurz in Google nach einer Variante gesucht und dabei gleich auf folgendes gestossen, klick. Alles in allem kein schlechtes TypoScript Snippet, jedoch nicht geeignet für mich geeignet, was ich nach einer weile feststellen musste, da ich tt_news im Einsatz habe. Wird nun in der SINGLE-Ansicht ein solcher Button platziert, wird jeweils nur die Seite “geliked”, nicht die News mit der ID. Dies durfte so natürlich nicht sein, da der User so immer auf eine falsche Seite mit einer Warnung kommen würde.

Also habe ich den Code etwas angepasst:

lib.facebook = COA
lib.facebook {
	10 = TEXT
	10.typolink.parameter.data = getIndpEnv:REQUEST_URI
	10.typolink.returnLast = url
	10.dataWrap = http://meinedomain.ch|
	10.rawUrlEncode = 1

	wrap = <iframe src="http://www.facebook.com/plugins/like.php?href=|&layout=button_count&show_faces=true&width=450&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
}

Es muss noch die baseURL oben angepasst werden. Eigentlich wäre es auch möglich direkt die baseURL zu holen, jedoch habe ich dies im obigen Code nicht gemacht da meine baseURL mit einem Slash (“/”) endet, was schlussendlich einen Doppel-Slash verursachen würde.
Wer die baseURL verwenden möchte ersetzt die Zeile mit folgendem:

10.dataWrap = {TSFE:baseUrl}|

Viel Spass!

Lösung: RTE lädt nach Update auf TYPO3 4.4 nicht mehr

5. August 2010 in TYPO3 von Leo

Als ich kürzlich die TYPO3 Installation eines Kunden von TYPO3 4.3.3 auf 4.4.1 geupdated habe, merkte ich beim standardmässigen Testen der Seite, dass der RTE (Rich-Text Editor) im Backend nicht mehr geladen wurde.

Nach einer kurzen Google suche fand ich auch schon die Ursache dieses eigentlich kleinen Problems. Und zwar tritt dieser Fehler auf, wenn die Extension ‘date2calendar‘ installiert ist.

Der RTE wurde nämlich in der neuen Version 4.4 komplett überarbeitet und mit ExtJS umgesetzt. Ausserdem wird die genannte Extension gar nicht mehr benötigt, da sie schon im voraus im Core eingebaut ist.

Extension deinstallieren und der RTE funktioniert wieder! :)

Firefox: ICQ Search entfernen

30. April 2010 in Software, Tutorials von Leo

Wer hatte das noch nie: Da installiert man ein Programm, klickt immer schön auf den “Weiter”-Button um fortzufahren und merkt dann beim nächsten Firefox Start, dass neben dem Programm auch noch einige andere Änderungen vorgenommen wurde – ich rede von der wirklich nervigen ICQ Search. Die ICQ Search wird bei der Installation von ICQ (und womöglich auch einer Hand voll anderer Programmen) mit installiert, wenn man nicht genau aufpasst, nämlich ist das entfernen eines Häckchen nötig, wenn man gefragt wird ob man die ICQ Search bzw. ICQ Toolbar mit installieren möchte.

Wer die Toolbar oder Search installiert hat, dem wurde die Standard Google-Suche in Firefox mit der nervigen ICQ Search ersetzt. Um diese wieder zu entfernen und alles wieder auf die Standardwerte zu setzen geht ihr folgendermassen vor:

1. Checkt zu erst in der Systemsteuerung unter Programme (Software) deinstallieren ob eventuell auch gleich noch andere Programme statt nur Plugins oder Änderungen installiert wurden. Entfernt diese falls vorhanden.

2. Öffnet nun Firefox und tippt die die Adresszeile folgenden Text ein und drückt Enter:

about:config

Bestätigt danach das ihr Aufpassen werdet.

3. Sucht nun in der config Übersicht oben im Suchfeld nach keyword.URL. Nun stosst ihr auf einen Wert in welchem anstatt Google etwas mit ICQ steht. Einfach über Rechtsklick auf den Standardwert zurücksetzen.

4. Sucht nun noch nach browser.search.defaultenginename und setzt auch diesen Wert auf den Standardwert zurück. Dieser Wert bezieht sich auf das kleine Suchfeld oben rechts im Browser.

Nun wurde hoffentlich alles entfernt. Startet am besten den Browser neu, falls die Änderungen erst nach einem Neustart in Kraft treten sollten.

MouseOver Effekt auf div Element mit Javascript

12. April 2010 in Browser, Tutorials von Leo

Kürzlich musste ich für einen Event eines Kunden etwas Javascript schreiben, um ein paar div Elemente (HTML) mit einem MouseOver und MouseOut Effekt versehren, welche dem div Element z.B. eine neue Hintergrundfarbe geben.

Eigentlich kann das ganze in Browsern wie Firefox, Google Chrome und Safari (?) ganz simpel mit einem div:hover gemacht werden, jedoch würde dies im Internet Explorer (mal wieder) nicht funktionieren. Deshalb musste Javascript her, welches das ganze nun in allen Browsern ermöglicht.

Und so wird es gemacht:

1. Zuerst muss Prototype (aktuell 1.6) heruntergeladen und auf seinen Server hochgeladen werden. Ansonsten würde das Javascript nicht funktionieren.

2. Nun erstellt man eine neue Javascript Datei (.js) und ladet diese auch auf seinen Server. Im HTML File müssen die beiden Javascript Files nun noch eingebunden werden:

<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="scripts/dein-effekt.js" type="text/javascript"></script>

Der Pfad und Dateiname muss natürlich noch durch den eigenen ersetzt werden.

3. Zu erst erstellen wir ein HTML Gerüst aus div’s:

<div class="content">
  <div class="team">
     <div class="tools">Anmelden!</div>
  </div>
</div>

Hierbei handelt es sich nun um ein Turnier, bei dem man sich Anmelden kann. Der Link zur Anmeldung erscheint jedoch nur, wenn man mit der Maus über das div “team” fährt.

4. Im Javascript schreiben wir nun folgendes:

var act = 0;

Event.observe(window, 'load', function() { //wenn das Fenster geladen hat

	var team = $('content').select('div.team'); //Hier wir dem JS das div gezeigt

Gleich darunter:

		team.each(function(team){ //hierbei wird das div.team ausgewählt
				Event.observe(team, 'mouseover', function() { //mouseover div.team
						mouseOver(team);
				});
				Event.observe(team, 'mouseout', function() { //mouseout div.team
						mouseOut(team);
				});
	});
});

Danach kommt zuerst einmal die Funktion mouseOver:

function mouseOver(team){
	children = team.childElements(); //die Unterelemente werden gewählt
	tool = children[0]; // das nullte Unterelement (als das gleich darauf folgende
	tool.style.display='block'; //jetzt wird das div (div.tools) angezeigt
	team.addClassName('act');
	//tool.addClassName('act');
}

Und die Funktion mouseOut:

function mouseOut(team){
	children = team.childElements();
	tool = children[0];
	tool.style.display='none';
	team.removeClassName('act');
	tool.removeClassName('act');
}

Im CSS müssen nun noch die Class definiert werden. Die Class .act, für active (aktiv), welche sagt dass das Element aktiv ist, also die Maus gerade auf dem Element ist.
Das Javascript versteckt und zeigt lediglich ein div Element und gibt bzw. nimmt ihm eine neue CSS Class.

Das Javascript sollte wie folgt aussehen:

var act = 0;

Event.observe(window, 'load', function() {

	var team = $('content').select('div.team');

		team.each(function(team){
				Event.observe(team, 'mouseover', function() {
						mouseOver(team);
				});
				Event.observe(team, 'mouseout', function() {
						mouseOut(team);
				});
	});
});

function mouseOver(team){
	children = team.childElements();
	tool = children[0];
	tool.style.display='block';
	team.addClassName('act');
	//tool.addClassName('act');
}

function mouseOut(team){
	children = team.childElements();
	tool = children[0];
	tool.style.display='none';
	team.removeClassName('act');
	tool.removeClassName('act');
}

Google Sitemap ohne Google Konto

19. März 2010 in Internet von Leo

Um eine Google Sitemap bei Google anzumelden bzw. einzutragen verlangt Google ein Google Konto, mit welchem man die Sitemap dann in den Webmaster Tools eintragen kann. Wer dies jedoch ohne Google Konto machen will, hier die Lösung:

Erstellt im root eures Webservers eine Datei Namens “robots.txt” (normale Textdatei) und schreibt folgende Zeile in die Datei:

Sitemap: http://www.webseite.com/sitemap.xml

Den Pfad zu eurer Sitemap muss natürlich noch angepasst werden. Wo der Code schlussendlich in der robots.txt steht ist egal, er kann also an irgendeiner stelle sein, jedoch muss er auf einer eigenen Zeile sein.

Google News Sitemap Plugin für WordPress

17. Februar 2010 in Internet, Tutorials von Leo

Da auch ich auf Google News eingetragen bin, und das ‘Google News Sitemap’-Plugin installiert habe, musste ich vor kurzem feststellen, dass Google die Sitemap nicht mehr akzeptierte. Nachdem ich lange im Internet geforscht habe, konnte ich die Fehler beheben, mit welchen Google nicht zufrieden war.
Und zwar nimmt das Plugin die Sprache für die Sitemap aus den Einstellungen des RSS-Feeds. Dieser war komischerweise komplett auf englisch gestellt, was natürlich Google nicht wollte, da ich außerdem noch UTF-8 nutzte, anstatt ihr ISO-Format. Als ich dann einen Weg gefunden habe, klappte alles wunderbar, und die Sprache des RSS-Feeds lässt sich jetzt jederzeit gemütlich über das Backend von WordPress ändern. Und so wird es gemacht:

Erstellt eine neue PHP-Datei mit unten stehendem Code, und ladet sie danach in euer Plugins Verzeichnis (“/wp-content/plugins/”).

/*
Plugin Name: RSS Language
Plugin URI: http://bueltge.de/wp-landingsites-de-plugin/181/
Description: Add options field for rss language
Version: 1.0
Author: Frank Bültge
License: GNU
Author URI: http://bueltge.de/
*/

function rss_language_string() {
?>


language codes.'); ?>
}

function rss_language_admin_init() {
register_setting( 'reading', 'rss_language' );
add_settings_field( 'rss_language', __('RSS Language Code'), 'rss_language_string', 'reading');
}
add_action( 'admin_init', 'rss_language_admin_init' );

?>

Nun könnt ihr in WordPress die Sprache des RSS-Feeds ändern. Die Option findet ihr unter “Einstellungen” => “Lesen”, dort dann ganz unten ins Kästchen “de” (ohne “”) eintragen.

Doch kommen wir nun zum hauptsächlichen Problem, dem “Incorrect Namespace”. Dieser Fehler passiert in der Plugin Version 1.4 und älter, da Google das Schema der Sitemaps (mal wieder) geändert hat.
Ich habe den PHP Code des Plugins dem neuen Schema angepasst, sowie noch eine deutsche Anleitung erstellt.
Das Plugin könnt ihr über den unten stehenden Link herunterladen. Dies ist die Version 1.5, welche ich erstellt habe.

Download google-news-sitemap-generator

Die besten WordPress Plugins

12. Januar 2010 in Internet von Leo

Da ich WordPress gerne und viel nutze, möchte ich hier nun die besten, beziehungsweise meine Lieblings Plugins vorstellen.

All in One SEO Pack
Allen denen wichtig ist, dass ihr Blog ganzen oben mit dabei ist in Google, der hat bestimmt schon mal etwas von SEO, bzw. diesem tollen Plugin für WordPress gehört. Mit diesem SEO Plugin wird alles erledigt, um seinen Blog möglichst Suchmaschinenfreundlich zu gestalten. So wird z.B. der Titel (im Browser) automatisch angepasst, je nach dem welchen Artikel man sich gerade anschaut. Dies ist jedoch noch nicht alles, vieles weiteres ist möglich mit diesem Plugin, um seine SEO zu verbessern.

Zum Plugin

Sexy Boomarks
Dieses Plugin habe ich zwar erst kürzlich entdeckt, aber ich war echt begeistert. Mit diesem Plugin kann man coole Share Buttons an seine Artikel anfügen. Damit können die Besucher den Artikel gleich auf Twitter, Facebook & Co. Posten.

Zum Plugin

Mehr gibt es nach dem Break…

Fatal Error beim Anlegen eines Content Elements in TYPO3 mit TemplaVoila

6. November 2009 in TYPO3 von Leo

Als ich gestern TYPO3 auf meinem lokalen Apache Server auf meinem Computer installiert habe, und mir Zusammen mit TemplaVoila ein einfaches HTML Template zu einem TYPO3 Template bastelte, ist es mir zuerst nicht aufgefallen. Jedoch kam es, als ich ein neues Content Element auf einer Seite anlegen wollte, immer zu einem Error.

Hotmail, GMail & Co. in Mozilla Thunderbird

5. November 2009 in Computer, Software, Tutorials von Leo

Wer nur HTTP Konten im Internet besitzt, kann sein Hotmail, Google Mail etc. Konto mit einem kleinen Addon auch mit Mozilla Thunderbird verwalten.

Zuerst müsst ihr euch das Haupt-Addon “Webmail” herunterladen. Dies könnt ihr hier machen: http://webmail.mozdev.org/installation.html

Dort führt ihr einen Rechtsklick auf dem Link aus und wählt “Ziel speichern unter…”. Speichert das Addon an einem Ort wo ihr es gleich wieder habt. Falls noch weitere optionale Erweiterungen wie GMail oder Hotmail erwünscht sind, einfach das selbe nochmals ausführen.