Als de google +1 button in beeld "springt" (en de onderliggende tekst verschuift), kan je dat eenvoudig verhelpen door een extra div in te voegen. Op deze pagina is de plus one button achter de H1 "geplakt". hieronder de html-code zoals op deze pagina is gebruikt. Het javascript is in de code "ingebed", maar vanzelfsprekend kan je het javascript zonder problemen (in plaats van hier) zo laag als mogelijk in de body-sectie plaatsen. In dit voorbeeld is de "style" in de code geplaatst. Maar je kan natuurlijk ook de div een id of class geven, en een verwijzing hiernaar in een stylesheet (extern of in de head) plaatsen. Valideer deze pagina bij W3C.
...
voorafgaande code
...
...
<h1>KOMPOOS.NL</h1>
<div style="margin:-3.3em 0 0 13.6em;float:left">
<div class="g-plusone" data-size="standard" data-count="false"></div>
</div>
<script>
/*global google_plus:true */
function google_plus_one() {
google_plus = document.createElement('script');
google_plus.setAttribute("type", "text/javascript");
google_plus.setAttribute("src", "https://apis.google.com/js/plusone.js");
google_plus.text = '{lang:"nl"}';
document.getElementsByTagName("head").item(0).appendChild(google_plus);
}
setTimeout(function() {
google_plus_one();
}, 500);
</script>
<h2>google plus one - HTML5 / button positie</h2>
...
...
rest van de pagina
...