csütörtök, 08 augusztus 2013 10:58

Google plus button XHTML 1.0 W3C Validator Checked

Honlapom népszerűsítéséhez szerettem volna felhasználni a google plus button-ját is.

Kis utána olvasással sikerült is, ahogyan szerettem volna!
Amikor végeztem, valahogyan gyanút fogtam, és mivel az oldalam akadálymentes, ezért most is leellenőriztem a W3C Validator oldalon.

HIBA!

Errors found while checking this document as HTML5!

 

Azt nem mondom, hogy vért izzadtam, de rájöttem a megoldásra!

Na de ne szaladjunk ennyire előre!

Az eredeti kódom, amire a validátor a hibát adta:

  <div style="padding: 20px;" class="g-plusone" data-size="small" data-annotation="none"></div>
<script type="text/javascript">  window.___gcfg = {lang: 'hu'};
  (function() {    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;    po.src = 'https://apis.google.com/js/plusone.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);  })();</script>

 Ebből a kódból ami nem tetszett neki, az a:

data-size="small"

 Valamint a:

data-annotation="none"

(A fenti kódot Joomla! 2.5 beépülőmodul-kezelő SocialButtons moduljának az egyéni kódjához tettem.)

 

MEGOLDÁS 1:

A sablonom </head> része elé beillesztettem ezt a kódot:

Fontos!

Ha a sablonod már tartalmaz egy "jquery-1.7.1.min.js" fájlt, akkor az első sort töröld! Ha nem, akkor neked kell beszerezni, és átírni az elérhetőségét!

<script src="/media/k2/assets/js/jquery-1.7.1.min.js" type="text/javascript"></script> <script type="text/javascript">            $(document).ready(function(){                    $('.g-plusone').attr('data-size', 'small');                    $('.g-plusone').attr('data-annotation', 'none');                    $('.g-plusone').attr('data-href', window.location.pathname);            });        </script>

 

A fent említett beépülőmodul-kezelő-be pedig ezt a kódot, ami a <body> részben jelenik meg:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">    {lang: 'hu'}    </script>    <div class="g-plusone"></div>

 

 

MEGOLDÁS 2:

2013 ooktóber 06 Módosította  Quwick

Közben optimalizáltam a honlapomat, és valamiért már nem olvassa ki a <heaad> részben lévő konfigurációt!
Ezzel az új kóddsorral rendben működik ismét, és újra akadálymentes, walid az oldalam.

A sablonom </head> része elé beillesztettem ezt a kódot:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"> { parsetags: 'explicit' } </script>

 

A fent említett beépülőmodul-kezelő-be pedig ezt a kódot, ami a <body> részben jelenik meg:

<div id="plusone-div"></div><script type="text/javascript">
gapi.plusone.render(    'plusone-div',    {        "size": "small",        "count": "none"    });
</script>
<!-- ÍGY TUDOD STILIZÁLNI IS AZ ELHELYEZKEDÉSÉT:
<div style="padding-top: 20px;"><div id="plusone-div"></div><script type="text/javascript">
gapi.plusone.render(    'plusone-div',    {        "size": "small",        "count": "none"    });
</script></div> -->

 

Blogkategória: Archívum
FEL