"소셜 버튼" 생성 모듈 구현



1. 소셜 버튼 생성 모듈 구현


각종 SNS 서비스(트윗, 페이스북, 구글플러스)에서 제공하는 "소셜 버튼"을 생성하는 자바스크립트 모듈을 아래와 같이 구현해 보았습니다.


모듈에 대한 더 자세한 내용은 아래 링크(테스트, 메뉴얼)를 통해 확인 하실 수 있습니다.



테스트(예제) 페이지:

http://mohwa.org/html/twitter.html


모듈(sns.js) 메뉴얼:

http://mohwa.org/doc/sns/index.html


jsfiddle 소스:

http://jsfiddle.net/mohwa/mV7sU/




- 참고 사이트:


트위터 플러그인:

https://dev.twitter.com/docs/twitter-for-websites


구글플러스 플러그인:

https://developers.google.com/+/plugins/


페이스북 플러그인:

http://developers.facebook.com/docs/plugins/


미투데이 플러그인:

http://me2day.net/me2/plugin/guide/metoo_plugins




2. "트윗" 소셜 버튼 옵션 중 "data-dnt" 에서 DNT(Do Not Track)란?


사용자 브라우저의 DNT(do not track) 옵션 설정(유효)시 해당 사이트의 컨텐츠 커스터마이즈(사용자 정보 수집으로 인한 신규 컨텐츠 개발 및 수정)를 위한 사용자 정보 수집을 중지 시킨다.


예: 트위터 제공 컨텐츠 중 하나인 "추천 이용자" 또한 각 사용자 정보(Follow 데이타 등..)를 수집한 결과로 생산된 파생 컨텐츠이다.





DNT(do not track) 설정 방법:


1. 사용자 브라우저의 DNT 옵션 활성화 설정(사파리 기준).

2. 사용자 브라우저의 DNT 활성화 설정 유/무 에 따른 "HTTP Request Header" 비교 이미지.




2.1: 비활성 시 화면








2.2: 활성 시 화면










위 결과와 같이 "DNT" 옵션 설정 유/무 에 따라 "HTTP Request Header"에 "DNT" 헤더가 추가 요청되며, 요청받은 웹 사이트에서는 요청된 "DNT" 헤더를 확인 후 이 사용자에 대해서는 어떠한 "정보 수집" 등의 "트래킹" 행위를 중지 하게 된다.


당연한 얘기지만, 사용자 브라우저 설정(옵션)에 따라 헤더(DNT)값이 서버로 요청될 뿐, 로그 수집과 관련된 모든 권한은 해당 웹 사이트가 가지고 있는 것이다.


즉, 컨텐츠 제공자에게 사용자 정보 수집 중지에 관한 강제성이 존재하지 않으며, 이에 따라 결국 사용자는 DNT가 지원되는 사이트(트위터 등)에서만 정보 수집에 관한 "중지" 권한을 보장받을 수 있는 것이다





DNT(do not track) 관련 참고 링크:


트위터 프라이버시 보호 기능이란?

http://blog.naver.com/PostView.nhn?blogId=cspark14&logNo=30138563806&redirect=Dlog&widgetTypeCall=true


브라우저 추적 거부 설정이란?

http://japanese.engadget.com/2012/05/18/twitter-do-not-track/


DNT 기능이란?

http://buzz.tistory.com/entry/DNTDo-Not-Track