Seitenreiter zur Fanpage hinzufügen

Dafür gibt es eben jene Tools wie den fanpageGENERATOR aus dem Hause numero2. Dem Inhaber der Agentur dürften einigen Lesern bekannt sein. Torsten Materna (@agentur) stellt mit dem Service eine breite Palette an Möglichkeiten zur Seite. Ihr könnt mit dem Werkzeug euch ein Impressum einrichten. Seit Kurzem könnt ihr auch Gewinnspiele inkl. Teilnahmebedingungen über das Kontaktformular einrichten. Formular ausfüllen, Fanpage zuordnen, fertig.

Wer einen Entwickler-Account hat, kann auch sein eigenes Icon für die Applikation hinzufügen. Es gibt dazu eine Beschreibung. App anlegen, als Seitenreiter auswählen. Die URL für die Seite als auch die verschlüsselte URL ergibt sich aus
http(s)://apps.fanpage-generator.de//

Ich habe ein Screencast gemacht, bei dem ich auf die Schnelle, eine Willkommens-Seite für das Summercamp Alfeld angelegt habe. Ich erkläre in dem Video auch noch einige grundlegende Funktionen des fanpageGENERATOR, sofern selbsterklärend nicht ausreicht.

“Hole den Kunden dort ab, wo er sich befindet (und nimm Ihn an die Hand)”

Der Kunde ist in dem Fall der Besucher der Webseite. Aber wer nimmt ihn an die Hand? Die wenigstens. “Oh wir haben da aber ein super Bildchen”. Ja… toll aussehen tut das tatsächlich und witzig ist es obendrein, aber bringen tut es dem Besucher nichts. Große Unternehmen gehen da weiter, jene sind meist mehrfach witzig und bieten evtl. sogar noch eine Suche an.

Das Problem an der Suche? Eigentlich keins. Ich bitte den User, nachdem er eine Bruchlandung gemacht hat, sich eigenständig um das Problem zu kümmern. Er darf nun fröhlich in der Suche rumstochern, um gegebenenfalls wieder auf den rechten Pfad zu kommen. Wirklich komfortabel ist diese Position nicht wirklich, oder? Man kann ihm auch Alternativen aufzeigen, was auch viele tun. Zum Beispiel wie im folgenden Bild zu sehen.

Letztlich vermisse ich aber bei so vielen tollen und wirklich tollen, teilweise genialen 404-Seiten eine ganz einfach Sache. Ein Formular. In jeder Berufssparte, wenn der Kunde ein Produkt ruiniert oder einen Schaden zu vermelden hat, ist die erste Frage: “Wie haben Sie das denn geschafft? Wie ist dies oder jenes passiert?” Nur im Web irgendwie nicht. Zumindest ist es eher die Ausnahme als die Regel. Dabei ist die Lösung recht banal.

Was wollten Sie tun? Name, Kontaktmail und eine Nachricht. Der Besucher bekommt nicht nur das Gefühl mit seinem Problem nicht allein dazustehen. Man ermöglicht sich auch die Chance, einen Prozessfehler zu rekonstruieren. Darüber wird sich die Entwicklungsabteilung freuen.

Und wie holt Ihr euren gestrandeten Kunden ab? Oder habt ihr ein Supersystem, wo keine 404 Aufrufe vorkommen?

<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Texte</a></li>
	<li><a href="#">Fotos</a></li>
	<li><a href="#">Zitate</a></li>
	<li><a href="#">Kontakt</a></li>
	<li><a href="#">Impressum</a></li>
</ul>

Theoretisch befindet sich die Navigation in einem DIV-Container. Der Liste kann wahlweise noch eine Klasse oder ein Idenfitier mitgegeben, ich werde es im Beispiel allerdings so belassen. Der Liste wird das Aufzählungszeichen entnommen und die Listenpunkte werden ausgerichtet.

ul {
	list-style-type: none;
}
ul li {
	float: left;
	width: 100px;
	height: 40px;
}

Bis zu diesem Punkt kommen alle ohne Hilfe. Der Knackpunkt ist den Link dazu zu bewegen, die komplette Fläche zu nutzen und nicht nur den angezeigten Text. Dies ist banaler als mancher denken mag. Ein Anker (Link) ist ein naturgemäß als Inline initialisiert. Und genau hier liegt der Schlüssel zum Erfolg. Teilt man dem Link mit, dass er als Block angezeigt werden soll und nimm dir allen Platz, den du bekommen kannst, ist das Rätsel bereits gelöst.

ul li a {
	width: 100%;
	height: 100%;
	display: block;
	background-color: #000;
	color: #fff;
	text-decoration: none;
}
ul li a:hover {
		width: 100%;
		height: 100%;
		display: block;
		background-color: pink;
 }

Eigentlich recht simpel. Heute morgen habe ich dieses Beispiel zur Veranschaulichung abgelegt. Wenn man es 1-2 Mal gemacht hat, vergisst man das auch nicht mehr. Ich denke auf die Deklarierung des :visited-Element brauche ich nicht eingehen oder?!

Die falsche Einstellung

Die Timeline als RSS-Ersatz - ein überflüssiger Ansatz

Es beginnt mit der falschen Einstellung oder besser gesagt, mit der Fehleinschätzung von Twitter. Twitter ist kein Instrument für plumpes Marketing. Es ist nicht gleich zu setzen mit Performance oder Affiliate Marketing. Es ist auch kein Flyer oder Newsletter, den ich bei (un)interessierten Menschen hinterlassen kann. Es gibt auch keinen Streuwert von „guten“ 2-3%. All das ist Twitter nicht. In sinnlosen Accounts wird Potential weggeworfen. Wer einen Blog sein Eigen nennt, wird es via Twitter Tools und WordPress geschafft haben sinnfreie „New Blog Post:“-Einträge abzusetzen. Evtl. kommen noch Angebote aus einem Shop dazu. Ich kann es nur immer und immer wiederholen: Understand your customer!
In der Regel passiert dies schlichtweg nicht, dies wird anhand dieser Accounts ganz klar deutlich. Denn Twitter lebt von der Relevanz, die Relevanz des Einzelnen. Und damit haben viele einfach Probleme, dabei ist es „easy to use“ wie es Denglisch so schön heißt.

Die Symbiose

Twitter ist für Unternehmen eine Symbiose aus Marketing und Kundenbindung. Das Problem, vor welches sich viele Unternehmen stellen: das Feedback erfolgt unmittelbar – was eigentlich ein riesiger Vorteil ist. Ich brauche nicht lange Warten bis ich für Fehltritte, den selbigen vor’s Schienbein bekomme. Eine Art interaktiver A/B-Test in Echtzeit, wenn man so will.

Die Möglichkeiten

Twitter bietet viele Möglichkeiten. In erster Linie muss man die Authentizität wahren. Darüber hinaus sollte man, wie in jedem Medium, einen Mehrwert bieten. Dieser kann auf unterschiedlichste Art erfolgen. Der Mehrwert ist nicht ein „Blogposting“-Wasserfall oder „Angebote“, diese Dinge kann ich über RSS oder anderen Medien eleganter empfangen. Ich kann aus der Reihe agieren. Ein paar Beispiele (fiktiv), die zur Veranschaulichung dienen sollen:

• Ein Cafe kann Interaktiv mit der Kundschaft kommunizieren (spontane Aktionen – story telling/viral).
• Ein Freelancer kann auf sich aufmerksam machen, durch Links, Hilfe, Tipps und Tricks (Kompetenz).
• Unternehmen können dem Kunden „Hilfe“ anbieten, z.B. wie man seine Hemden am Besten bügelt oder wie die Strumpfhose länger hält (Service).
• Oder welche Wolle ich für welchen Pullover nehme. Welche Grafikkarte in meinen PC passt und aus welchen Gründen ich, dieses oder jenes Produkt wählen sollte (Service – daraus wird virales entstehen!).

Dies sind aber nur aus der Luft gegriffene Dinge. Entscheidend dabei ist, eine gewisse Relevanz gegenüber der Audienz zu schaffen. Denn mir wird nur jemand (sinnvoll) folgen, wenn ich sein Interesse erwecke. Privatpersonen aufgrund Ihres Jobs, Ihres öffentlichen Interesses, weil sie Trendsetter sind oder immer für “mich” interessante Links ans Tageslicht holen. Zuletzt aber auch weil mir die Schreibweise oder eine Einstellung des „Vogels“ gefällt.

Die Reichweite

Die Reichweite von Twitter ist eine Zahl, die man derzeit nicht wirklich messen kann. Ich kann sicherlich wilde Formeln aufstellen, wahre Zahlen werde ich leider nicht bekommen. Denn Twitter bildet im Laufe der Zeit auch eine Reputation. Ein bisschen Community Management, ein wenig Social Media und eine Priese Marketing.
Einen direkten Erfolg kann man aus einem ReTweet ableiten. Somit vergrößert sich auch die Zahl der Empfänger.

Meine Follower + Follower vom ReTweet – gemeinsame Follower = erreiche Leute.

Eine Milchmädchenrechnung, die ich so im Raum stehen lasse (über Sinn oder Unsinn vermag ich jetzt nicht zu debattieren).

Zurück zum Punkt Reputation. Twitter wird im langfristigen Bereich (Webzeit nicht Geschäftsjahre) über indirekte Umwege zum Marketing-Instrument werden. Die höchste Form der Belohnung dürfte ein Story Telling sein, welche sich im Warenkorb / Auftrag oder Branding niederschlägt.
Wer mir folgt, wird die Gespräche mit der @EuroWebGroup verfolgt haben. Daraus resultieren kleine kostenlose Dinge:

1. Reputation
2. Verbesserung der eigenen Arbeit („Bug Fixing“)
3. Kostenloses Marketing – u.a. durch die Nennung in diesem Artikel
4. Branding – meine Freunde kennen EuroWeb nun auch

Dies ist sicherlich nur ein „kleines“ Beispiel. Ich denke aber, man kann das ganz gut auf ein größeres Unternehmen hochziehen. Immerhin bin ich hier nur ein 1-Mann-Dorf-Blogger – nichts weiter. Diesen Artikel werden in den ersten 24 acht Stunden über 100 Menschen lesen (oder mehr, dass hängt von euch ab!). Und Euroweb hat nicht einen Cent noch irgendwelche Anstalten aktiv für diese Nennung unternommen. Ich hoffe, es wird deutlich, was ich ausdrücken möchte. Den Backlink gibt’s kostenlos oben drauf.

Ich könnte dieses Beispiel für einige Branchen „richtig“ austoben. Dies würde aber durchaus den Rahmen sprengen. Ich hoffe, der ein oder andere hat nun die Möglichkeiten, die sich ihm durch Twitter bieten mit ein wenig Weitblick erkannt. Und für die Skeptiker: Auch eine Performance-Kampagne kann richtig in die Hose gehen und die kostet bare Münze. Alles kann nichts muss.

(Exkurs: Das schönste Beispiel, welches ich je über Story Telling hörte kommt von Seth Godin: Niemand braucht Nike-Reifen auf einem Hummer2. Hat es aber in den USA gegeben.)

Ich kann mit einem Messer Brot schmieren. Ich kann damit aber auch schnitzen, schneiden, Löcher stechen, die Luft aus einem Reifen lassen. Der Kreativität sind in beiden Fällen kaum Grenzen gesetzt und die zahlreichen Services rund um Twitter tun Ihr Übriges.

Viel Erfolg beim Probieren. Fragen? Fragen! Über euer Feedback würde ich mich in den Kommentaren freuen.
Danke!

Ein gern gesehener Fehler, wieso Margin auto nicht “funktioniert” ist: Die Elementbreite ist nicht angegeben. Wonach soll ich also automatisch zentrieren. Also gebe ich meinem Element noch eine Breite mit. Für den Blog habe ich in den Inspirations-Posts immer eine Breite von 500 Pixeln, die ich zentriert angezeigt haben möchte. Da aber mein Content-Bereich breiter ist, würde ich das Bild gern zentrieren. Also füge ich der CSS-Datei eine Klasse hinzu:

.picture_center
{
margin: 0 auto;
width: 500px;
}

Fertig!

Wenn ich meinen Bildern noch Kommentare mitgeben möchte, dies aber nicht über das Caption machen will – aus welchen Gründen auch immer, kann ich der Klasse noch ein text-align: center; hinzufügen.

Vorteil an dieser Variante ist, dass ich mich nicht auf ein Bild beschränken muss. Ich kann auch mehrere Bilder so im Posting zentrieren (nebeneinander – wenn sie in der Gesamtbreite die angegebene Breite nicht überschreiten).

AddQuicktag
Das Plugin AddQuicktag ermöglicht es einem im Editor Tags hinzuzufügen. Damit wird die Arbeit erheblich erleichtert. Ich kann nun ganz entspannt unsere Klasse hinzufügen. Danach erscheint ein weiterer Button in der Leiste.
Name: PicCenter
Start Tag: <div class=”picture_center”>
End Tag: </div>

Speichern und in den Editor. Dort ist ein Button hinzugekommen. Nun kann ich nach belieben mein(e) Bilder markieren und ins Zentrum rücken lassen (z.B. aus der NextGen-Gallery). Wer es flexibler möchte, lässt die Breitenangabe weg. Muss dann allerding jedes Mal die Breite angeben (Stichwort: style).

Anrengungen, Kritik? (Lobeshymnen? )

<?php foreach ($comments as $comment) : ?>

In dieser Zeile wird, wie nicht anders zu erwarten, eine Foreach-Schleife angefangen. Dort hakt man ein und ermitteln den Kommentar-Typen. Und fügen diese Zeilen in unseren Code ein.

<?php
$kommantartyp = get_comment_type();
if($kommentartyp == &quot;comment&quot;) {
?>

Die Variable ruft die Funktion get_comment_type() auf, welche WordPress von Haus aus mitbringt. Sie liefert nichts anderes als einen String zurück. Nämlich comment, pingback oder trackback. Wenn also der Kommentartyp ein comment ist, dann gib uns die Kommentare aus.

Vor Ende der Foreach-Schleife schließen wir unsere Bedingung. Dem “Non-comment”-Kommentar wird noch beigebogen, dass er gar kein Kommentar ist sondern ein Trackback.

<?php
} else { //if-Abfrage $kommentartyp
$trackback = true;  //Du bist'n Trackback!
}
?>

Das Ende der Foreach-Schleife ist diese Zeile

<?php endforeach; /* end for each comment */ ?>

Danach folgt meist noch ein HTML-Tag. Die Liste oder der DIV-Container werden geschlossen. Und jetzt kommt der Punkt, wo die Trackbacks eingefügt werden. Wichtig: Innerhalb der Schleife, wo die Kommentare angezeigt werden. Also oberhalb der Zeile:

<?php else : // this is displayed if there are no comments so far ?>

Und das ist der Code (naked), der über der Else-Zeile eingefügt werden muss:

<?php
if ($trackback == true) {
foreach ($comments as $trackback) :
$kommentartyp = get_comment_type();
if($kommentartyp !=&quot;comment&quot;) {
comment_author_link() ;
}
endforeach;
}
?>

Im Prinzip ist es nichts anderes wie die Kommentare auch ausgeben werden. Allerdings dass nun eben auf den comment_type gefiltert wird. Natürlich solltet Ihr eure Trackbacks noch formatieren. Sowohl HTML als auch CSS.

Als Beispiel:

<?php if ($trackback == true) { ?>
<ul class=&quot;trackbacks&quot;>
<?php foreach ($comments as $trackback) :
$kommentartyp = get_comment_type();
if($kommentartyp != &quot;comment&quot;) { ?>
<li><?php comment_author_link() ?></li>
<?php }
endforeach; ?>
</ul>
<?php } ?>

Wer z.B. eine Aufzählung vor den Links haben möchte, der nimmt anstelle einer unordered List (ul) eine ordered list (ol). Hinterher über CSS noch ein wenig hübsch machen und eure Trackbacks sind aus den eigentlichen Kommentaren raus. Die Funktion comment_author_link ist ebenfalls Bestandteil von WordPress. Sie gibt einen Link mit der URL des Kommentars mit Anzeige des Autors.

Fragen? Fragen!
In den Kommentaren, per Mail oder Twitter

PS: Die deutschen Variablennamen sind absichtlich gewählt. Ich weiss, dass man es nicht macht Mag aber vielleicht für den einen oder anderen zum besseren Verständnis dienen. Man möge es mir verzeihen.