KOMPOOS.NL

google plus one - HTML5

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

sitemap

uitleg google +1 procedure

Rechts naast de H1 van deze pagina (met de tekst KOMPOOS.NL) staat de google +1 button. Om deze knop (op de standaard manier) op jouw website te "zetten" kan je de informatie gebruiken in jouw google-account bij de webmaster-tools. Déze pagina bevat de code om de "google plus one-knop" correct op een HTML5 pagina te laten werken zonder dat jouw pagina trager laadt. Mocht je problemen hebben met de positionering van de +1 knop kan je even op deze pagina kijken.

Plaats de onderstaande html-code van de "+1 knop" dáár waar je de google "plus one" wilt laten verschijnen, en plaats tevens het javascript voor de google-button zo laag als mogelijk in de body-sectie van jouw pagina. Op deze manier zal er geen vertraging op jouw pagina zijn bij het inladen van de "google-code". Het geheel is valide HTML5 (volgens W3C-norm), en het gebruikte stukje javascript is foutloos volgens de strenge JSLint-norm.

html code voor de google plus one knop

javascript voor de google +1 button

<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");
    document.getElementsByTagName("head").item(0).appendChild(google_plus);
}
onload = function () {
    setTimeout(function () {
        google_plus_one();
    }, 500);
};
</script>

update

als je de mouse-over(tekst) in een andere taal wilt:
http://kompoos.nl/manuals/html5/google-plus-one-andere-taal.html

de plus-one procedure(s) voor xhtml
http://kompoos.nl/manuals/xhtml/google-plus-one.html

javascript strict voor de plus-one

Voor de liefhebber staat hieronder nog de stricte versie van de procedure. Valideren gaat (nog) niet, maar Google kennende, wordt dat vroeger of later altijd opgelost. Tot die tijd staat de 'use strict'; nog als commentaar in het script. De code is als volgt:

<script>
/*global google_plus:true */
/*global document:false */
/*global setTimeout:false */
/*global onload:true */
function google_plus_one() {
//  'use strict'; is (nog) niet mogelijk met de huidige plusone.js
    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);
}
onload = function () {
    'use strict';
    setTimeout(function () {
        google_plus_one();
    }, 500);
};
</script>