KOMPOOS.NL

google plus one button op een XHTML-pagina

home » manuals » xhtml » google-plus-one.html

sitemap

google +1 strict HTML-extensie | google +1 strict XHTML-extensie

Uitleg xhtml validatie voor google +1 button

Deze pagina valideert W3C xhtml met text/html. De extensie van deze pagina is dan ook html. Wil je valideren met application/xhtml+xml (extensie XHTML) moet je even op deze pagina (http://kompoos.nl/manuals/xhtml/google-plus-one.xhtml) kijken. Dit voorbeeld (op deze pagina) is, voor het gemak, gelijk maar uitgebreid met lang, data-size en data-count. Klik even op onderstaande button om deze pagina W3C te valideren, en ga even met jouw muis over de +1 button om te testen of de "mouse-over-taal" nederlands is. Als alles naar wens is kan je de html code ergens op jouw pagina plaatsen waar de plus-one button moet verschijnen, en het stukje javascript dien je zo laag mogelijk in de body-sectie te plaatsen. Het stukje javascript valideert volgens de JSLint-norm.

valide xhtml-code voor de plus one button

<div id="plusone-div" class="g-plusone"></div>

validerend javascript voor de +1 button

<script type="text/javascript">
/*global google_plus:true */
function google_plus_one() {
    var g_plus_one = document.getElementById("plusone-div");
    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"}';
    g_plus_one.setAttribute("data-size", "standard");
    g_plus_one.setAttribute("data-count", "false");
    document.getElementsByTagName("head").item(0).appendChild(google_plus);
}
onload = function () {
    setTimeout(function () {
        google_plus_one();
    }, 500);
};
</script>

een extraatje: de plus one strict javascript procedure

Deze pagina zelf gebruikt onderstaand (strict) javascript. De code hierboven werkt uitstekend. De code hieronder is voor puristen en fanatici (die álles validerend willen hebben/krijgen). De plusone.js is nog niet klaar voor stricte javascript-procedures, maar Google kennende zullen ze gauw hun code "op orde" hebben. Tot zolang zal de 'use strict' als commentaar in de code staan.

<script type="text/javascript">
/*global google_plus:true */
/*global document:false */
/*global setTimeout:false */
/*global onload:true */
function google_plus_one() {
//  'use strict'; is nog niet mogelijk (zie plus-one html5 pagina)
    var g_plus_one = document.getElementById("plusone-div");
    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"}';
    g_plus_one.setAttribute("data-size", "standard");
    g_plus_one.setAttribute("data-count", "false");
    document.getElementsByTagName("head").item(0).appendChild(google_plus);
}
onload = function () {
    'use strict';
    setTimeout(function () {
        google_plus_one();
    }, 500);
};
</script>