본문 바로가기

블로그 관련 정보/블로그 꾸미기

블로그에 SNS 공유버튼 달기 - Share This

블로그에 SNS 공유버튼 달기 - Share This
광고 차단 플러그인을 꺼 주시면 블로그 운영에 도움이 됩니다. ^^

블로그를 운영하다보니 나날이 발전하는 IT기기,쏱아지는 정보들에 치이면서 살아가는듯 합니다.

 

SNS 공유버튼을 블로그에 달려고 마음먹고 인터넷으로 알아보니 상당히 많은 SNS공유버튼들이 있다는것을 알게되었습니다.

 

SNS 공유버튼을 제공하는 무수한 사이트들을 알아냈고 또 적용된 블로그들을 비교해 보면서 제 블로그 디자인에 맞는것을 찾았습니다.

 

제가 여러분께 소개하고 제 블로그에 설치한 SNS공유 버튼은 Share This 에서 제공합니다. 다양한 디자인 지원,다양한 레이아웃을 지원합니다.

 

Share This 공유버튼을 달아보자

 

http://sharethis.com/   <- 링크를 눌러 이동해 주세요.

 

접속하시면 위 화면이 있습니다. 박스친 부분의 " Get it now » "를 눌러 주세요.

 

" Get it now » "를 눌러주시면 "Step 1. Platform" 화면이 나옵니다.  기본적으로 적용가능한 블로그(사이트)를 보여줍니다. 제가 설치할 티스토리는 없으니 "Website" 를 선택하고 상단 "Step 2. Style"나 하단 "NEXT: Step 2. Pick a Style"를 눌러주세요.

 

위 화면처럼 다양한 레이아웃을 보여줍니다. 원하시는 레이아웃을 선택하시고 "NEXT: Step 3. Customize"를 선택합니다. 전 1번 디자인을 선택했습니다.

 

"NEXT: Step 3. Customize"을 눌러주면 위 화면이 나옵니다. 이 화면에서 블로그에 사용할 SNS 버튼을 선택할수있습니다.

 

Selected Services 목록들이 실제로 블로그에 표시되는 아이콘 입니다. Selected Services에 들어간 아이콘을 화면 상단 "Preview:" 창에 미리 보여 줍니다. 마우스 드래그를 통해서 메뉴 위치를 추가 할 수 있고 삭제할 아이콘에 마우스 커서를 두면 삭제 버튼이 뜹니다.

 

화면 오른쪽 2번은 Sharing Buttons 와 Other Social Plugins로 분리되어 있습니다. Sharing Buttons는 단순히 공유를 위한 버튼을 제공하고, Other Social Plugins 는 좀더 세밀하게 적용이 가능합니다.

 

원하시는 SNS버튼을 선택하셨다면 하단에 "FINISH: Get the Code"를 눌러 주세요.

 

간단한 회원가입창이 뜹니다. 이미 회원가입이 되있다면 하단 "Sign In"을 눌러 로그인 해주시면 됩니다. 가입이 안된 사용자 라면 이메일주소,패스워드,이용약관 동의 하시고 "Create Account"를 선택 합니다.

 

위 화면이나오는데 "ShareThis"버튼을 달았다면 ShareThis버튼을 클릭하거나 마우스 커서를 가져가면 창이 뜨는데 그 창의 레이아웃 지정하는것 입니다. 선택하시고 스크롤을 내려주세요.

 

스크롤을 내리면 블로그에 적용할 소스를 보여 줍니다. 2개의 소스를 보여주는데 1번은  SNS공유버튼이 보여지는 소스 입니다. 2번은  javascript 부분으로 <head>사이에 </head>들어가야 합니다.

 

관리자 메뉴의 꾸미기 -> HTML/CSS 편집 으로 들어가서 skin.html 을 수정해 보겠습니다.

 

 

javascript 부분을 </head>위에 주석을 달아서 넣었습니다. 주석을 달아두면 수정시 알아보기 쉽답니다.^^  

 

그리고  SNS공유버튼이 보여지는 소스는 보여주고자 하는 곳에 넣어주시면 됩니다.

  • ;;

    html을 잘 이해 못했네요...

    다시좀 알려주세요..; ㅠ

    • 어느부분을 말씀하시는지 ...
      설명이 좀 난해하지만 차근차근 해보시면 쉽습니다.

    • 음??

      제가 Bar 에서 제일 마지막걸로 했거든요.(위에서 3번째)

      그다음에 뭐.. google하고 twitter하고 그런거 다 선택해서
      다음3단계에 같는데 뭘 어떻게 해야할지 모르겠어요 ㅠㅠㅠㅠ