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


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

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

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

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


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

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


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

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


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


 홈페이지, 블로그 등 자신이 운영하는 웹 공간이 있다면, 방문자들이 자신의 글을 소셜 네트워크 서비스(트위터, 페이스북 등)에 쉽게 공유할 수 있도록 해당 버튼을 추가해 보세요 ^^ 여러모로 운영하시는 공간에 유용한 기능이 될 겁니다. 이 포스팅은 여기까지입니다.
LiveREX 유튜브 채널 추천 영상 (구독하고 선물도 받아가세요!)
☞ 이 글은 LiveREX 의 동의없이 재발행/재배포 할 수 없습니다. [License] 를 참고하세요!
Facebook Comment
  1. 최정 2010.06.20 07:01

    이것은 저도 할수있게끔 정말 자세하게 설명해주셨네요 고맙습니다~

  2. BlogIcon *저녁노을* 2010.06.20 07:19 신고

    잘 보고 갑니다. 즐거운 휴일 되세요.

  3. BlogIcon 라라윈 2010.06.20 09:25 신고

    좋은 팁 감사합니다. ^^
    SNS 서비스들을 많이 사용은 하고 있지만, 블로그와 연결이 잘 안되었는데
    멋진 버튼을 넣어두면 해결되겠는데요~ ^^ 정말 감사합니다~

  4. BlogIcon 따뜻한카리스마 2010.06.20 09:40 신고

    시도해봤는데. 안 되네요-_-;;ㅋ
    이미지 주소는 어디에 어떻게 남겨야 하는지 알려주시면 고맙겠습니다^^

  5. BlogIcon 찌질철이 2010.06.20 17:28 신고

    저도 최근 버튼들을 가능한 것들 싸그리 업데이트 해볼까 궁리중이었는데..정말 조은 정보인거 같아요.
    시간내서 작업해야겠어요~ ^^

  6. BlogIcon ^.~ 류진 2010.06.20 22:34 신고

    와 드디어 포스팅이 되었네요.
    많이 기다렸습니다.
    오~ 알고보니 생각보다 어렵지 않네요 고맙습니다.

  7. BlogIcon ^.~ 류진 2010.06.20 23:24 신고

    저한테 맞게 이쁘게 달았습니다.
    다시 한번 고맙습니다.

  8. BlogIcon 멋쪄  2010.06.22 06:33 신고

    멋지네요~ ㅎ_ㅎ
    류진님 블로그 상단에 있는 아이콘 보고 어떻게 달까 싶어 왔는데...
    간편하게 사용할수 있군요 ^_^
    고맙습니다.
    혹시 기본 폰트가 어떻게 되시나요~ ㅎ

  9. BlogIcon 춤추는대발이 2010.06.22 15:06

    네이버 블로그에도 가능 한가요?^^

  10. BlogIcon 2proo 2010.07.22 23:28 신고

    트랙백 감사합니다 ^^ 오랜만에 와봤네요~
    한동안 블로그에 손도 못대고 있어서요... 흑...

    더운 여름 건강하고 행복하게 보내세요~

  11. BlogIcon ondori 2010.08.28 21:48 신고

    오~
    좋은정보 감사합니다.^^

  12. BlogIcon limgreensv 2010.08.29 00:01

    머리를 식히고 갑니다. 워낙 초보라서 잘 이해가 안되는군요. 내탓입니다. 감사

댓글을 남겨주세요 :)




submit