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

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

Google Plusone Button

<!-- +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>

2012/01/27 16:10 2012/01/27 16:10
얽힌 글타래
<그물누리 / HTML,CSS> 글갈래의 다른 글
글 걸기 주소 : 이 글에 다른 글을 걸 수 없습니다

덧글을 달아 주세요

  1. 666 2012/04/06 09:56 고유주소 고치기 답하기

    질문입니다 제가 구글블로그를 사용하는데요 글을쓴 페이지 마다 구글+1 버튼을 님처럼넣고싶습니다.
    그래서 해보니 <!-- 적절한 곳에 이 렌더링 호출을 넣습니다. -->부분은 그냥 body태그 바로위에 넣었습니다.
    그리고 <!-- +1 버튼이 렌더링되기를 원하는 곳에 이 태그를 넣습니다. -->이부분의 태그는 도대체 어느 부분에 넣어야하는지요.아무데나 넣고 블로그를 보니 페이지가 밀리고 글제목이밀리고 난리도아닙니다.
    도와주십시요 부탁드립니다

    • 팥알 2012/04/06 10:58 고유주소 고치기 답하기

      <g:plusone>~</g:plusone>은 본문에 +1 단추가 들어갈 곳에 넣습니다. 제목이 밀리는 건 아마도 div나 span 태그 따위로 들어간 객체 높이나 그 안의 글짜 크기가 +1 단추의 높이와 달라서 생기는 문제 같습니다. 이럴 때는 단추 크기(tall, small, midium)를 바꾸거나 감싸고 있거나 나란히 있는 객체들의 크기와 정렬 방식을 조절하곤 합니다.
      +1 단추가 다른 객체에 끼어 들어간다면 CSS 파일을 고치거나 HTML 태그에 style 속성을 넣어서 틀어지지 않게 고쳐야 할 수 있습니다. 이 블로그에 들어간 단추도 그냥 넣으면 틀어지므로 나란히 있는 객체들의 높이와 너비를 맞추느라 손이 갔습니다. 블로그 스킨의 구조와 감싸거나 함께 얽힌 객체들에 따라 고치는 방법은 천차만별입니다.

  2. 666 2012/04/06 11:12 고유주소 고치기 답하기

    혹시 본문이란곳은 새 페이지를 작성할때 html로 바꾸고 넣는 그곳말씀인가요?
    아니면 템플릿수정하는 html창 말씀하시는것인지요.
    아어렵네요 초보자라서 그냥넣기만하는줄알았는데 정말 어렵네요...
    답변고맙습니다

    • 팥알 2012/04/06 12:40 고유주소 고치기 답하기

      HTML 태그가 나열된 문서에서 BODY 태그 안쪽 내용입니다.

      저도 블로그 스킨을 바꿀 때마다 그와 비슷한 문제로 낑낑대 왔습니다.^^

      이 블로그의 추천 단추와 SNS 단추와 QR 부호는 각기 다른 텍스트큐브 플러그인으로 붙였는데, 그냥 붙이면 당연히 틀어집니다. 만약 그냥 붙여도 잘 정렬되게 있게 하려면 하나로 합친 플러그인에서 정렬한 HTML/CSS를 출력하게 해야 합니다. 티스토리의 SNS 단추 플러그인도 비슷합니다. 객체가 한 줄을 다 차지하면 정렬하기 쉬우므로, 플러그인으로 다는 객체들은 div 따위로 감싸서 네모지게 가로폭을 꽉 채우기도 합니다.(테두리가 없더라도)

      이와 관련한 HTML/CSS 지식을 설명한 책이나 인터넷 자료를 참고하여 차근차근 바꾸어 보시면 될 듯합니다.

  3. 666 2012/04/07 01:34 고유주소 고치기 답하기

    답변고맙습니다 너무어렵군요...ㅠㅠㅠ 늘 좋은하루되세요