Scriptbeispiel: Social Button - w3c valide für HTML5 Website
Für Social Buttons gibt es jede Menge Plug-ins und Generatoren, um sie in die eigene HTML5-Website zu integrieren. Meine Erfahrung ist, dass die Plug-ins teilweise nicht W3C-konform sind oder der Code nicht optimiert ist oder andere Mängel aufweisen, die mich dazu animiert haben, eine Version zu erstellen, die sowohl W3C-konform, als auch codeoptimiert ist. Als zusätzliches Feature stehen die Button fest (fixiert), d.h. beim Scrollen der Seite bleiben die Button immer im sichtbaren Bereich.
Einbindung der social Button in die Webseite als Liste
Üblicherweise fügt man die social Button als Liste in die Webseite ein. Jeder Listenpunkt steht für einen Button.
<li><div id="fbLike" class="fb-like" data-href="LINK" data-send="false" data-layout="button" data-show-faces="false" data-action="recommend"></div></li>
<li><a id="tweet" class="twitter-share-button" href="https://twitter.com/share" data-url="LINK" data-via="TW-ACCOUNT" data-lang="de"></a></li>
<li><div id="gplus" class="g-plusone" data-size="tall" data-href="LINK"></div></li>
</ul>
Anstelle des Wortes LINK ist der entsprechende Link auf Ihre Seite einzusetzen und für TW-ACCOUNT Ihr Twitter-Account einzusetzen.
Stylesheets zur Positionierung und Fixierung der social Button
Durch die Stylesheets werden die social Button entsprechend positioniert. Da der GooglePlus-Button im Internet Explorer 6 und 7 nicht mehr funktioniert, wird über einen Hack die Division #gplus bewußt ausgeblendet, damit an dieser Stelle keine Lücke zurück bleibt.
width: 84px; /*Breite der Button (orientiert sich am breitesten Button)*/
position: absolute; /*absolute Positionierung*/
top: 241px; /*Abstand von oben*/
left:0px; /*Abstand von links*/
overflow:visible; /*um die Sichtbarkeit der Kommentar-Div zu gewährleisten*/
margin: 0px; /*evtl. äußeren Abstand entfernen*/
padding: 0px; /*evtl. inneren Abstand entfernen*/
background-color:#fff; /*Hintergrundfarbe der Buttonleiste*/
border: 1px solid #ccc; /*Rand*/
border-left: 0px none; /*Entfernung linker Rand*/
}
html>body #s-btn {
position: fixed; /*absolute Positionierung für IE*/
}
#s-btn li{/* diverse Abstände für eine bessere Optik*/
margin: 6px 0px;
padding: 2px;
text-align:center;
}
* html #gplus {
display:none; /* Ausblendung des Google-Plus Button im IE6*/
}
* +html #gplus {
display:none; /* Ausblendung des Google-Plus Button im IE7*/
}
Einbindung der Javascripte
Die dazugehörigen Scripte werden üblicherweise am Ende der Webseite integriert. Dies kann, wie in diesem Beispiel, in minimierter Form erfolgen. Um die Anzahl der Requests zu minimieren, können die Scriptsequencen aber auch in bereits vorhandenen Javascripten ergänzt werden.
:
<div id="fb-root"></div>
<script type="text/javascript" src="./js/functions-min.js"></script>
</body>
Die Liste ist mit beliebigen Button erweiterbar. Die notwendigen Libraries sind natürlich in functions.js zu ergänzen.
Das fertige Social-Button Grundgerüst für eine HTML5-Webseite:
Gern können Sie das Beispiel komplett in Ihre Webseite übernehmen. Vergessen Sie aber nicht in functions.js die Facebook-AppId anzupassen.