블로그 글을 SNS 에 공유하는 버튼 만들기

 최근 트위터, 페이스북 등 소셜 네트워크 서비스에 대해서 수 차례 소개한 적 있었죠? 그러면서 언급했던 것이 SNS 의 파급효과였습니다. 그래서 요즘 기사, 블로그 등을 보면 대부분 트위터 등 SNS 에 해당 글을 공유할 수 있게 하는 버튼이 추가되어 있는데요. 현재 이 블로그 역시 마찬가지입니다 ^^ 우측 사이드바 상단에 보시면 소셜 네트워크 서비스(SNS)에 방문자가 해당 페이지의 글을 공유할 수 있는 버튼이 보이실 겁니다. 물론 하단에도 있긴 하지만 관련해서 질문주신 분이 원하시는 내용은 요거라서 ㅎㅎ
 각설하고 사이드바의 버튼을 보시면 아시겠지만 저는 트위터, 페이스북, 구글 버즈 등에 공유할 수 있게 해뒀는데요. 원하신다면 더 많은 서비스에도 자신의 글을 방문자가 공유할 수 있게 하는 버튼을 만들 수 있습니다. 플러스 모양의 버튼을 눌러보시면 상당히 많은 서비스의 목록들이 표시되죠?

 위 버튼을 추가하는 방법은 상당히 간단합니다. 원리는 대부분의 버튼들처럼 각 서비스와 어울리는 이미지 파일을 구글 등에서 구하신 후 블로그에 업로드, 그리고 아래 제공해 드리는 소스에 이미지 주소를 첨부하면 끝입니다. 지금부터 최대한 간단하게 소개를 할게요.

블로그 등의 글을 소셜 네트워크 서비스에 공유하기

 저는 위 버튼을 AddThis 사이트의 소스를 이용해서 추가를 했는데요. AddThis 는 이와 관련된 소스, 정보 등을 제공하는 유용한 사이트 입니다.

> AddThis 홈페이지 : http://www.addthis.com

 자세한 내용을 참고하실 분은 위 링크를 이용하시면 되겠습니다. 다시 본론으로 돌아와서 현재 이 블로그 사이드바에 추가되어 있는 버튼의 소스는 아래와 같습니다.

▼ 아래 소스를 블로그 혹은 홈페이지에서 표시되길 원하는 부분에 추가합니다. 티스토리를 기준으로 사이드바에 추가하길 원한다면 관리자모드에서 사이드바 설정을 이용하시면 되겠네요. 본문 하단 등에 넣으실거라면 skin.html 에 추가하세요.

 위 이미지를 잘 보시면 노랗게 표시한 부분 보이시죠? 그 부분이 핵심입니다. 눈치가 빠르신 분은 서비스명이 구분이 된다는걸 바로 아실 수 있을 겁니다. 즉, 다른 서비스 공유 버튼을 원하신다면 해당 서비스명으로 class 명을 수정 / 추가하시면 되겠죠?
 '이미지주소' 라고 입력된 부분에는 각 서비스에 어울리는 이미지를 업로드한 후 URL 을 입력하시면 됩니다. 나머지 사이즈 수치는 원하는 크기로 변경하세요~

▼ 아래 내용은 style.css 에 추가하시면 됩니다. 간혹 CSS 어느 부분에 추가해야 되냐고 묻는 분이 계시던데 어디든 상관없습니다. 자신이 스킨을 수정할 때 쉽게 구분할 수 있는 곳에 추가하세요.

 위 이미지들의 소스를 담은 텍스트 파일입니다. 아래 파일을 다운로드 받아서 수정 후 사용하세요.

 

사이드바 SNS 버튼.txt

 홈페이지, 블로그 등 자신이 운영하는 웹 공간이 있다면, 방문자들이 자신의 글을 소셜 네트워크 서비스(트위터, 페이스북 등)에 쉽게 공유할 수 있도록 해당 버튼을 추가해 보세요 ^^ 여러모로 운영하시는 공간에 유용한 기능이 될 겁니다. 이 포스팅은 여기까지입니다.