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 »
 

Die Verbreitung der eignen Blog-Inhalte über Soziale Netzwerke gehört inzwischen zum Pflichtprogramm für jeden Blogger und ist auch für Firmenpräsentationen oder Online Shops ein wichtiges Werbemittel geworden.

Social Bookmark Dienste kristallisieren sich inzwischen als Hype heraus. Google Bookmarks, Digg oder Mr. Wong haben weniger Verbreitung oder sind Nutzern gänzlich unbekannt. Draus resultiert, das diese Dienste nicht den gewünschten Besucherstrom bringen.

Google+, twitter und facebook. Die 3 Großen im Netz, die jedem bekannt sind, auf diese möchte ich meinen Focus in diesem Blog Eintrag legen.

Für die Integration dieser Buttons stellen die 3 Communities jeweils Button Generatoren und gut verständliche Anleitungen zur Integration bereit.

Jeder dieser Buttons läd ein Script vom Server des jeweiligen Anbieters um die Buttons mit Funktionalität auszustatten. Das laden der Scripte kann, je nach Last der Ressourcen der Drittanbieter (Google, twitter, facebook), den Aufbau der Seite bremsen.

Google stellt zur Integration seines Buttons von Haus aus die Möglichkeit für eine asynchrone Integration bereit. Auf Basis dieses kleinen Javascriptes ist es ein leichtes den twitter tweet und den facebook Like Button ebenfalls asynchron in unsere Webseite zu integrieren.

Folgendes Script läd Google+, twitter tweet & facebook Like Button asynchron von den Drittanbieter Servern:

window.___gcfg = {lang: 'de'}; // google+
var socials = ['https://apis.google.com/js/plusone.js', 'http://platform.twitter.com/widgets.js', 'http://connect.facebook.net/de_DE/all.js#xfbml=1'];	
for (var i = 0; i < socials.length; i++) {
  	var po = document.createElement('script');
  	po.type = 'text/javascript';
  	po.async = true;
	po.src = socials[i];
	var s = document.getElementsByTagName('script')[0];
	s.parentNode.insertBefore(po, s);
}

Die Einbindung des Scriptes sollte im Kopfbereich (head-Tag) unseres Dokumentes erfolgen.

Ein Beispiel für die jeweiligen HTML Tags stellt dieser Code Block hier da, welcher in den Inhalts Bereich (body-Tag) des Dokumentes eingebunden werden kann:

<div class="g-plusone" data-size="medium" href="***LINK***"></div>
<a href="http://twitter.com/share" class="twitter-share-button" data-url="***LINK***" data-count="horizontal" lang="de">Tweet</a>
<div class="fb-like" href="***LINK***" width="450" show_faces="false" action="like" font="verdana"></div>

Der Platzhalter ***LINK*** ist hierbei durch den Verweis zu ersetzen, der an Google, twitter oder facebook weitergereicht werden soll. Anpassungen der Buttons in Aussehen, Sprache oder Funktionalität können von den jeweiligen Anbietern ersehen werden. Siehe Generatoren und Anleitungen der jeweiligen Anbieter. (siehe oben im Artikel)

Google+, twitter tweet & facebook Like für WordPress

In diesem WordPress Blog-System ist Google+, twitter tweet & facebook Like auf die bereits aufgezeigte Weise implementiert. Um den Short-Link des jeweiligen Artikels in einem WordPress Template zu ermitteln verwende ich die Funktion wp_get_shortlink(). Der Rückgabe Wert dieser Funktion oder die Funktion selber muss lediglich durch den ***LINK*** Platzhalter ersetzt werden.

Keine Kommentare »