Die neuen Facebook Profile sind da. In den neuen Timelines oder Chroniken für Facebook Unternehmensseiten ist es nun möglich Tab Apps auf einer Breite von 810px unterzubringen. Bisher waren nur 520px möglich. Für Early Movers haben wir hier ein kleines Tutorial zusammengestellt, um die neuen 810px schon heute zu nutzen. Um den “Hack” zu nutzen ist mindestens das Halalati Premium Paket nötig.

Auf unserer Halalati Chronik haben wir ein Beispiel installiert, das die Fotowettbewerb App in der neuen Breite von 810px zeigt und die Möglichkeiten dargestellt [achtung: dies ist nur eine quick draft, kein echter Fotowettbewerb].

Der Hack verläuft in vier Schritten:
1. Erstellung eines eigenen Templates
2. Vorbereitung des “Inplace Editings” auf das neue Format in der frame.html
3. Anpassung der Contestarea im File clean.css

Doch nun Schritt für Schritt und alles der Reihe nach :-)

1. Erstellung eines eigenen Templates
Legen Sie mit Halalati ein neues Facebook Gewinnspiel an und wählen Sie mindestens das Premium Paket. Nach dem Abschluss des Wizards

1. Klicken Sie im Inplace Editing auf “Template ändern” und wählen Sie das “Advanced Template” aus
2. Klicken Sie danach auf “Look & Feel anpassen” und legen Sie ein eigenes Template an.

Sie sind nun bereit für den Hack.

2. Vorbereitung des “Inplace Editings” auf das neue Format in der frame.html
Öffnen sie im Filesystems des neuen Templates das File frame.html durch klicken auf den Eintrag im Filebaum. In das File frame.html kopieren Sie bitte den folgenden Codeschnipsel in die Zeile 7.

	<!-- Anpassungen 810px Seitenlayout -->
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	
	<!-- Anpassungen IPE Area -->
	<script>
		$("body div#masterwrapper").css('overflow','hidden');
		$("body div.middleWrapper").css('width','810px');
		$("body div.contentWrapper").css('width','810px');
		$("body div.masterframe").css('width','1200px');
	</script>

Scrollen Sie nun hinunter zu den Code Fragmenten für die Facebook Kommentarfunktion. Löschen Sie hier den Eintrag

<halalati:fbcomments/>

und tragen Sie den folgenden Code ein

<!-- Anpassungen 810px Seitenlayout -->
<div class="fb-comments" data-href="https://campaigns.halalati.com/contest/810pxSample" data-num-posts="4"
data-width="810"></div>

Anstelle des contestcodes von uns

810pxSample

tragen Sie bitte Ihren eigenen Contestcode ein.

Sie sind nun fast fertig und müssen nur noch Änderungen am *.css File vornehmen. Speichern und schließen Sie das File frame.html.

3. Anpassung der Contestarea im File clean.css

Öffnen Sie nun das clean.css File Ihres Template. Positionieren Sie nun die folgendn Definition an das Ende (!) des css Files.

/* Ergänzungen: Beginn */
/* ------------------------------------------- */
.fbcontentdivider {
	margin-top: 5px;
	margin-bottom: 5px;
	width: 810px;
	height: 1px;
	background-color: #d8dfea;
}
#fbcomments {
    width: 810px;
}
#fbframe {
    width: 810px;
}
#resultstable {
    width:800px;
    padding:0 5px;
}
tr.headrow {
	background-color:none;
}
td.data {
	padding: 5px;
	border-bottom: 1px solid #E2E2E2;
	width: 200px;
	font-size: 14px;
}
td.data a {
	font-size: 14px;
}
#participationcontent table {
	width: 710px;
	text-align: center;
}
#participationtitle {
    font-size:14px;
    background-color:#F2F2F2;
    border-top:1px solid #E2E2E2;
    padding:5px 5px;
    margin:10px 0px;   
}
#participationtitle a {
    font-size:14px;   
}
td.contenttitle {
    font-weight:bold;
    padding:0px 10px 5px 0px;
    text-align:left;
    font-size:14px;
}
td.contentvalue {
    text-align:left;   
    font-size:14px;    
}

/* ------------------------------------------- */
/* Ergänzungen: Ende */

Wir wünschen viel Erfolg mit Ihrer neuen Timeline App auf einer Breite von 810px. Bei Fragen bitte nutzen Sie einfach die Kommentarfunktion zu diesem Blogpost.