이러쿵저러쿵


블로그에 정성들여 공들인 게시물이 있다면 많은 사람들이 관심을 갖고 읽게 됩니다.

그리고 그 게시물을 종종 다른 사람들(친구에게, 또는 카페나 다른 커뮤니티 등에)에게도 공유하기 원하는 사람들이 있습니다. 그렇게 게시물이 공유가 된다면 공유된 링크를 타고 더 많은 사람들이 블로그로 유입되는 효과도 거둘 수 있습니다.^^

 

블로그를 방문한 사람이 쉽게 게시물을 페이스북이나 트위터로 공유할 수 있으면 어떨까요?

 

또 이와 더불어 특정 게시물을 읽는 사람들에게 내 블로그의 다른 재미있는 게시물들도 랜덤하게 추천해 줄 수 있으면 얼마나 좋을까요?

 

물론 이것들을 직접 코드로 구현하려면 손이 많이 갈 텐데요. 그리고 개발자가 아니라면 각각의 주요 SNS의 공유기능 API를 활용하여 블로그에 삽입하는 것도 쉬운 일이 아닐 것입니다.

 

그런데 이 어렵고, 귀찮지만, 매우 유용한 기능을 쉽게 제공해주는 서비스가 있습니다.

 

바로 AddThis 라는 서비스입니다.

 

AddThis 는 내 게시물을 열람하는 사람이 쉽게 다른 SNS로 공유하거나 메일로 보내는 등의 기능을 제공하여 줍니다.

또한 덤으로 게시물 하단에 추천 게시물을 보여주기도 하고, 사용자가 게시물을 읽는 중간에 알림 창을 띄워 다른 종류의 게시물을 추천해주기도 합니다.

 

그럼 이 많은 것들을 한 번 간단하게 블로그에 적용해보도록 할까요?^^

 

 

먼저 addthis 사이트에 접속합니다.

 

사이트 주소 : http://www.addthis.com

 

 

공유 버튼들을 찾고 있어요? 네 맞습니다!

Yes indeed! 를 클릭합니다!!

 

그런데 캡쳐 떠놓고, 한 달정도 있다 작성하는 게시물인데, 메인이 또 조금 바뀌었군요.  

 

사실 아래 내용도 자세하게 보실 필요는 없고..

 

화면 우측 상단의 [SIGN IN] 버튼을 클릭하여 로그인을 먼저 하도록 합니다. 물론 처음 이신 분들이 대다수이실 테니, 계정이 없으실 텐데요, 계정이 없더라도 SIGN IN 버튼을 클릭하세요!

 

 

 

 

 

로그인 창 하단에 보시면 [Create an Account] 링크가 있습니다. 이 링크를 클릭합니다.

 

 

 

 

회원 가입 창이 뜨는군요!!

 

이메일 주소와 비밀번호만 입력한 후, [Register] 버튼을 클릭하면 바로 회원 가입 완료!!!

구글, 페북, 트위터 계정으로도 연동 가입 가능합니다!

 

 

 

 

회원 가입 후, 로그인 합니다!

 

두 가지 버전의 서비스를 제공하는 군요.

 

베이직(Basic)은 기본적인 공유 및 기능 등을 제공합니다.

더 많은 공유 서비스와 다양한 기능을 사용하기 원하신다면 프로(Pro) 버전을 사용합니다.

 

베이직 버전을 사용하면 페이스북 공유, 트위터 공유, 이메일 전송, 인쇄 등을 기본으로 제공합니다. (그 외에 몇가지 더 공유 기능을 제공합니다.) 그리고 기본적인 추천 기능도 제공하고, 그 외에 게시물 열람 및 공유 로그 정보도 관리자 페이지도 제공합니다.

 

 

 

 

베이직 버전과 프로 버전의 차이점을 보여주고 있습니다.

 

베이직은 평생 무료 버전이고, 프로 버전은 매달 10달러의 이용료를 받습니다.

 

 

 

프로 버전은 22가지의 공유 기능을 제공하고, 툴도 커스터마이징 할 수 있다고 하는군요.

그 외에 모바일에서의 공유 기능도 최적화 하여 지원하는 것으로 보입니다.

 

저는 유료 버전을 사용하지는 않아서 정확하게 어느 수준까지 지원되는지는 직접 구동해 보지는 못하였습니다.

 

무료로 사용하실 분은 저처럼 [GET BASIC] 버튼을 클릭합니다.

 

사실 프로 버전(현재는 STARTER 버전) 이외에도 GROWTH 버전, BUSINESS 버전도 제공하고 있습니다.

 

 

 

이제 본격적으로 공유하기 기능을 어떻게 구성할지, 사용자가 직접 커스터마이징 하는 단계입니다.

 

이 부분은 자세한 설명은 생략하고, 아래 제공되는 도구들을 활용하여 어떻게 화면에 표시할지, 어떤 대상에게 공유하기 기능을 노출시킬지 등을 설정할 수 있습니다. 그리고 공유 레이어의 색상이나 테마도 선택 가능하고, 버튼의 배치, 공유 기능의 위치, 메시지 표시 등도 설정할 수 있습니다.

 

 

 

모두 설정이 완료되었으면 우측 하단의 [SAVE & ACTIVATE] 버튼을 클릭합니다.

 

정상적으로 저장되었다면 아래와 같이 새로 생성된 AddThis 카드가 표시됩니다.

 

 

 

이제 모든 작업이 완료되었습니다.

그런데 지금까지 작업한 공유하기 도구를 어떻게 내 블로그에 적용시킬 수 있을까요?

 

상단의 TOOLS 메뉴를 선택합니다.

그러면 공유하기 도구를 화면상에 어떻게 표시할지를 선택할 수 있습니다.

저는 첫번째 것을 선택하였습니다. (이미 선택하여 사용하고 있는 것이라 첫번째 Share Tool만 Setup 버튼으로 표시됩니다.)

 

 

 

선택하면 해당 도구의 배치, 테마, 제목 등을 설정할 수 있는 레이어 팝업이 나타납니다.

 

원하는 대로 선택한 후, 아래로 쭉 내려오면 Get The Code 라는 영역에 스크립트 코드가 보일 것입니다.

 

 

 

 

스크립트 코드를 복사합니다. (Ctrl + C)

복사한 코드를 <body> 영역에 넣으라고 하는군요.

 

이제 티스토리 블로그 관리자 페이지로 가서 [꾸미기-HTML/CSS 편집] 메뉴를 클릭합니다.

 

페이지 편집 화면이 나타나면 skin.html 영역에 아래 AddThis 코드를 입력합니다.

 

 

 

<!-- AddThis Smart Layers BEGIN -->
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5579955a317251cf"></script>
<script type="text/javascript">
  addthis.layers({
    'theme' : 'transparent',
    'share' : {
      'position' : 'left',
      'numPreferredServices' : 5
    }, 
    'whatsnext' : {}, 
    'recommended' : {}
  });
</script>
<!-- AddThis Smart Layers END -->


 

 

첫번째 스크립트는 AddThis 의 라이브러리 파일을 로드합니다.

 

두번째 스크립트는 AddThis 라이브러리를 활용하여 AddThis 객체를 생성합니다.

옵션값은 직접 임의로 변경할 수도 있습니다.

theme : 'transparent' : 투명 테마를 선택합니다.

share.position : 'left' : 공유 도구를 페이지 좌측에 붙입니다.

share.numPreferredServices : 8 : 공유 도구에 한 번에 보여질 최대 도구 개수를 설정합니다. (페이스북, 트위터, 이메일 등의 공유 도구 개수를 말합니다.

whatsnext : {} : 이 것을 설정하면 페이지가 열린 이후, 잠시 있다가 화면 우측 하단에 추천 게시물 카드가 알림 처럼 나타납니다. 위 처럼 별도의 파라메터를 넣지 않으면 랜덤하게 게시물 하나를 추천합니다.

recommended : {} : 이 것을 설정하면 게시물 맨 하단에 4개의 추천 게시물 카드가 표시됩니다. 위 처럼 별도의 파라메터를 넣지 않으면 랜덤하게 4개의 게시물을 추천합니다.

 

 

아래는 실제 위의 스크립트를 적용한 후, 화면에 보여지는 AddThis 의 도구입니다.

 

 

* 페이지 좌측에 5개의 버튼이 붙어있는 공유 도구가 나타납니다.

 

 

 

 

whatsnext : {} 를 설정하면 아래 캡쳐 화면처럼 우측 하단에 추천 게시물 카드 알람이 뜹니다.

 

 

 

 

 

recommended : {}  를 설정하면 아래와 같이 페이지 맨 하단에 추천 카드 4개를 보여줍니다.

 

일반적으로 블로그를 검색 포털 등을 통해 들어온 사용자에게 더 다양한 게시물을 추천하여 양질의 블로그 게시물을 더 제공해 줄 수 있고, 블로그에 머무는 시간도 늘리게 됩니다.

 

 

이것으로 모든 공유하기 기능 포스팅이 끝났습니다.

 

 

아래는 실제 관리자 페이지를 통해서 보여지는 여러가지 지표에 대한 정보 중에 일부를 캡쳐한 것입니다.

 

블로그에 방문한 사용자가 블로그의 게시물을 얼마나 공유했고, 또 추천받은 카드를 눌러서 열람하였는지 등 다양한 통계 자료를 보여줍니다.

 

 

 

 

또 어떤 추천 게시물이 가장 많은 클릭률을 기록하였는지도 보여줍니다.

 

 

 

이 이외에도 더 다양한 통계 지표 자료를 제공하여 블로그의 사용자 패턴이나 인기 게시물을 알게 되어 블로그 관리에 있어서 많은 도움을 줍니다.

 

어렵지 않으니, 아직 이 도구를 사용하고 계시지 않은 분이 계시다면 이 번 기회에 한 번 적용해 보도록 하세요!!!

 

혹시 이와 관련하여 궁금한 사항이 있으시면 댓글 달아 주세요! 아는 범위 내에서 성심성의껏 답변 드리도록 하겠습니다^^

읽어 주셔서 감사합니다.

 

 

 

 

 

 

저작자 표시 비영리 변경 금지
신고


Comment +3

  • 안녕하세요 좋은 포스팅 잘보았습니다!! 질문이 있는데요 에드디스 추천글 기능이 현재 티스토리에서 잘적용되고있는지 궁금합니다.
    (티스토리 소스코드랑 충돌되서 안된다고 들어서요.. )

    • 안녕하세요. 혁규님.
      블로그를 방문해 주셔서 감사합니다.
      답변이 많이 늦었습니다. ㅠ.ㅠ

      게시물에 예로 들고 있는 블로그(오즈의 순위왕, http://ozrank.co.kr)는 제가 별도로 운영하는 티스토리 블로그입니다.
      해당 블로그에 제가 AddThis 기능을 적용하여 사용하고 있는데요, 추천 기능도 실제 게시물의 스크린샷 처럼 잘 동작하고 있습니다.
      티스토리와 특별히 충돌이 있는 현상은 확인하지 못하였으며, 해당 블로그에 방문해 보시면 추천 팝업이나 추천 카드가 잘 동작하고 있는 것을 확인하실 수 있습니다.

      좋은 한 주 시작하세요!

    • 댓글 감사합니다 : ) 더운여름 몸건강하시길

티스토리 툴바