웹 표준에 맞는 페이스북 좋아요 단추 달기
그물터 관리/HTML, CSS
2012/07/18 17:04
페이스북의 개발자 문서에서는 좋아요(추천) 단추를 다는 코드를 이렇게 만들어 준다.
<!-- <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&layout=standard&show_faces=true&action=like&colorscheme=light&" 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을 긁는 검색기의 눈을 피하고 싶을 때에 자바스크립트로 내용을 넣으면 편하다.
![미리보기 그림 - [HTML] 표(table) 안에서 THEAD, TBODY, TFOOT의 쓰임](/image/4056_2.png)
덧글을 달아 주세요
비밀방문자 2013/02/26 22:40 고유주소 고치기 답하기
관리자만 볼 수 있는 덧글입니다.
팥알 2013/02/27 12:28 고유주소 고치기 답하기
URL은 아래 누리집에서 간편하게 바꾸어 볼 수 있습니다.
http://meyerweb.com/eric/tools/dencoder/
페이스북 좋아요 단추는 HTML에 하나씩 집어 넣을 수도 있지만, 게시판이나 블로그에 넣을 때에는 PHP나 자바스크립트를 쓰기도 넣곤 합니다. 웹 도구를 써서 한꺼번에 넣을 때에는 PHP의 urlencode 같은 함수를 써서 주소 꼴을 바꿀 때가 많습니다.
비밀방문자 2014/12/11 14:45 고유주소 고치기 답하기
관리자만 볼 수 있는 덧글입니다.
팥알 2014/12/11 16:53 고유주소 고치기 답하기
적어 주신 정보만으로는 어디가 어떻게 잘못되었는지 모르겠네요.
어떤 경우인지 더 자세히 알려 주셔야 원인을 찾을 수 있을 것 같습니다.
href= 뒤에 붙은 http%3A%2F%2F (http://) 부분이 잘못 들어가서 생긴 문제 같긴 합니다.
게시판이나 블로그에 다는 것이라면 자바스크립트나 PHP 등으로 주소를 자동 변환하는 것이 편한데, 위 글은 주소 하나만 예를 들기 위한 것이어서 다른 도구를 쓰는 방법을 이야기하지는 않았습니다.
비밀방문자 2014/12/12 00:25 고유주소 고치기 답하기
관리자만 볼 수 있는 덧글입니다.
팥알 2014/12/12 03:11 고유주소 고치기 답하기
웹이 아닌 PC 안에서 HTML 문서를 작성하시는 거였군요.
PC 안의 디스크 경로 주소는 아무데서나 똑같이 만들어 낼 수 있으므로,
그런 주소를 페이스북에 보내면 좋아요 단추가 나오지 않는 것이 당연한 것 같습니다.
페이스북에서 접근할 수 있는 웹 주소를 적어 주면 풀릴 문제인 듯합니다.
David 2020/06/30 14:58 고유주소 고치기 답하기
소중한 콘텐츠를 공유해 주셔서 감사합니다. 의심 할 여지없이, Whatsapp, Facebook 등. 이러한 소셜 플랫폼은 거대한 잠재적 시장이되고 있습니다. 물론이 트릭은 전자 상거래 비즈니스에 새로운 변화를 가져올 것이며 코드를 거의 수정하지 않아도됩니다. URL 디코딩 / 인코딩의 사용은 단순히 새로운 수준으로 가져갑니다. 이를 위해
https://url-decode.com/
웹 사이트를 확인하는 것이 좋습니다. 기회를 이용하는 사람은 더 많은 시장 점유율을 얻게됩니다. 공유해 주셔서 감사합니다.