Jak udělat validní Google +1 tlačítko

Martin Pešout   24. 10. 2011

Není to tak dlouho co Google začal dotahovat své mezery v socializaci svých služeb a přidal +1 tlačítko do výsledků vyhledávání. Poměrně záhy přišel s možností integrovat toto tlačítko přímo do webových stránek. Uživatel tak nehodnotí pouze výsledky vyhledávání, ale i stránky, které si prohlíží. Jenže pokud tuto stránku necháte zkontrolovat např. přes W3 validátor, tak zjistíte, že právě tyto tlačítka nejsou validní. Chtěl bych v tomto článku dát jednoduchý návod, jak celou situaci napravit.

Kde vzniká samotný problém?

Google nabízí jednoduchý nástroj, přes který je možné vygenerovat +1 tlačítko přímo na míru. Vytvoří Vám zdrojový kód, který pak musíte umístit do webových stránek. Zdrojový kód však obsahuje tento tag

který však není validní. I přesto, že tento oficiální nástroj generuje nevalidní kód, tak Google samotný počítá i s použitím běžnějšího

tagu. Kód pak vypadá následovně:

Jak je možné vidět, tak nyní jsou použity správné XHTML elementy. Ale přetrvává jeden problém. Stále jsou zde nevalidní atributy data-size a data-count.

První řešení problému

Jednoduchým řešením, jak vyřešit výše zmíněný problém, je nevkládat tyto HTML elementy přímo do stránky, ale využít například JavaScriptu, který to udělá za Vás.

Vyhneme se vkládání nevalidních atributů data-size a data-count přímo do HTML, tudíž našim výsledkem bude validní stránka.

Existuje i lepší řešení!

Je však možné použít jedno lepší řešení, které využívá standardního JavaScriptu a XHTML elementů. Do hlavičky stránky - mezi tagy - přidáme následující kód:

Jak je popsáno v dokumentaci +1 tlačítka, použití parsetags: 'explicit' způsobí, že se Google tlačítko vykreslí až po zavolání metody gapi.plusone.render.

Do těla stránky pak můžeme přidat následující řádky, který nám zobrazí již zmíněné tlačítko:

Atribut size ovlivňuje velikost tlačítka a může nabývat následujících hodnot:

  • small
  • standard
  • medium
  • tall

Dále atribut count může nabývat těchto hodnot:

  • true - chceme zahrnout počet
  • false - nechceme zahrnout počet

Pokud vše dodržíme, docílíme tak validní HTML stránky.