블로그에 SNS 공유버튼 달기 - Shareaholic 새로운 소스 적용법
2013.05.12 21:32
블로그에 SNS 공유버튼 달기 - Shareaholic 새로운 소스 적용법
광고 차단 플러그인을 꺼 주시면 블로그 운영에 도움이 됩니다. ^^

오늘 블로그 본문 하단 정리를 위해 SNS공유버튼을 정리하면서 알게된 정보입니다.

 

 

위 링크의 SNS 공유버튼 달기 - Shareaholic 소스가 좀더 편리하게 바뀌었더군요.

 

그래서 새로운 글 작성을 합니다.

 

https://www.shareaholic.com/publishers/sharing/  <-- 링크를 눌러 이동해 주세요.

 

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

 

링크 주소를 눌러 접속하면 위 화면이 나옵니다. 하단 "Sign up to get free share buttons"를 눌러주세요.

 

회원가입을 이미 하셨다면 로그인 하시구 처음 이라면 이메일, 비밀번호를 넣고 "Create Your Account"를 눌러주세요.

 

로그인된 화면 입니다.  차근차근 설명해 보겠습니다.

 

"Name of site"사이트 이름을 넣어주시고 "Domain" 운영하시는 블로그,사이트 주소를 넣어주세요.

 

Heading 란에 화살표를 누르면 하단에 메뉴가 나옵니다. 사용하고자 하는 값을 선택하시면 됩니다. 전 "No Heading"를 선택했습니다.

 

위 화면에서 사용하고자 하는 SNS버튼을 설정합니다. 2번창에 있는 아이콘중 사용하고 하는 SNS버튼을 마우스로 누른 상태에서 1번으로 이동하면 됩니다.

 

그러면 1번에 보여주는 SNS아이콘들이 블로그에 보여줍니다.

 

블로그에 보여줄 아이콘을 삭제할려면 삭제할 아이콘에 마우스커서를 두면 X버튼이 보이는데 X버튼을 눌러주시면 삭제 됩니다.

 

사용할 SNS버튼을 선택하셨다면 하단 "Save settings"를 클릭합니다.

 

블로그에 SNS 공유버튼 달기 - Shareaholic Html 소스 적용법

 

 

"Save settings"를 클릭하면 위 화면처럼 Html소스를 보여 줍니다.

 

블로그 관리-> HTML/CSS 편집으로 이동합니다.

 

1번 위 소스는 SNS버튼이 보여질 부분에 넣어주시면 됩니다.

 

 

2번의 위 소스는 </ head>위에 넣으라고 하는데 제 블로근느 스킨문제인지 </ head>위에 넣으니 보여주는 부분에 문제가 있더군요. 그래서 전 1번소스 바로 위에 넣었습니다.

 

자바 소스는 사이트 설명대로 </ head>위에 넣으시고 보여주는 부분에 문제가 있다면 위치 변경을 해보세요.

, , , , ,

  1. 제 블로그에도 달아 놨지요.
    깔끔하고 좋아요.

  2. 안녕하세요.
    깔끔하고 아주 좋지요.
    이번에 소스 업데이트하면서 다시 들렸더니 첨부파일 업로드나 기타 사소한 부분이 달라져서 글 작성을 다시 했네요.^^

  3. 와... 좋은것이 있었군요...
    한번 해봐야겠네요.

  4. Html소스 수정을하다 더 간단하게 바뀐걸 알았네요.
    처음엔 좀 복잡하긴 했는데 ㅎ

    댓글 감사합니다.

  5. 정확하게 찾고 있던 것인데 정말 감사합니다 ^^

  6. 도움이 되셨다니 다행입니다.
    제가 댓글을 이제 확인해서 늦었습니다.
    즐거운 하루 보내세요.^^