LikeJS ist dein kostenloser und frei verwendbarer Like Booster basierend auf HTML, CSS und jQuery.



Was ist LikeJS?

LikeJS ist ein kleines Tool, welches eine Like Box von Facebook auf blickfangende Art und Weise in deine Website einbindet und somit wesentlich mehr neue “Gefällt mir” Angaben für deine Fanpage generiert, als eine statische Like Box.

Die LikeJS Box wird erst dann angezeigt, wenn der Besucher ein Stückchen runtergescrollt hat. Damit ist garantiert, dass der Besucher generelles Interesse an dem Thema deiner Website hat und ist somit dazu prädestiniert, ein Fan deiner Seite auf Facebook zu werden. Du erhälst deshalb auf Grund der Positionierung der LikeJS Box nicht nur mehr “Gefällt mir” Angaben, sondern deine Fans gewinnen somit an Qualität und sind mehr wert.

LikeJS ist als Standalone Version für deine statische Website oder auch allerlei CMS und eCommerce Systeme zum implementieren verfügbar. Alternativ steht das Script auch für alle WordPress Nutzer als Plugin bereit, womit die Implementierung in deinen Blog spielend leicht von statten geht.




Demo

LikeJS wurde bereits auf dieser Seite integriert – da du ja bereits bis hier unten gescrollt hast bin ich mir ziemlich sicher, dass dir die LikeJS Box beim aufploppen aufgefallen ist. Schon auf “Gefällt mir” geklickt? ;)

Wenn du in der LikeJS Box auf das x oben rechts klickst schließt sie sich und speichert gleichzeitig ein Cookie, damit die Box beim neu Laden oder wechseln der Unterseite nicht mehr erneut erscheint. Dafür bleibt aber ein kleines Icon unten rechts, damit man die LikeJS Box nachträglich wieder öffnen kann.

Wir haben für dich aber auch eine Standalone Demo vorbereitet:

Standalone Demo anzeigen




Wordpress Plugin

LikeJS ist auch als kostenloses WordPress Plugin vorhanden. Du kannst es entweder direkt bei uns, oder aber über das offizielle Plugin Directory von WordPress runterladen.

WP LikeJS runterladen (Version 1.0.1 – 56 kb) – Deutsche Version
WP LikeJS runterladen (Version 1.0.1 – 56 kb) – English Version
WP LikeJS im WordPress Plugin Directory




Tutorial (Wordpress)

Wenn du dir das WordPress Plugin runtergeladen hast, musst du es unter Plugins -> Installieren -> Hochladen installieren. Alternativ kannst du das Plugin auch über die Suchfunktion unter Plugins -> Installieren suchen und direkt installieren, ohne es zuvor runterzuladen.

Wenn es installiert wurde, kannst du es aktivieren. Danach taucht unter Einstellungen ein neuer Navigationspunkt namens LikeJS auf, hinter dem sich die Einstellungsmöglichkeiten des WordPress Plugins befinden. Erst wenn du dort den URL-Slug deiner Facebookseite angibst, wird die LikeJS Box auf deiner Website angezeigt.




Standalone Version

Hier findest du den Download der LikeJS Standalone Version. In der Datei likejs.zip befindet sich die index.html, in der alle nötigen Quellcode-Fragmente vorhanden sind und ein Ordner namen img, der alle Bilder beinhaltet. Alle Dateien dürfen, egal ob kommerziell oder nicht kommerziell, frei verwendet werden.

LikeJS runterladen (Version 1.0.0 – 53 kb)




Tutorial (Standalone)

Für die LikeJS Box ist folgender CSS Code nötig. Binde diesen entweder in den head-Bereich deiner Website, oder in eine externe CSS Datei (empfohlen) ein.

#likejsbox{ display:none; position:fixed; z-index:9999; bottom:0px; right:10px; padding:5px; width:300px; background:#f1f1f1; height:292px; overflow:hidden; -webkit-box-shadow: 0px 0px 3px 0px #666;box-shadow: 0px 0px 3px 0px #666; }
#likejsbox .header{ font-size:12px; margin: 0 0 3px; font-weight: 600; text-align:center; border: medium none; height: 21px;left: -5px;padding: 5px 10px;position: relative;top: -5px; width: 290px; background:#4A67A3; color:#fff; }
#likejsbox p{ margin:5px; }
#likejsbox #close{ cursor:pointer; position:absolute; top:6px; right:12px; }
#relikejsbox{ cursor:pointer; display:none; position:fixed; z-index:9999; bottom:20px; right:20px; -webkit-box-shadow: 0px 0px 3px 0px #666;box-shadow: 0px 0px 3px 0px #666; }
#relikejsbox img{ display:block; }

Als nächstes muss jQuery in den head-Bereich eingebunden werden. Du kannst jQuery dazu auf deinem Server hosten, oder immer die neueste Version von der jQuery Website abrufen.

<script src=”http://code.jquery.com/jquery-latest.min.js”></script>

Nachdem jQuery geladen wurde, aber noch im vor dem schließendenTag, definieren wir nun mehrere Funktionen. Eine Funktion dient dazu, die LikeJS Box schließen zu können, eine weitere dazu, sie wieder öffnen zu können und zwei weitere sind für die Cookie-Verarbeitung notwendig.

Folgender Code muss im script-Bereich implementiert werden.

function closeLikeJSBox(){
	jQuery('#likejsbox').hide( 250 );
	jQuery('#relikejsbox').show( 250 );
	setCookie("fbsave",666,30);
}
function reLikeJSBox(){
	jQuery('#relikejsbox').hide( 0 );
	jQuery('#likejsbox').addClass('fixed');
	jQuery('#likejsbox').fadeIn( 250 );
	setCookie("fbsave",667,30);
}
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
	{
	return unescape(y);
	}
  }
}

Weiter geht’s mit etwas HTML. Hier werden auch die ersten Modifikationen für dich nötig und möglich.

<div id="likejsbox">
    <div>Unterstüstze uns bitte durch deinen Like <span id="close" onClick="closeLikeJSBox();"><img src="img/close.png" alt="schliessen" /></span></div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Flikejsbooster&amp;width=296&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:296px; height:258px;" allowTransparency="true"></iframe>
</div>
<div id="relikejsbox" onClick="reLikeJSBox();">
    <img src="img/relikejsbox.jpg" alt="oeffnen" />
</div>

Der grün markierte Text kann angepasst werden, jenachdem was dir am besten gefällt.
Der rot markierte Schnipsel “likejsbooster” muss mit dem Namen deiner Fanseite, so wie er in der URL steht, ersetzt werden.

Wenn du das hast bist du auch schon fast fertig. Direkt nach dem gerade eingefügten und angepassten HTML Code ergänzen wir nun noch folgendes Script.

jQuery(document).ready(function($) {
	var fbsave=getCookie("fbsave");
		if(fbsave != 666){
				var fblog = 0;
				var top = $('#likejsbox').offset().top + 1000;
				$(window).scroll(function() {
					if(fblog == 0){
						if($(this).scrollTop() > top) {
							$('#likejsbox').addClass('fixed');
							$('#likejsbox').fadeIn( 250 );
							fblog++;
						}
					}
				});
		}else{
			$('#relikejsbox').show( 0 );	
		}
});

Am Ende von Zeile 5 steht in unserem Beispiel die Zahl “1000″. Diese steht für die px, die man runterscrollen muss, bevor die LikeJS Box erscheinen soll. Du solltest diese anpassen, jenachdem wie hoch deine Seiten durchschnittlich auf deiner Website sind.

Wenn du mit den paar Schritten durch bist sollte deine LikeJS Box bereits funktionieren. Lediglich zwei Bilder werden dir noch fehlen. Diese kannst du dir hier runterladen, aber bedenke, dass der Pfad vielleicht noch angepasst werden muss.

Bilder runterladen (9 kb)




Release-Log

  • 22. Oktober 2012 WP LikeJS V1.0.1 veröffentlicht
    • Bugfix: Kompatibilität mit einigen WordPress Themes war nicht gegeben
  • 21. Oktober 2012 WP LikeJS V1.0.0 veröffentlicht
  • 21. Oktober 2012 LikeJS V1.0.0 veröffentlicht


Unterstütze uns durch deinen Like!schliessen
oeffnen