Bannermanagement mit Macina Banners, TemplaVoilà und TYPO3

Für einen Kunden habe ich vor einiger Zeit die Anforderung erhalten zu prüfen, ob und wie eine möglichst einfache Bannerverwaltung in TYPO3 integriert werden kann. In den einschlägigen Foren habe ich häufig den Hinweis auf die Erweiterung „Macina Banners – Advanced Banner Management“ von Wolfgang Becker erhalten. Die Erweiterung wurd über 5000 Mal heruntergeladen und am 2.1.2013 aktualisiert.
Auf Grund dieser Parameter habe ich es auf einen Versuch ankommen lassen und möchte euch in diesem Tutorial zeigen wie ihr die Bannerverwaltung in TYPO3 implementieren könnt.

Macina Banners als Erweiterung installieren

media_1361715878581.png

Im Erweiterungsmanager des TYPO3-Backends sucht einfach unter „Import Extensions“ nach macina_banners

media_1361715903458.png

Durch einen Klick auf den kleinen Pfeil nach links könnt ihr die Erweiterung nun installieren.

media_1361715928438.png

Abschließend ist nur noch ein Klick auf „Make updates“ notwendig.

Integration des Banners in das HTML-Template

media_1361716406274.png

Nun muss im HTML-Template ein Platz für den Banner geschaffen werden. Ich habe dafür im Header ein Div mit dem Titel „headerbanner“ eingefügt, welches ich gleich mit TemplaVoilà mappen werde.

Mapping in TemplàVoila

media_1361716444329.png

Um die Änderung des HTML-Templates auch an TYPO3 bekannt zu machen, wechselt ihr nun in den TemplaVoilà bereich. Hier hat das System schon erkannt, dass sich das HTML-Template geändert hat. Ihr klickt daher auf „Update mapping“.

Da mit dem Banner ein neues Objekt hinzugefügt wird, müsst ihr die Datenstruktur, bzw das Vorlagenobjekt ändern. Ihr müsst daher den Button „Modify DS/TO“ anwählen.

media_1361716492580.png

Hier gebt ihr dem neuen Templateobjekt einen Namen und klickt „Add“.

media_1361716516882.png

Wichtig ist dür Objekt den Editing Type „TypoScript Object Path“ auszuwählen, da wir dieses Objekt später direkt in TypoScript anwählen wollen. Im Anschluss wieder auf „Add“ klicken.

media_1361716543417.png

Nun könnt ihr den Object Path angeben, mit dem ihr später das Objekt aus dem TypoScript-Template heraus referenzieren wollt. Danach klickt ihr einfach auf „Update“.

Mapping festlegen

media_1361716584688.png

Nach einem Klick auf „Map“ könnt ihr nun die Stelle im HTML-Template auswählen, an der ihr vorhin das Div für den Banner eingesetzt habt. Ich habe anschließend „Exclude Tag“ ausgewählt, damit das Div erhalten blibt und ich den Banner einfach per CSS ansprechen kann.

Datensatz „Banner“ erstellen.

media_1361716999400.png

Im List-Modus habe ich mir einen Ordner für die Banner abgelegt. Wenn ihr mit der rechten Maustaste auf den Ordner klickt und neu auswählt, könnt ihr auf der rechten Seite den Datensatztyp „Banner auswählen.

Banner bearbeiten

media_1361717174382.png

Nun öffnet sich eine Eingabemaske, in der der Banner genauer definiert werden kann. Im Reiter Grundeinstellung ändere ich ausschließlich die Bezeichnung des Banners, um diesen im Anschluss wiederzufinden. als TYP kann auch „HTML “ oder „Flash“ ausgewählt werden. Für diesen Test habe ich aber zwei jpg-Grafiken vorbereitet.

media_1361717220702.png

Im Reiter Bannergrafik kann diese Grafik hochgeladen werden. Der Bildtext gibt später den Linktitle an. Als Link kann die Adresse hinterlegt werden, auf die später verlinkt werden soll.

TIPP:
Wenn ihr den Link vorher mit http://bit.ly erstellt und diesen geänderten Link hier einbaut, hat auch der Kunde die Möglichkeiten, die Aufruf- und Klickstatistiken via bit.ly einzusehen ohne sich ins TYPO3-Backend einloggen zu müssen.

media_1361717248827.png

Im Reiter „Anzeige“ könnt ihr dem Banner eine Kategorie/Positionierung zuweisen. Standardmäßig existieren die angegebenen Objekte. Der Clou ist, dass ihr später in der Zuweisung festlegen könnt, aus welche Kategorie die Banner angezeigt werden. Außerdem lassen sich Seiten festlegen oder aussschließen, auf denen der Banner angezeigt wird.

media_1361717349305.png

Wenn ihr eure Eingaben gespeichert habt, könnt ihr weitere Banner anlegen. Für das Beispiel habe ich zwei einfache FBanner gespeichert.

Banner im TypoScript-Template zuweisen

media_1361717962644.png

Abschließend müsst ihr im Bereich „Template“ Euer TypoScrit-Template anpassen und definieren, dass euer angelegtes TypoScript Objeckt mit dem Macina Banners – Plugin gefüllt wird. Dies erzielt ihr mit folgenden Codezeilen:

lib.headerbanner = plugin.tx_macinabanners_pi1
lib.headerbanner {
placement = top
mode = random
pidList = 1166
}

Unter pidList gebt ihr die ID des Ordners an, in dem die Bannersdatensätze gespeichert werden. Die Id erhaltet ihr, in dem ihr mit der Maus über den Ordner fahrt. Unter Placement habe ich die Kategorie angegeben, unter denen ich die Banner angelegt habe und der random-mode gibt an, dass zufällig ausgewählt wird, welche Banner angezeigt. werden.

Banneransicht Macina Banners

desktopblau.png

Ihr seht, es wird sowohl der blaue,…

desktoprot.png

… als auch der rote Banner angezeigt. Damit hat die Testinstallation geklappt.
Nutzt jemand von euch schon macina_banners und hat gute oder schlechte Erfahrungen gesammelt? Auf mich macht die Erweiterung wirklich einen sehr guten Eindruck, zumal neue und bestehende Banner einfach durch die Redakteure gepflegt werden und den Positionen über die Kategorien zugewiesen werden können.

Mehr Kommentare durch Disqus – Die Kommentarbox in WordPress einbauen

Ein gutes Blog ist nur ein gutes Blog, wenn es die Möglichkeit der Beteiligung ideal ausnutzt. Wie ich diese Möglichkeit in einem Projekt einfach und kostenlos optimiert habe möchte ich in diesem Beitrag erläutern.

Seit einigen Monaten versuche ich mit bolzplatzheld.de ein kleines Social-Media-Projekt zum Thema Fußball Bundesliga aufzuziehen. Konkret veröffentlich regelmäßig unregelmäßig einen Videoblog-Beitrag zu den Geschehnissen der Liga in Verbindung mit den aktuellen Postings der Fans und Spieler auf Facebook, Twitter und Co.

media_1361098634946.png

Zentraler Punkt des Projekts ist, dass ich auf Userkommentare auf Facebook und der Webseite direkt eingehe. Während das auf Facebook auch ganz ordentlich funktioniert, halten sich die User im Blog doch sehr zurück. Ich denke, dass es auch mit dem wenig ansprechenden Aussehen der Kommentarbox in Zusammenhang steht.

media_1361098679020.png

Ich habe mich daher einmal aufgemacht und nach ansprechenden Kommentarboxen Ausschau gehalten um mich etwas inspirieren lassen. Dabei bin ich nach einigen Jahren wieder bei Disqus hängen geblieben. Damals fand ich die Idee des Services schon interessant. Allerdings kam es für mich nicht in Frage, da die Kommentare nicht suchmaschinenfreundlich und barrierefrei eingebunden wurden.

Mit der neusten Version aus dem Jahre 2012 hat sich das eigentlich geändert. Also kurz zusammengefasst:Warum sollte man Disqus auch für sein Webprojekt nutzen?

  • suchmaschinenfreundliche Einbindung
  • Echtzeit Kommentare möglich
  • weitgreifende Social-Media Anbindung. Kommentare können auf STwitter, Facebook und Google+ geteilt werden. Der Login ist ebenfalls über diese Dienste möglich. Außerdem ist auch das Kommentieren ohne Login erlaubt.
  • Einzelne Kommentare können per Voting-Feature „geliked“ oder „disliked“ werden
  • Man kann einen einzelnen Beitrag per E-Mail oder RSS folgen.

Darüber hinaus ist es so, dass jeder Kommentar mit der WordPresskommentarfunktion synchronisiert wird. Alte WordPresskommentare sind somit in Disqus sichtbar (Achtung: Pingpacks werden nicht angeszeigt). Neue Kommentare via Disqus werden als normaler Kommentar in die WordPressdatenbank gespeichert, so dass man den Dienst auch einfach wieder verlassen kann.

Ich möchte daher nun Schritt für Schritt zeigen wie ich bei bolzplatzheld.de die Kommentarbox von Disqus eingefügt habe

Anmeldung und Login bei Disqus

media_1361096931188.png

Nach dem Anmelden auf www.disqus.com könnt ihr durch Klick auf „Get this on your Site“ erstellen.

Seite registrieren

media_1361097000222.png

Im nächsten Fenster müsst Ihr die Adresse und den Titel eurer Seite festlegen.

Service auswählen

media_1361097030448.png

Viele Plattformen werden native angesprochen. So auch WordPress, welches für bolzplatzheld.de verwendet wird. Die Box kann aber mit dem Universal Code in nahezu jede Seite eingebunden werden, für die ihr Kommentare ermöglichen wollt.

Instruktionen für WordPress

media_1361097056231.png

Auf Disqus-Seite ist die Einrichtung also bereits abgeschlossen. Es werden euch die Schritte zum Import innerhalb von WordPress aufgeführt. Ihr müsst euch also nun als Admin in euer WordPress-Backend einloggen.

Plugin installieren

In WordPress wählt ihr also im bereich Plugin „Installieren“ aus. Hier müsst ihr nach dem Plugin „Disqus“ suchen.

Bei mir wurde das „Disqus Comment System“ als erstes Suchergebnis angezeigt. Hier klickt ihr auf „Jetzt installieren“.

Disqus auf WordPress aktivieren

media_1361097681983.png

Nach der hoffentlich erfolgreichen Installation einfach das Plugin aktivieren.

Konfiguration des Plugins

media_1361097708690.png

Durch klick auf den Button „Kommentare“ könnt ihr das Plugin nun konfigurieren.

Eingabe des Users und des Passworts

media_1361097747825.png

In kommenden Fenster müsst ihr euer Passwort und den Disqus-Benutzernamen eintragen und anschließen eure vorher angelegte Seite auswählen.

Konfigurationsmöglichkeiten

media_1361097884897.png

media_1361097908970.png

In der abschließenden Konfigurationsseite könnt ihr u.a. die Sprache auf Deutsch ändern und Gastbeiträge erlauben. Ebenso habe ich aktiviert, dass ich von jedem User zunächst einen Beitrag freigeben muss.

media_1361097950125.png

Unter Social Plattform Integration, könnt ihr den Twitteruser anlegen, der in der Kommentarbox verwendet werden soll. So werden automatisch Antworten als Beiträge an @bolzplatzheld verfasst.

Et voilà: Die neue schicke Kommentarbox

media_1361098168850.png

Ich denke, dass diese Box nun wirklich besser ausschaut und sich durch ihren schlichten Ansatz ideal in die meisten Seiten integrieren lässt. Für mich ist ein großer Nachteil, dass keine Pingbacks angezeigt werden. Ich werde daruaf aber zunächst verzichten und nach einer Lösung suchen. Nachdem ich die Box nun schon seit einiger zeit auf malte-dudd.de einsetze, bin ich gespannt, ob sich die Besucher von bolzplatzheld.de zum Kommentieren anregen lassen.