추적의 우려 없는 초간단 SNS 공유 아이콘 달기

스킨을 새로 교체하면서 이것저것 수정하는 중에 자료를 같이 공유하고 싶은 부분이 있어서 글을 남깁니다. 

공유하고자 하는 자료는 SNS 공유 아이콘에 관한 부분입니다. 

스킨은 반응형 #1 스킨을 위주로 설명드립니다. 

코드는 티스토리가 기본 제공하는 sns 공유관련 코드와 http://tiblog.tistory.com/42 블로그와 영어권 사이트에서 구한 자료를 바탕으로 만들었습니다. 

그럼 설명 들어갑니다. 사실 아주 간단해서 설명이라 할 것도 없습니다. 

일단 이 방법의 장점부터 간단히 설명드리면 다음과 같습니다. 

1. 추적 당할 우려 없다. 

2. 복잡한 링크가 필요 없다. 

3. 자바 스크립트를 사용하지 않기 때문에 업데이트로 인한 오류발생의 가능성이 없다. 

4. 무엇보다 웹사이트 로드에 방해가 되지 않는다. 

5. 반응형 모바일에서도 동작한다. 

sns공유작업.txt    sns_kakao.zip

먼저 삽입해야 할 html 코드가 아래 그림 중 파란 박스 부분입니다.

<span class="txt_bar"></span><a href="#" onclick="" class="link_detail">삭제</a> 과 <div class="area_view">

사이에 넣어 주시면 되는데요 정확한 위치는 그림을 참고 해주세요. 정확히는 두 번째 바로 </span>아래에 넣어 주시는 겁니다. 삽입위치는 html에서 두 세 곳을 정해서 페이지 로딩 테스트를 거쳐 주관적으로 선택한 위치 입니다. 통상적으로 다른 스킨에서 보시면 포스트 타이틀 바로 밑에 해당한다 보시면 될 겁니다.

그다음으로는 css 코드입니다. 

css 코드를 넣을 위치는 css 맨 아래 넣어 주시면 됩니다. 

그리고 css 코드는 취향에 따라 골라 사용할 수 있도록 아이콘 배치 위치 다르게 한 세 가지를 준비했습니다. 

아이콘 위치를 약간 이동하는 경우 css 코드의 수치를 조금씩 변경하시면 도움이 될 겁니다.

마지막으로 아이콘을 추가해주시면 됩니다.  

추가 후 자동으로 아이콘이 나타나지 않으면 추가한 html 코드에 아이콘 주소를 넣어주시면 되겠습니다. 

그리고 아이콘은 원래 기본 네 종류가 지원이 되지만 제가 주로 쓰는 페이스북, 트위터, 카카오스토리 세가지만 올립니다. 

제외 된 카톡 아이콘이 필요하신 분은 복잡한 링크가 필요한 것이 아니니 직접 구하셔서 응용해서 활용하실 수 있을 것이라 생각합니다. 

자료는 다운 가능하도록 위에 첨부했습니다.

도움을 드린다고 올린 글에 안 된다고 상처 받는 분은 없었으면 좋겠습니다.

저는 html 관련 전문가가 아닙니다. 그러니 어려운 질문에는 답을 해드릴 수가 없습니다.