Mit ein paar Zeilen HTML und CSS lässt sich im Social Web große Präsenz vortäuschen somit Schafe (Besucher) dazu zu bringen euren Like / +1 / Tweet Button zu drücken. Der Snippet kann auch verwendet werden um im WWW mit vielen Anhängern zu protzen.

Technisch lässt sich das sehr einfach mit überliegenden DIV Container lösen in denen die beliebig angepasste Anzahl an Likes / Plus ones / Tweets eingetragen wird. Das sieht dann so aus:

 
886
135


(Inzwischen müssen aus Gründen der Privatsphäre die Social Fake Layers zunächst frei geschalten werden. Zum deaktivieren der Social Fake Layers Seite neu laden)

Ich verwende genau diesen Code auch hier im Blog für die Social Buttons hier im Blog.
Dieses Ergebnis entsteht aus nachfolgendem Stück Code. Der Platzhalter ***URL*** sollte durch die URL die promoted werden soll ersetzt werden.

<style>
.sociawrap-header {
	height: 80px;
	width: 270px;
	position: relative;
}
 
.sociawrap-header .g-plusone-wrap, .sociawrap-header .twitter-share-button, .sociawrap-header .fb-like-wrap { 
	float: right; 
	margin-left: 20px;
	margin-top: 11px;
}
 
.sociawrap-header .fb-like-wrap { 
	width: 90px; 
	height: 60px; 
	margin-top: 13px;
}
 
.fb-fake {
	z-index: 999;
	position: absolute;
	right: 19px;
	top: 17px;
 	font-family: "verdana",sans-serif;
	font-size: 13px;
	background-color: #fff;
	color: #333333;
}
 
.twitter-fake {
	z-index: 999;
	position: absolute;
	right: 128px;
	top: 16px;
 	font-family: "verdana",sans-serif;
	font-size: 16px;
	background-color: #fff;
	color: #333333;
	font-family: Helvetica Neue',Arial,sans-serif;
}
 
.google-fake {
	z-index: 999;
	position: absolute;
	right: 212px;
	top: 16px;
	font-size: 16px;
	background-color: #fff;
 	color: #666666;
        font-family: arial,sans-serif;
}
</style>
<div class="sociawrap-header">
	<div class="fb-like-wrap"><div class="fb-like" href="***URL***" width="450" show_faces="false" data-layout="box_count" action="like" font="verdana"></div></div>
	<a href="http://twitter.com/share" class="twitter-share-button" data-url="***URL***" data-count="vertical" lang="de">Tweet</a>
	<div class="g-plusone-wrap"><div class="g-plusone" data-size="tall" href="***URL***"></div></div>
	<div class="right_clearer">&nbsp;</div>
	<div class="fb-fake">886</div>
	<div class="twitter-fake">225</div>
	<div class="google-fake">135</div>
</div>
Keine Kommentare »
 

Bei Arbeiten wurde ich auf ein merkwürdiges Zeichen „“ im HTML Dokument aufmerksam, weil dieses die Darstellung des Layouts beinträchtigte. Nach einiger Recherche fand ich heraus das es sich hierbei um das UTF-8 Byte Order Mark kurz BOM handelt. Das Byte Order Mark ist eine Bytefolge die von einigen Programmen verwendet wird um anzuzeigen das ein Dokument UTF-8 codiert ist. Anderen Programmen, wie Browsern, ist diese Bytefolge nicht geläufig. Häufig wird es dann in dieser Form  dargestellt.

Einen Webbasierenden Test ob das BOM in einem Dokument vorhanden ist findest du hier: BOM Tester

Keine Kommentare »
 

Während der Arbeit für Werbeagenturen ist mir aufgefallen, dass die meisten Designs als CSS Layout mit 100% Höhe am schönsten zur Geltung kommen. Eine prozentuale Breite für ein Web-Layout, das ursprünglich eine feste Breite hatte, lässt sich selten umsetzen. Eine prozentuale Höhe jedoch schon. Von prozentualen Maßen wollen Werbeagenturen in der Regel auch nichts wissen. Denn im Print Bereich, in welchem die Wurzeln der Agenturen liegen gibt es so etwas nicht. Was dabei nicht beachtet wird ist das der Designer bei einem Printmedium weiß wie groß die zu bedruckende Fläche ist. Im Web ist das anders. Die Größe und Auflösung des Bildschirm der Betrachter stehen nicht fest.

Das folgende HTML Grundgerüst wird hierfür benötigt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>Horizontal zentriertes 100% Höhe CSS Layout</title>
</head>
<body>
	<div id="wrapper">
		Inhalt
		<div id="footer">
			Fußzeile
		</div>
	</div>
</body>
</html>

Dieser CSS Quellcode muss noch in den Style Tag des Dokuments eingefügt oder aus einer seperaten CSS Datei eingebunden werden:

/* Mit dem Universalselektor standardmäßige Innen- und Außenabstände entfernen */
* {
	margin: 0;
	padding: 0;
}
 
/* Scrollbar einblenden, damit die Seite bei langem Inhalt nicht springt */
html {
	overflow: -moz-scrollbars-vertical; /* Firefox */
	overflow-y: scroll;
}
 
/* Ohne diese Angaben kann der Wrapper keine 100% Höhe haben */
html, body {
	height: 100%;
}
 
/* Keine Rahmen um Bilder anzeigen */
img {
	border: 0;
}
 
/* Gestrichelte Rahmen beim Klicken von Links entfernen */
:focus {
	outline: none;
}
 
div#wrapper {
	position: relative; /* Wird für den Footer benötigt */
	margin: 0 auto; /* Horizontales zentrieren des Wrappers */
	width: 995px; /* Ohne Breitenangabe kann der Wrapper nicht zentriert werden */
	background: #f0f0f0; 
	height: auto !important;
	height: 100%; /* Verhält sich wie min-height im IE6 */
	min-height: 100%;
}
 
div#footer {
	position: absolute;
	width: 100%;
	bottom: 0; /* Footer am Ende des Browsers festsetzen */
	background: #dddddd;
	border-top: 6px double gray;
}

Das padding-bottom des Inhalt DIV’s, das nicht im Quellcode vorhanden ist, muss mindestens so groß sein wie die Höhe Footers. Beachtet man dies nicht verschwindet ein Teil des Inhalts hinter dem Footer. Zusätzlich sollten noch Schriftart und Schriftgrößen im CSS definiert werden. Da hierbei sonst Abweichungen in den verschiedenen Browsern entstehen. Eine Demo findest du hier.

Mit dieser Layout Vorlage sollte es dir ein leichtes sein eine Webseite mit zentriertem Inhalt und 100% Höhe zu erstellen. Ich hoffe das ist ein schönes nachträgliches Weihnachtsgeschenk für dich. Frohe Weihnachten noch. 🙂

Keine Kommentare »