Web2013.08.06 10:48

저의 블로그에 설치되어 있는 좌측의 떠 있는 공유버튼과 하단에 있는 공유 버튼 설치하는 방법에 대해서 알아보고자 합니다.

모두 AddThis 라는 서비스를 이용하고 있습니다.

 

블로그가 너무 난잡해 보이는 단점이 있으나, 쉽고 빠르게 공유가 가능하도록 하고자 합니다.

URL 주소만 복사해서 붙여 넣으면 끝나는 문제이긴 합니다만, 저도 뼛속까지 한국인이라 그런지.. 빠르게 빠르게 가 몸에 베어 있는 것 같습니다.

 

1. AddThis 서비스 가입

가입을 해도 되고 안하셔도 블로그에 공유버튼을 붙이는 것은 가능합니다.

하지만 공유버튼을 언제 어디로 클릭되었는지에 대한 정보가 필요하다면 가입한 후 이용하는 것이 도움이 됩니다.

가입은 아래 링크에서 가능하며, 페이스북, 트위터, 구글 + 의 오픈 아이디로 가입하셔도 상관 없습니다.

 

http://www.addthis.com/

 

 

가입하게 되면 아래와 같이 로그인 첫 화면이 통계화면을 만날 수 있습니다.

 

일단 오늘은 통계보다 설치가 목적임으로 통계에 대한 내용을 조금씩 부분부분에만 설명하도록 하겠습니다.

 

2. 코드 생성

가입 후 제일 상단 메뉴 중 Get the Code를 선택합니다.

거기에서 코드를 복사해 블로그에 붙여 넣으면 되는 아주 간단한 구조입니다.

오늘은 Smart Layers와 Share Buttons 만 적용하도록 하겠습니다.

Get the Code를 선택하여 처음 보이는 페이지는 아래와 같이 Smart Layers 즉 좌측에 떠 있는 메뉴입니다.

 

 

기본적으로는 Follow를 제외한 나머지 옵션이 활성화 되어 있습니다.

오늘은 Share만 활성화하고 진행하도록 하겠습니다.

 

Share를 선택하여 보시면 아래와 같이 좌/우 그리고 개수를 선택할 수 있는 옵션이 있습니다.

저는 왼쪽에 띄울 예정이라 Left, 그리고 5개를 선택하였습니다.

 

무조건 선택하는 옵션으로는 More Opitons라고 해서 좌측 메뉴의 테마입니다.

저는 아무것도 표시되지 않는 Transparent를 선택하였습니다.

 

선택하게 되면 우측의 Preview에서 바로 확인을 할 수 있으며, 일반 웹브라우져와 테블릿 그리고 폰의 화면을 직접 볼 수 있습니다.

하지만 티스토리에서는 폰의 테마는 적용되지 않습니다.

 

이제 Generate Code를 선택하여 코드를 만들어냅니다.

만들게 되면 아래와 같이 로그인하지 않았다고 하면 로그인 창이 띄게 됩니다.

 

로그인을 하지 않아도 된다고 하면 아래 작게 보이는 Don’t want analytics?를 선택하시면 바로 코드를 가져올 수 있습니다.

 

 

전체 코드를 복사 한 후 이제 블로그에 적용하면 됩니다.

복사한 코드는 아래와 같습니다.

<!-- AddThis Smart Layers BEGIN -->
<!-- Go to http://www.addthis.com/get/smart-layers to customize -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-51ff5de203127e60"></script>
<script type="text/javascript">
  addthis.layers({
    'theme' : 'transparent',
    'share' : {
      'position' : 'left',
      'numPreferredServices' : 5
    }   
  });
</script>
<!-- AddThis Smart Layers END -->

 

3. 블로그에 코드 적용

관리 페이지로 이동 한 후 좌측의 꾸미기 –> HTML / CSS 편집으로 들어갑니다.

 

skin.html 텍스트 박스의 <title>[##_title_##] :: [##_page_title_##]</title> 바로 윗부분에 복사한 코드를 아래와 입력하시면 됩니다.

 

 

이렇게 한 후 미리보기를 보시면 바로 적용된 상태를 바로 확인 할 수 있으며, 코드를 좀 수정하여 위치를 변경 할 수도 있습니다.

복사 한 코드 중 position의 left나 혹은 right를 반대로 적용할 수도 있으나 직접 해 보시면서 확인하셔도 무방합니다.

그리고 numPreferredServices는 보여질 개수 입니다. 아까 옵션에서 적용한 숫자 즉 5가 적혀 있을 것이나 역시 늘리거나 줄이셔도 무방합니다.

하지만 너무 늘려 버리면 화면을 넘어버리기 때문에 문제 될 수 있으니 적당한 개수로 적용해야 될 것입니다.

 

여기에 추가로 아래와 같이 share에 service라는 옵션을 더 코딩 하시면 순서 및 원하는 서비스를 연결 할 수 있습니다.

<!-- AddThis Smart Layers BEGIN -->
<!-- Go to http://www.addthis.com/get/smart-layers to customize -->
<script type="text/javascript">
  addthis.layers({
    'theme' : 'transparent',
    'share' : {
      'position' : 'left',
      'numPreferredServices' : 8,
      'services': 'facebook,twitter,google_plusone_share,print,emal,evernote,bitly,pocket,more'
    },  
    'recommended' : {
      'title': 'Recommended for you:'
    } 
  });
</script>
<!-- AddThis Smart Layers END -->

저는 페이스북, 트위터, 구글+, 인쇄, 메일, 에버노트, Bitly, pocket 그리고 More 버튼 순으로 제가 원하는 서비스를 입력하였습니다.

입력되어 있는 순서 순으로 나타나게 되며, 다른 서비스는 아래 링크에서 확인 할 수 있습니다.

http://www.addthis.com/services/list

 

 

여기에서 Code 부분의 문구를 넣으시면 됩니다.

 

이렇게 해서 완성된 화면은 아래와 같습니다.


위 정보의 참고 링크는 아래와 같습니다.

http://support.addthis.com/customer/portal/articles/1200473-smart-layers-api

 

4. 공유버튼 설정

저는 본문의 마지막 부분 댓글이 시작되는 곳에 공유버튼을 달아 놓았습니다.

위치는 원하는 곳에 해당 코드를 넣으시면 됩니다.

 

먼저 Smart Layers와 동일한 방법으로 Share Buttons 를 선택하여 코드를 얻어야 합니다.

저는 아래 보이는 것처럼 정 사각형의 아이콘 형태로 선택하였습니다.

 

현재 위 화면에서는 옵션이 보이지 않습니다.

로그인 한 사용자의 경우에는 옵션에 Track when users share by copying your URL 선택 박스가 나타나 있습니다.

위 옵션의 경우에는 공유 한 후 공유된 페이지를 다른 사람들이 얼마나 클릭하였는지 확인 할 수 있는 URL을 만들어 주는 역할을 합니다.

저는 선택한 상태이며, 좌측의 Add to your site에 코드를 복사해서 방금전 붙여 넣은 Html / CSS 편집 페이지에 붙여 넣으시면 됩니다.

일단 복사한 코드는 아래와 같습니다.

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=test"></script>
<!-- AddThis Button END -->

여기에 보시면 제일 아래의 <script로 시작하는 부분.. 즉 아래와 같은 코드입니다.

<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=test"></script>

 

위 코드를 잘라서 조금 전에 코드 넣은 <title>[##_title_##] :: [##_page_title_##]</title> 위의 부분에 넣고, 나머지 부분은 원하는 곳에 넣으시면 됩니다.

저는 [##_article_rep_desc_##] 바로 아래에 넣었습니다.

[##_article_rep_desc_##] 부분이 바로 작성한 본문 내용이 나타나는 곳이며, 이 부분 아래에 표시되도록 아래 부분에 적용하였습니다.

 

헌데 제 코드는 좀 길군요. 역시 이 부분도 마음대로 변경 할 수 있습니다.

아래와 같이 코드를 변경하였습니다.

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_linkedin"></a>
<a class="addthis_button_evernote"></a>
<a class="addthis_button_instapaper"></a>
<a class="addthis_button_readitlater"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_print"></a>
<a class="addthis_button_favorites"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<!-- AddThis Button END -->

위의 코드는 HTML로만 만들어져 있으나 javascript로도 구현이 구현이 가능하며, 좀 더 많은 옵션을 제공하고 있어서 마음대로 만들기 편합니다.

위에 class= 부분의 들어 있는 addthis_button_로 시작하는 이름을 동일하게 하고 서비스 이름을 적으면 아래와 같이 나타나는 것을 확인 할 수 있습니다.

 

 

위의 아이콘들은 제가 직접 입력하고 필요한 것들만 찾아본 것이라 좀 부족합니다.

필요한 버튼은 좀 더 찾아보시면 될 것 같습니다.

참고 링크는 아래와 같습니다.

http://support.addthis.com/customer/portal/articles/381263-addthis-client-api

 

이렇게 해서 addthis 서비스를 이용하여 공유버튼 붙이는 방법을 살펴보았습니다.

 

감사합니다.



Posted by Angeleyes

Ask me를 이용하시면 댓글보다 빨리 답변 드릴 수 있습니다.

댓글을 달아 주세요

  1. 이제 막 티스토리를 시작했는데 페이스북이나 카카오톡에 제 글을 공유하고 싶은데
    방법을 몰라 찾아다니던 중에 이곳 좌측과 하단 메뉴 버튼이 마음에 들어서 따라해보고 싶은데 정말 복잡하네요. ㅎ

    2017.08.20 21:30 신고 [ ADDR : EDIT/ DEL : REPLY ]