김c Review

리뷰어 김c

질 좋은 컨텐츠를 공유하도록 공유버튼만들어봅시다

안녕하세요.
리뷰어김c입니다.

어제는 본문아래쪽에 작은 sns 공유 버튼을 지우기에 대해서 글을 작성하였습니다.
하지만 작은 버튼보다는 큰 버튼이 눈에 확들어오고 나만의 설정대로 할수 있는 방법이 있기에 이렇게
글을 작성합니다.

이 부분도 애드센스의 광고 코드처럼 코드로 되어 있어서 소스를 스킨 편집에 가져가 붙여 넣으면 된다.

우선 사이트는 www.addthis.com 에 접속을 합니다.
어떤 사이트던 처음에 접속을 하면 서비스 이용전에 가입을 하게됩니다. 가입도 간단하기에 바로 가입을합니다.
저는 기억하기 쉽게 티스토리 블로그 계정으로 똑같이 이메일을 입력하고 바로 가입을 했습니다.

가입을 하고 나면 위와 같은 페이지라 보이는데 오른쪽 상단의 "Dashboard"를 선택해 줍니다.

데시보드를 클릭을해서 페이지가 넘오오면 오른쪽 상단의 빨간 박스의 "ADD NEW TOOL"을 선택을 합니다.
다음페이지에서 저희는 공유를 할 버튼을 생성할것이기에 SHARE BUTTONS를 클릭을 합니다.
위의 이미지는 이미 제가 제 블로그에 적용할 공유버튼을 만들었기에 보이는 것입니다.

이 페이지가 보이면 왼쪽의 첫번째 SHARE BUTTONS를 클릭을 해서 다음페이지로 넘어갑니다.

이 페이지에서 이제는 공유하는 버튼의 모양과 TYPE을 결정하는데 저는 두번째 방식인 INLINE 방식으로 결정을 
했습니다.
선택을 하고 하단의 Continue를 선택을 해줍니다.

이 페이지는 왼쪽에 Smart Sorting by AddThis 와 아래의 selected by You 와 2가지 선택이 있는데
저는 selected by You 를 선택해서 제가 추가 하고픈 sns를 선택을 해서 결정을 했습니다.

selected by You를 선택을 하면 기본적인 sns로는 페이스북, 트위터, 이메일, 핀터레스트 가 있는데
이외에 더 추가를 하고 싶으면 "AddThis"를 선택해서 본인이 공유하고자 하는 sns를 선택을 하면 됩니다.

하지만 여기서 이렇게 선태을 한다고 해서 티스토리 블로그에 바로 적용이 되는 것은 아닙니다.

AddThis 코드를 내 티스토리 블로그에 붙여넣기

위에까지 모든 설정을 맞췄다면 아래의 이미지의 오른쪽 상단의 있는 GetTheCode를 선택하고 보여지는
코드를 티스토리 블로긔 스핀 편집(html)에 들어가서 </body> 위에 붙여 넣기를 해주면 됩니다.

 위의 이미지가 제 계정에 생성된 코드입니다.
1번을 보시면 just copy라고 되어 있습니다.
오른쪽의 "+" 버튼을 눌러서 램에 복사를 합니다. 복사를 메모장에 하신후에 붙여 넣기하셔도 됩니다.

2번을 보시면 반드시 </body>위에 paste here 라고 강조를 하고 있습니다.
반드시 html코드중에 </body>바로 위에 위에 코드를 붙여 넣기를 해야 적용이 됩니다.
참고를 위해 제 블로그 예시를 캡처해서 보여드리겠습니다.

이런식으로 큼지막하게 "이 글을 공유합니다" 라고 함께 AddThis에서 설정했던 SNS 아이콘들을 볼수 있습니다.
이렇게 함으로서 질 좋은 글은 여기저기 공유가 되어서 수익창출에 조금이라도 도움이 됩니다.

위 이미지는 저의 스킨의 HTML 코드의 일부분입니다.
반드시 </body> 위에 복사를 해야 합니다.
제 코드도 </body> 위에 들어간게 보이시죠?

이 글을 공유합시다

facebook twitter googleplus kakaostory naver

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

  1. Favicon of https://html6.tistory.com BlogIcon HTML6 2020.02.13 10:15 신고

    오 이런방법이 있었군요!

  2. Favicon of https://pyopyo1027.tistory.com BlogIcon 책린이 2020.02.13 10:45 신고

    와 꿀팁공유 감사합니다~!^^

    저도 설정해봐야겠네요~!!

  3. Favicon of https://gmssu12.tistory.com BlogIcon 밤하늘별9804 2020.02.13 13:29 신고

    ♤숙지하도록... 역쉬 감사 ㅎ ㅎ

  4. Favicon of https://mesin.tistory.com BlogIcon 메신7 2020.02.13 13:47 신고

    저런 거 하나하나 끼우는 것도
    저런 작업들이 하나하나 필요한 필요하군요
    블로그 초보에겐 낯설기만합니다 ㅎㅎ

    잘 보고 갑니다