facebooklink

Wie ich meinen Website-Traffic durch eigene Facebook-Vorschaubilder mit Open Graph verdoppelt habe

Vor einiger Zeit bin ich ein Problem in meinem Videoblog bolzplatzheld.de angegangen, welches mich schon seit längerer Zeit und störte und durch das mir (wie sich später herausstellte) unfassbar viel Website-Traffic durch die Latten ging.

facebooklink

Aber von Anfang an: Ich publiziere regelmäßig unregelmäig Videos via YouTube und möchte diese natürlich auch via Facebook verteilen. Zentrales Ziel meiner Videos ist natürlich, dass sie von vielen Leuten gesehen werden. Darüberhinaus soll es auch Traffic auf meine Website bringen, so dass ich hier weitere Inhalte an den Mann oder die Frau bringen kann.

Problem war nur, dass ich Seiten meiner Website nicht vernüftig in den sozialen Netzwerken teilen konnte, da z.B. Facebook bei der Generierung der Vorschaubildchen eines Links die eingebetteten YouTube-Videos nicht berücksichtigt hat. Das führte dazu , dass jeder Link auf ein Video meiner Website nur mein allgemeines Logo angezeigt hat. Da Bilder beim Teilen von Links in sozialen Netzwerken enorm wichtig sind (dazu vielleicht in einem anderen Artikel mehr),  hätte das wiederum dazu geführt, dass meine Videos nicht so häufig angeschaut würden.

Ich habe mich dann also für das kleinere Übel entschieden, und statt des Links auf meine Website mit dem eingebetteten YouTube-Video, den Link zu YouTube direkt geteilt. Aus YouTube-Links kann Facebook dann wieder ein vernünftiges Vorschaubildchen generieren.

Vorschaubild für Facebook selbst festlegen

Mit Open Graph gibt es daher die Möglichkeit Facebook etwas unter die Arme zu greifen und das Bild selbst festzulegen. Dafür muss man z.B. folgende Meta Tags einfügen.

<meta property="og:title" content="Titel des geteilten Links" />
<meta property="og:description" content="Beschreibnungstest des geteilten Links" />
<meta property="og:image" content="http://www.example.org/og_image.png" />

Unter og:image kann man dann den Pfad zu einem Bild eintragen, welches dann u.a. auf Facebook angezeigt wird, wenn der entsprechende Link zur Seite auf Facebook geteilt wird. Ebenso lässt sich u.a. auch der Titel und die Beschreibung geändert werden. Diese lässt sich allerdings im Gegensatz zu den Bildern später auch frei auf Facebook festelegen. Wenn man sich beim Teilen zwischen mehrere Bilder entscheiden möchte, kann man den Tag auch mehrmals angeben.

So kann ich nun endlich die Videos auf meiner eigenen Seite einbinden und dann den Link zu meiner Website auf Facebook publizieren. Das hat dazu geführt, dass sich der Traffic auf meiner Internetseite mehr als verdoppelt hat.

Welche Netzwerke unterstützen den Open Graph?

Neben Facebook nutzt  auch Google+ und das Firmennetzwerk Xing dieses Vorschaubild.

Wie kann man seine Open Graph-Definitionen prüfen?

Mit dem Facebook-Debuggerkann man die korrekte Einbindung der Open-Graph-Angaben testen.

Wie kann ich die Meta-Tags im Quellcode festlegen?

Solltet ihr ein Redaktionssystem wie WordPress nutzen, gibt es zahlreiche Erweiterungen, mit denen ihr die Metainformationen zu euren Seiten pflegen könnt. Für WordPress empfehle ich das Plugin „Open Graph Protocol In Posts and Pages v2″. Für TYPO3 gibt es die Erweiterung „Facebook Open Graph“.

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.

Veranstaltungen pflegen mit TYPO3 und seminars

Häufig steht man als Betreiber von Veranstaltungen vor dem Problem, dass man ein Anmeldeformular auf der Website zur Verfügung stellen möchte. In diesem Tutorial zeige ich, wie man dieses Formular mit der TYPO3-Erweiterung „seminars“ erstellen kann. Darüberhinaus besitzt seminars die Möglichkeit die Anmeldungen zu überwachen und bei einer definierten Teilnehmerzahl zu schließen und/oder Wartelisten zu erstellen. Ebenso lassen sich alle Teilnehmerdaten in Excel exportieren.

Da seminars, wie der Name schon sagt ursprünglich für das Seminarmanagement erstellt wurden, lassen sich auch diverse Referenten, Seminarorte und Veranstalter pflegen. Für die Kunden, die seminars allerdings nur zum Anmeldungsmanagement einsetzen, habe ich diese Funktionen deaktiviert.

Aufruf von seminars in TYPO3

media_1337283933950.png

Das gesamte Veranstaltungsmanagement in TYPO3 ist unter dem Punkt „Veranstaltungen“ zusammengefasst. Anschließend muss der Ordner ausgewählt werden, in dem die Seminare abgespeichert sind.

media_1337284135449.png

Im rechten Bereich lassen sich nun die bisherigen Veranstaltungen ansehen und bearbeiten. Ebenso lassen sich neue Veranstaltungen erstellen. Hierzu genügt ein Klick auf „Neuen Datensatz erstellen“.

media_1337284277704.png

Nun öffnet sich die Maske um die Veranstaltungsinformationen zu pflegen. Zwingend erforderlich sind folgende Eingabefelder:

  • Allgemein/Titel
  • Ort/Anfangszeit
  • Ort/Anmeldebegin
  • Veranstalter
  • Teilnehmer/Anmeldung nötig

Pflege von mehreren Unterveranstaltungen

media_1337284520308.png

Zur Pflege von mehreren Unterveranstaltungen kann das Feld „Anmeldeoption mit Checkbox“ genutzt werden. Über das Plus-Symbol lassen sich neue Unterpunkte zum Anmeldeformular hinzufügen, welche dann vom Teilnehmer optional ausgewählt werden können. Hierüber kann z.B. vegetarisches Essen ebenso abgefragt werden, wie der Besuch von diversen Unterveanstaltungen.

media_1337284658628.png

Nach einem Klick auf das Diskettensymbol ist die Veranstaltung angelegt und im System gespeichert. Nun muss der Nutzer nur noch auf das Anmeldeformular geleitet werden. Hierzu muss der Link herausgefunden und auf der Website bekannt gemacht werden.

Link der Veranstaltung herausfinden

media_1337285416593.png

Der Link zum Anmeldeformular ist immer folgendermaßen aufgebaut:

http://www.Beispieladresse.de?id=IdDerRegistrierungsseite&tx_seminars_pi1[uid]=IdDerVeranstaltung

Man erhält die beiden ID’s im TYPO3 Backend in dem man mit der Maus über die jeweiligen Icons fährt und etwas wartet. Dann erscheint eine Zahl, die die ID repräsentiert.

Herzlichen Glückwunsch! Die Veranstaltung kann nun beworben werden.

TYPO3camp Hamburg: caretaker

In dieser Rubrik möchte ich auf interessante Vorträge aus der Vergangenheit verschiedener TYPO3-Events hinweisen. Heute möchte euch einen Vortrag zum Thema Caretaker vom TYPO33camp in Hamburg präsentieren.

Caretaker – TYPO3 monitoringMit Caretaker kann man an zentraler Stelle seine TYPO3-Instanzen monitoren und sich benachrichtigen lassen, wenn diese z.B. nicht erreichbar sind. 
View more presentations from red scout.

TYPO3 4.5beta4 erschienen

Gestern Nacht wurde die neue Betaversion von TYPO3 4.5 veröffentlicht.

Zu den Neuerungen zählen folgende Features:

  • Plupload: Es gibt nun einen weiteren Uploader, der mit HTML5, Silverlight usw arbeiten kann. In den Usersettings kann der Redakteur zwischen den gewünschten Uploadern wählen
  • Labels/CSH: Die Labels wurden weiter angepasst und auch die pages_language_overlay passt nun in das neue Label-Konzept
  • Seitenbaum: Die Implementierung des Seitenbaums mit ExtJs wurde weiter verbessert
  • Extension Manager: Eine neue Version des neuen EM wurde in die Beta4 übernommen

Weitere Informationen findet ihr im Forge von TYPO3.