웹 표준에 맞는 페이스북 좋아요 단추 달기

페이스북 좋아요 단추 세 가지

  페이스북의 개발자 문서에서는 좋아요(추천) 단추를 다는 코드를 이렇게 만들어 준다.

<!-- <body> 태그 뒤에 넣는 자바스크립트 -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ko_KR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- 단추 달 곳에 붙이는 코드 -->
<div class="fb-like" data-href="http://pat.im/943" data-send="false" data-width="450" data-show-faces="true"></div>

  "http://pat.im/943" 자리에 단추가 달린 곳의 웹 주소를 넣어 주면 된다.

  위 HTML 코드를 쓰면 fb-like 클래스 객체의 속성에 들어간 data-href, data-send, data-width, data-show-faces 때문에 웹 유효성 검사(W3C Markup Validation)를 통과하지 못한다. 이 항목들이 웹 표준에 없는 속성이기 때문이다.


  페이스북 좋아요 단추를 웹 유효성 검사를 통과하게 다는 방법은 두 가지가 있다. 가장 손쉬운 방법은 아래처럼 iframe 태그로 넣는 것이다.

<iframe style="border: currentColor; width: 450px; height: 80px; overflow: hidden;" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fpat.im%2F943&amp;layout=standard&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;"  scrolling="no">

  글 주소는 src 속성에 들어간 주소에서 href에 넣어 준다. 앞에서는 "http://pat.im/943"이라는 주소를 그대로 쓸 수 있었지만, 여기에서는 "http%3A%2F%2Fpat.im%2F943"처럼 변환(urlencode)된 주소를 쓴다.

  iframe을 쓰지 않고 개발자 문서에서 만들어 주는 코드를 그대로 써서 웹 유효성 검사를 통과하는 방법으로 자바스크립트로 넣는 길도 있다.

<script type="text/javascript"><!--
document.write('<div class="fb-like" data-href="http://pat.im/943" data-send="false" data-width="450" data-show-faces="true"></div>');
//-->
</script>

  이렇게 자바스크립트로 넣은 HTML 코드는 어떤 내용이 들어가든 웹 유효성 검사에 걸리지 않는다. 도저히 웹 표준에 맞출 수 없거나 HTML을 긁는 검색기의 눈을 피하고 싶을 때에 자바스크립트로 내용을 넣으면 편하다.

글 걸기 주소 : 이 글에는 글을 걸 수 없습니다.

덧글을 달아 주세요

  1. 비밀방문자 2013/02/26 22:40 고유주소 고치기 답하기

    관리자만 볼 수 있는 덧글입니다.

    • 팥알 2013/02/27 12:28 고유주소 고치기 답하기

      URL은 아래 누리집에서 간편하게 바꾸어 볼 수 있습니다.

      http://meyerweb.com/eric/tools/dencoder/

      페이스북 좋아요 단추는 HTML에 하나씩 집어 넣을 수도 있지만, 게시판이나 블로그에 넣을 때에는 PHP나 자바스크립트를 쓰기도 넣곤 합니다. 웹 도구를 써서 한꺼번에 넣을 때에는 PHP의 urlencode 같은 함수를 써서 주소 꼴을 바꿀 때가 많습니다.

  2. 비밀방문자 2014/12/11 14:45 고유주소 고치기 답하기

    관리자만 볼 수 있는 덧글입니다.

    • 팥알 2014/12/11 16:53 고유주소 고치기 답하기

      적어 주신 정보만으로는 어디가 어떻게 잘못되었는지 모르겠네요.
      어떤 경우인지 더 자세히 알려 주셔야 원인을 찾을 수 있을 것 같습니다.
      href= 뒤에 붙은 http%3A%2F%2F (http://) 부분이 잘못 들어가서 생긴 문제 같긴 합니다.

      게시판이나 블로그에 다는 것이라면 자바스크립트나 PHP 등으로 주소를 자동 변환하는 것이 편한데, 위 글은 주소 하나만 예를 들기 위한 것이어서 다른 도구를 쓰는 방법을 이야기하지는 않았습니다.

  3. 비밀방문자 2014/12/12 00:25 고유주소 고치기 답하기

    관리자만 볼 수 있는 덧글입니다.

    • 팥알 2014/12/12 03:11 고유주소 고치기 답하기

      웹이 아닌 PC 안에서 HTML 문서를 작성하시는 거였군요.
      PC 안의 디스크 경로 주소는 아무데서나 똑같이 만들어 낼 수 있으므로,
      그런 주소를 페이스북에 보내면 좋아요 단추가 나오지 않는 것이 당연한 것 같습니다.
      페이스북에서 접근할 수 있는 웹 주소를 적어 주면 풀릴 문제인 듯합니다.

  4. David 2020/06/30 14:58 고유주소 고치기 답하기

    소중한 콘텐츠를 공유해 주셔서 감사합니다. 의심 할 여지없이, Whatsapp, Facebook 등. 이러한 소셜 플랫폼은 거대한 잠재적 시장이되고 있습니다. 물론이 트릭은 전자 상거래 비즈니스에 새로운 변화를 가져올 것이며 코드를 거의 수정하지 않아도됩니다. URL 디코딩 / 인코딩의 사용은 단순히 새로운 수준으로 가져갑니다. 이를 위해
    https://url-decode.com/
    웹 사이트를 확인하는 것이 좋습니다. 기회를 이용하는 사람은 더 많은 시장 점유율을 얻게됩니다. 공유해 주셔서 감사합니다.