웹 표준에 맞는 구글 +1 추천 단추 달기

  구글 +1(Google Plusone) 추천 단추에 들어가는 태그에는 <g:plusone>이라는 게 있다.

<!-- +1 버튼이 렌더링되기를 원하는 곳에 이 태그를 넣습니다. -->
<g:plusone size="tall"></g:plusone>

<!-- 적절한 곳에 이 렌더링 호출을 넣습니다. -->
<script type="text/javascript"><!--
    window.___gcfg = {lang: 'ko'};
   (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>

  <g:plusone>은 HTML/XHTML에 규졍에 없으므로, 웹 문서에 그대로 들어가면 웹 유효성 검사를 통과하지 못한다. 웹 표준에 맞추고자 한다면 다른 구문으로 바꾸어야 한다.

  구글의 +1 단추 만들기 설정에서 고급 설정을 펼치면 'HTML5 유효 구문'이 있다. 이 항목에 갈매기표를 하면 <g:plusone>~</g:plusone>이 다음처럼 바뀐 구문을 얻을 수 있다.

<div class="g-plusone" data-size="tall"></div>

  이렇게 하면 HTML 5에서는 유효성 검사를 통과할 수 있으나, XHTML에서는 data-size라는 속성값 때문에 유효성 검사를 통과하지 못한다. XHTML에서 검사를 통과하게 하려면 다음처럼 자바스크립트로 속성을 덧붙인다.

<div id="gplusone" class="g-plusone"></div>
<script type="text/javascript"><!--
   var ValidMe=document.getElementById("gplusone");
   ValidMe.setAttribute("data-size","tall");
   ValidMe.setAttribute("data-count","true");
//-->
</script>