SNS 공유 버튼 기능을 업데이트 하기 위해 몇주간 끙끙 앓았는데 결국 아주 만족스럽지는 않지만 그런대로 결론을 낼 때가 되어서 간략 정리하기로 했습니다.

멋진 디자인에 다양한 기능과 다양한 SNS를 적용하고 싶었는데 역시 실력이 부족한 관계로 부분적으로 만족할 수 밖에 없었습니다.

지금 생각해보면 왜 이렇게 많은 삽질을 했을까 싶기도 합니다.
이 기능이 엄청난 효과를 가져오는 방법인지에 대해서는 많은 이문이 있기는 합니다.

그러나 나중에 가장 효과적인 SNS 공유 활성화 방법 4가지 에서 정리했듯이 SNS 공유 버튼은 컨텐츠가 공유되는데 지대한 영향을 준다는거시 정석이므로 가장 효율적인 방법을 찾는 것은 매우 당연한 일일 것입니다.

1. SNS 공유에는 어떤 기능이 있어야 할까?

SNS 공유 버튼을 추가할 시 아래와 같은 기능이 있었으면 좋겠다고 생각했습니다.

첫째, 포스팅이 얼마나 공유되었는지를 알 수 있도록 카운터가 있었으면 좋겠다. 최근 해외의 많은 블로그들은 각각 공유 버튼별로 또는 공유 버튼 전체로 공유 횟수를 나타내는 기능을 제공하고 있습니다.

둘째, 가능하면 포스팅이 공유되는 현황을 통계로 볼 수 있었으면 좋겠다. 처음에는 이런 기능이 굳이 필요할까 라는 생각도 들었지만 이런 기능을 제공하는 플러그인을 사용하다보니 꽤 유용하기는 하다. 단 심리적인 만족에 그치지만.. 아 오늘은 몇개가 공유되었구나 하는 생각… 아마 데이타가 쌓이면 어떤 SNS가 잘 공유되는지를 살펴서 버튼 재배치에 활용하 수 있을 것 같다.

셋째, 디자인이 이뻣으면 좋겠다, 요즘 디자인이 이쁜 SNS 공유기능이 많아서.. 이왕이면

넷째, 가능하면 국내에서 많이 사용되는 카카오톡, 카카오스토리, 네이버,밴드, 라인등이 반영되었으면 좋겠다. 워드프레스 관련 플러그인등등이 해외 중심으로 개발되었다보니 한국 현실은 대부분 고려되지 않아 국내 SNS는 빠진 경우가 많았다. 한국에서 개발된 SNS 공유 플러그인들은 기능면에서 좋은 점수를 줄 수는 없었다.

다섯째, 당연히 속도는 빨랐으면 좋겠다. 일반적로 공유 버ㅂ튼 생성에 자바스크립트를 사용하다보니 속도 저하 현상이나타난다고해서 가능하면 자바스크립트를 사용하지 않는 방법을 찾고자 하였다.

2. 어떤 것을 사용해야 할까?

쇼셜 공유 또는 SNS 공유 기능을 제대로 활용하기 위해서는 어떤 프로그램 또는 플러그인을 활용해야 할까?

2.1. 자체 제작하는 방법 – simplesharingbuttons.com 활용

처음에는 사이트 속도에 중점을 두어서 속도 저하의 원인이 된다는 자바스크립트를 사용하지 않고 공유 버튼을 만들까 고민을 많이 했습니다.
실제로 이런 사상을 가지고 좋은 소스를 제공해주는 사이트들이 많이 있습니다.

대표적이 곳이 Simple Sharing Buttons Generator인데요. 여기서는 자기가 원하는 디자인과 공유하고 싶은 쇼셜을 선택하고 자바스크립트를 사용할 것인지를 결정하면 알아서 코드를 만들어 줍니다.

▽ simplesharingbuttons.com에서 제공하는
매뉴얼로 공유버튼 만들기 화면

이렇게 simplesharingbuttons.com에서 만든 코드는
첫째, 다양한 디자인이 제공되고 제공되는 디자인도 상당히 매력적입니다. 컬러풀 또는 흑백으로 또는 화이트톤으로, 사각형 또는 원형으로 다양한 디지인을 제공하는 있습니다.

둘째, 자바스크립트를 사용하지않고 만드는 옵션을 제공하고 있어 속도에 도움이 됩니다.

셋째, 매뉴얼로 만드는 것이므로 주소만 제대로 알면 한국에서 사용되는 다양한 SNS 버튼을 추가할 수 있습니다.

그러나 여기서 제공하는 코드는 아쉽게도 제 사이트에 적용 시 newspaper 8 테마와는 궁합이 잘 맞지 않더라구요. 그러다보니 제대로 디자인 구현이 안되었습니다.

그리고 공유 횟수를 알려준는 카운터 적용 방법이 쉽지 않아서 이 방법은 포기하고 말았습니다.

혹시 다른 분들에게 도움이 될지 몰라서 제가 만들었던 HTML 코드를 공유하니 참고하시기 바랍니다. 체이스북등 전세계에서 사용되는 쇼셜 코드는 simplesharingbuttons.com에서 그대로 가져왔고 카톡 등을 추가했습니다.

<ul class="share-buttons">
  <li><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fhappist.com&t=%EA%BF%88%EA%BE%B8%EB%8A%94%EC%84%AC%20%7C%20%EB%A7%88%EC%BC%80%ED%8C%85%20%EC%BC%80%EC%9D%B4%EC%8A%A4%20%EC%8A%A4%ED%84%B0%EB%94%94" title="Share on Facebook" target="_blank"><img alt="Share on Facebook" src="https://happist.com/files/sns/Facebook.png" /></a></li>

<li><a href="https://twitter.com/intent/tweet?source=https%3A%2F%2Fhappist.com&text=%EA%BF%88%EA%BE%B8%EB%8A%94%EC%84%AC%20%7C%20%EB%A7%88%EC%BC%80%ED%8C%85%20%EC%BC%80%EC%9D%B4%EC%8A%A4%20%EC%8A%A4%ED%84%B0%EB%94%94:%20https%3A%2F%2Fhappist.com&via=imhappist" target="_blank" title="Tweet"><img alt="Tweet" src="https://happist.com/files/sns/Twitter.png" /></a></li>

<li><a href="https://plus.google.com/share?url=https%3A%2F%2Fhappist.com" target="_blank" title="Share on Google+"><img alt="Share on Google+" src="https://happist.com/files/sns/Google+.png" /></a></li>

<li><a href="http://www.tumblr.com/share?v=3&u=https%3A%2F%2Fhappist.com&t=%EA%BF%88%EA%BE%B8%EB%8A%94%EC%84%AC%20%7C%20%EB%A7%88%EC%BC%80%ED%8C%85%20%EC%BC%80%EC%9D%B4%EC%8A%A4%20%EC%8A%A4%ED%84%B0%EB%94%94&s=" target="_blank" title="Post to Tumblr"><img alt="Post to Tumblr" src="https://happist.com/files/sns/Tumblr.png" /></a></li>

<li><a href="http://pinterest.com/pin/create/button/?url=https%3A%2F%2Fhappist.com&description=" target="_blank" title="Pin it"><img alt="Pin it" src="https://happist.com/files/sns/Pinterest.png" /></a></li>

  <li><a href="https://getpocket.com/save?url=https%3A%2F%2Fhappist.com&title=%EA%BF%88%EA%BE%B8%EB%8A%94%EC%84%AC%20%7C%20%EB%A7%88%EC%BC%80%ED%8C%85%20%EC%BC%80%EC%9D%B4%EC%8A%A4%20%EC%8A%A4%ED%84%B0%EB%94%94" target="_blank" title="Add to Pocket"><img alt="Add to Pocket" src="https://happist.com/files/sns/Pocket.png" /></a></li>

<li><a href="http://www.reddit.com/submit?url=https%3A%2F%2Fhappist.com&title=%EA%BF%88%EA%BE%B8%EB%8A%94%EC%84%AC%20%7C%20%EB%A7%88%EC%BC%80%ED%8C%85%20%EC%BC%80%EC%9D%B4%EC%8A%A4%20%EC%8A%A4%ED%84%B0%EB%94%94" target="_blank" title="Submit to Reddit"><img alt="Submit to Reddit" src="https://happist.com/files/sns/Reddit.png" /></a></li>

  <li><a href="http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fhappist.com&title=%EA%BF%88%EA%BE%B8%EB%8A%94%EC%84%AC%20%7C%20%EB%A7%88%EC%BC%80%ED%8C%85%20%EC%BC%80%EC%9D%B4%EC%8A%A4%20%EC%8A%A4%ED%84%B0%EB%94%94&summary=&source=https%3A%2F%2Fhappist.com" target="_blank" title="Share on LinkedIn"><img alt="Share on LinkedIn" src="https://happist.com/files/sns/LinkedIn.png" /></a></li>

  <li><a href="https://pinboard.in/popup_login/?url=https%3A%2F%2Fhappist.com&title=%EA%BF%88%EA%BE%B8%EB%8A%94%EC%84%AC%20%7C%20%EB%A7%88%EC%BC%80%ED%8C%85%20%EC%BC%80%EC%9D%B4%EC%8A%A4%20%EC%8A%A4%ED%84%B0%EB%94%94&description=" target="_blank" title="Save to Pinboard"><img alt="Save to Pinboard" src="https://happist.com/files/sns/Pinboard.png" /></a></li>

  <li><a href="mailto:?subject=%EA%BF%88%EA%BE%B8%EB%8A%94%EC%84%AC%20%7C%20%EB%A7%88%EC%BC%80%ED%8C%85%20%EC%BC%80%EC%9D%B4%EC%8A%A4%20%EC%8A%A4%ED%84%B0%EB%94%94&body=:%20https%3A%2F%2Fhappist.com" target="_blank" title="Send email"><img alt="Send email" src="https://happist.com/files/sns/Email.png" /></a></li>

  <li><a href="javascript:;" class="ico_skin link_kt" id="kakao-link-btn"  target="_blank" title="Send Kakao"><img alt="카톡으로 보내기" src="https://happist.com/files/sns/Kakao.png" /></a></li>

    <a href="#" onclick="javascript:window.open('http://share.naver.com/web/shareView.nhn?url=' +encodeURIComponent(document.URL)+'&title='+encodeURIComponent(document.title), 'naversharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Naver" ><img alt="네이버로 보내기" src="https://happist.com/files/sns/Naver.png" /></a>

  <li><a href="#" onclick="javascript:window.open('https://story.kakao.com/s/share?url=' +encodeURIComponent(document.URL), 'kakaostorysharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes, height=400,width=600');return false;" target="_blank" alt="Share on kakaostory"> <img alt="카카오스토리 보내기" src="https://happist.com/files/sns/Kakao_Story.png"></a></li>
</ul>

이 외에도 매뉴얼로 공유 버튼을 만드는 다양한 방법들이 많이 소개되고 있는데요. 예전 워드님이 플러그인을 사용하지 않고 SNS 공유 버튼 추가하기에서 소개했던 How to Create Social Sharing Button without any Plugin and Script Loading? WordPress Speed Optimization Goal라는 글도 도움이 될 것 같습니다.

이 외에도 아래 글들을 참조해 보세요.

How to create social share buttons with custom icons

Social Share Links with Custom Icons

2.2. Monarch Plugin 활용

쇼셜 공유 플러그인을 소개하면 포스팅에서 항상 추천되는 플로그인이고, 때로 가장 좋은 플러그인이라고 소개되는 것이 Monarch Plugin입니다.

Monarch Plugin은 일반 공개되는 프로그램은 아닙니다.
Divi 테마로 유명한 Elegant사에서 자기 고객용으로 배포하는 플러그인으로 Elegant사의 제품을 구입해야 사용할 수 있습니다.
저는 예전에 Extra 테마를 사용 시 적용했던 플러그인이 있어서 테스트해 보았습니다.

Monarch Plugin은 포스팅의 앞부분/뒷부분에 적용하는 Inline, 좌측 또는우측에 붙박이로 나타나는 Sidebar, 중간에 밑부분에서 나타나는 Flyin, 중앙에 튀어나오는 Popup, 이미지등을 공유할 수 있도록 해주는 Media 그리고 위젯 같은 아주 다양한 기능을 지원합니다.

그리고 당연하게 쇼셜 개별 공유 횟수와 총 공유 회수를 표현할 수 있습니다.

또한 일별, 주별 또는 월별 공유 현황이 어찌되는지 통계를 보여 주고 이를 토대로 분석이 가능합니다. 또한 구글 어낼리틱스와 연동해 분석이 가능합니다. ( 이부분은 테스트하지 못했습니다.)

속도와 관련해 조금 시간이 지난 2015년도 테스트 자료이지만 Monarch의 속도가 다양한 기능에도 불구하고 대단히 빠르다는 보고가 있을 정도로 속도는 나쁘지 않은 것 같습니다.

Which is the Fastest Social Sharing Plugin For WordPress?

그러나 Monarch Plugin이 좋은 기능을 갖추었지만 한국에 맞는 SNS를 추가할 방법이 없드라구요. 여러가지 꼼수를 다 동원해 보았지만 아이콘을 끌어오는 방법을 몰라서 결국 실패하고 말았습니다.

여기서 시도했던 방법은 잘 쓰지 않는 외국의 SNS를 카톡 등으로 대체하는 방법을 고민해 보았는데요. 작동까지는 제대로 변경했지만 아이콘을 대체 방법을 찾지 못했습니다. 이것만 할 수 있다면 문제가 다 풀릴텐데.. 많이 아쉬운 플러근인이죠..

2.3. Addthis Plugin 활용

다음으로 검토한 것은 Addthis라는 마케팅 솔류션입니다. 마케팅 소류션으로 표헌한 이유는 공유 버튼만 제공하는 게 아니라 이런 정보를 토대로 다양한 마케팅 활동을 지원하므로 이리 정의해 봤습니다.

Addthis는 CMS별로 접근 방법이 다른데요.
한국의 티스트리와 같은 일반 블로그는 사이트에서 설정한 후 제공 받은 코드를 사이트에 삽입해 쇼셜 공유 버튼을 구현하죠. 그리고 관련 통계를 Addthis,.com에서 확인할 수 있습니다.

워드프레스는 별도의 플러그인을 제공하고 있는데요. 이상하게 제 사이트에서는 UI가 깨집니다. 제대로된 UI가 나오는게 아니라 기능별 코드가 다 보입니다. 그래서 기능은 코드를 보고서 대략 설정을 할 수 있었습니다. 아마 제가 쓰는 테마와 충돌이 나지 않나 생각합니다..

그리고 Addthis 홈피에서 제공하고 있는 설명서는 2015년 버젼으로 현재와는 많이 다릅니다. 이를 보면 마케팅을 메인으로하는 업체답지 않습니다.

How to Install the AddThis Plugin in WordPress

▽ 2015년 버젼으로 설명하고 있는 AddThis site의 설명 영상

2.3.1. AddThis에 대한 간략한 평가

AddThis에서 제공하는 쇼셜 사이트는 매우 다양합니다. 여러 플러그인중에서 가장 많지 않을까 싶네요.

나중에 확인하니 최근의 많은 플러그인들이 이 정도의 사이트들은 기본으로 제공하고 있습니다. AddToAny, Sassy Social Share 등

공유 바튼 기능도 Floating, Inline, Expanding, Image Sharing, Popup, Banner, Slider로 정말 다양한 기능을 가지고 있습니다. 속도가 문제가 안된다면 다 적용해보고 싶을 정도죠.

디자인도 스타일, 버튼 사이즈, Rounded Corners, 컬러, 배경 컬러 등에서 다양한 옵션을 주고 있습니다. 다면 사용자가 원하는 컬렁 세팅하는 것은 유료 사용자로 제한하고 있습니다.

그렇지만 아쉽운 점도 많이 있습니다.

첫번째로 아쉽다고 생각되는 점은 앞에서도 이야기했지만 워드프레스 플러그인에서 UI가 깨지는 등 불정한 모습을 보인다는 점입니다. 다른 사용자들의 이야기를 보니 버젼 6으로 업데이트하면서 안정화되지 않아 문제를 일으키는 것으로 보입니다.

두번째로는 대부분 기능을 자바스크립트를 사용해서인지 상당히 으리다는 느낌입니다. 몇개 공유버튼 플러그인을 모두 활성화해 놓고 페이지를 띄우면 AddThis의 아이콘이 가장 늦게 뜹니다. AddThis, AddToAny, Monarch과 비교를 할 시…. 서버에서 아이콘을 가져오는 것은 AddThis나 Monarch이나 같은데 AddThis가 더 느린 것 같네요.

전체 로딩 속도 관점에서 AddThis는 그리 빠른 편은 아닌듯 싶습니다. 세개중에서 AddToAny가 가장 빠르고 AddThis 그리고 Monarch순으로 빠를기를 보였습니다. webpagetest 결과 기준..

세번째로는 뭐 자주 많이 사용하는 것은 아니지만 플러그인에서 세팅 시 무겁다는 느낌을 받습니다, AddThis 워드프레스 플러그인에서 세팅 작업을 할 시 모든 것은 AddThis 서버와 연동해서 작업을 해서인지 반응 속도도 느립니다. 인내심을 테스트하는 정도…

네번째로 웹에는 있는데 워드프레스 플러그인에는 없는 기능이 몇개 있는데 이게 상당히 불편하게 합니다.
예를 들어 Social Networks를 선택 시 순서 조절 기능이 플러그인에는 없습니다. 그래서 순서를 바꾸려면 처음부터 다시 선택을 해야하는 야만적인 상황이 발생합니다. 웹에서는 있던데…

또 웹에서는 Hide Networks Names 기능이 있어 아이콘만 보여주는게 가능한데 플러그인에는 없습니다. PC에서는 무조건 Ful Icon을 보여줍니다. 자동으로 모바일에서 아이콘만 보여줍니다.

그리고 PC에서는 모바일에서만 가능한 라인, 위쳇,SMS 같은 아이콘이 보이지 말았으면 하는데 이를 제어할 수 있는 옵션이 없는게 상당히 아쉬웠습니다.

2.3.2. 커스텀코드 적용 하기

위에서 많은 단점을 적었지만 그럼에도 불구하고 AddThis 워드프레스 플러그인은 커스텀코드를 적용해 등록되지 않은 Social Network, 예를 들어 네이버라든지 네이버 밴드 또는 카톡등등을 적용할 수 있습니다.

제가 테스트한 많은 플러그인중에서 카톡까지 완벽하게 추가할 수 있는 것은 이 AddThis가 유일했습니다.
단 이것도 Floating에서는 안되고 Inline에서만 가능합니다..

▽ AddThis 워드프레스 플러그인의 커스텀코드를 이용해 카톡을 추가한 모습

제가 적용한 카톡, 네이버, 네이버 밴드 공유버튼 추가 코드이오니 혹 필요하신 분은 참고하시기 바랍니다.

<style>
 .add1 {
  float:left; width:35px; height:35px; }
 .add2 {
  display:inline-block; width:35px; height:35px; margin-left:4px;}  
 .add3 {
  display:inline-block; width:35px; height:35px; margin-left:2px;}  
</style>

<body>
  <div class="add1">
      <script src="//developers.kakao.com/sdk/js/kakao.min.js">
      </script>
       <a id="kakao-link-btn" href="javascript:;">
       <img src="https://happist.com/files/sns/Kakao.png" width="32" height="32" border="0"/></a>
      <script type='text/javascript'>
              Kakao.init('카카오 개발자 계정에서 받은 Javascript 코드');
              Kakao.Link.createScrapButton({
              container: '#kakao-link-btn',
              requestUrl: document.URL
              });
      </script>
  </div>
  <div class="add2">
       <a href="#" onclick="javascript:window.open('http://share.naver.com/web/shareView.nhn?url=' +encodeURIComponent(document.URL)+'&title='+encodeURIComponent(document.title), 'naversharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=550,width=500');return false;" target="_blank" alt="Share on Naver" ><img alt="네이버로 보내기" src="https://happist.com/files/sns/Naver.png" width="32" height="32" border="0"/></a></div>
  <div class="add3">
       <a href="#" onclick="javascript:window.open('http://band.us/plugin/share?body=hello&route=https://happist.com', 'share_band', 'width=500, height=550, resizable=no');return false;" target="_blank" alt="Share on Band"> <img alt="밴드로 보내기" src="https://happist.com/files/sns/Band.png" width="32" height="32" border="0"/></a>
  </div>
</body>

2.4. AddToAny Plugin 활용

다음으로 검토한 것은 AddToAny인데요.

AddToAny Plugin도 예전부터 널리 알려진 플러그인입니다.
위에서 Monarch Plugin 설명시 인용했던 속도 BM결과에도 AddToAny가 언급됩니다. 그 BM에서는 AddToAny는 상대적으로 속도가 느린 것으로 나옵니다.

그러나 적어도 제 사이트에 적용해 테스트해 본 결과는 AddToAny가 훨씬 빨랐습니다.

2.4.1. AddToAny Plugin 장점

이 플러그인을 테스트해 보고 나름 장점이라고 생각되는 점들을 아래와 같이 정리해 보았습니다.

첫째 라인 및 카카오스토리 등이 포함되어 있고 글로벌로 굉장히 많은 Social Networs가 등록되어 있다는 점 이었습니다.

뭐 이는 Monarch를 제외하고는 AddThis도 가능합니다.

둘째는 AddToAny는 당연하게도 커스터마이징을 지원합니다. 이 기능중에서 가장 마음에 들었던 것은 일정 형식에 맞추어 Custom code를 입력하면 등록되지 않은 Social Networks를 추가할 수 있다는 점이었습니다. 예를 들어 네이버나 네이버 밴드같은 것.을 등록할 수 있죠..

다만 추가된 Social Networks는 메인 줄에 나오지 않고 +를 눌러야 나오므로 잘 모르는 사람은 카톡, 네이버, 밴드는 없는 것으로 착각할 수 있습니다. 커스텀 추가의 의미가 반감되는 경우이죠. 이점은 아쉬운 점 이었죠.

▽ AddToAny 플러그인에서 네이버, 네이버 밴드,카톡 추가한 모습,
이중에서 카톡은 아무리해도 아이콘은 나오는데 작동은 하지 않았다.

셋째는 디자인이 깔끔하다는 것 디자인에 대해서는 호불호가 다르기 때문에 단정할 수 는 없지만 AddToAny Plugin이 상대적으로 깔끔하다고 보았습니다.

넷째로는 AddToAny Plugin이 상대적으로 빠르다는 것입니다. 제가 AddToAny, Addthis, Monarch를 모두 테스트해 보았지만 AddToAny Plugin이 가장 빨랐습니다.

이미지가 10장이상 있는 페이지 기준으로 AddToAny가 5초대 초반, AddThis가 5초대 후반 그리고 Monarch가 6초대가나왔습니다.

2.4.2. Social Networks 커스터마이징 등록

앞에서 소개한 Social Networks 을 커스터마이징해서추가하는 방법에 대해서 조금 더 알아봅니다.

AddToAny는 Sharing Customization이라는 가이드를 통해서 아래와 같은 형식에 맞추어 신규 공유 버튼을 등록하라고 가이드 하고 있습니다.

즉

//var a2a_config = a2a_config || {};
a2a_config.custom_services = [
    ["Example dot com",
         "https://www.example.com/add?url=A2A_LINKURL_ENC&title=A2A_LINKNAME_ENC",
        "https://www.example.com/images/icon_32x32.png"
    ],
    ["Example dot net",
         "https://www.example.net/add?url=A2A_LINKURL_ENC&title=A2A_LINKNAME_ENC",
        "https://www.example.net/images/icon_32x32.png"
    ],
    ["Example dot org",
         "https://www.example.org/add?url=A2A_LINKURL_ENC&title=A2A_LINKNAME_ENC",
        "https://www.example.org/images/icon_32x32.png"
    ]
];

이에 따라 네이버(블로그 등)와 네이버 밴드관련 코드는 아래와 같이 정했습니다.

추가로 카톡을 추가하고 싶었지만 AddToAny에서는 속도를 위해 가능하면 자바스크립트를 사용하지 않은 것으로 보였습니다. 그러다보니 자바스크립트로만 되어있고 별도 URL을 제공하지 않는 카톡을 추가하기는 어렵워 결국 포기했습니다.

a2a_config.custom_services = [
  ["Naver",
    "http://share.naver.com/web/shareView.nhn?url=' +encodeURIComponent(document.URL)+'&title='+encodeURIComponent(document.title)",
    "https://happist.com/files/sns/Naver.png"
  ],
  ["Band",
    "http://www.band.us/plugin/share?body='+encodeURIComponent(title)+'%0A'+encodeURIComponent(href)",
    "https://happist.com/files/sns/Band.png"
  ],
];

3. 마치며

처음 시작하면서 생각했던 다섯가지 조건 즉 카운터가 있을 것, 분석 가능한 통계를 알 수 있을 것, 이쁜 디자인, 한국에서 많이 사용하는 SNS를 사용할 수 있을 것, 빠른 속도라는 조건을 완벽하게 충족하는 솔류션은 없는 것 같습니다.

그렇지만 앞에서 살펴본 매뉴얼 제작해서 사용하는 방법, Maonarch, AddThis, AddToAny 중에서는 그나마 AddThis가 원하는 것에 어느정도 가깝지 않나 판단됩니다.

AddThis는 카운터와 통계를 제공하고 커스터마이징을 통해서 국내 SNS를 등록 가능하고 디자인도 무난하다고 보여집니다.
다만 속도 측면에서 개선의 여지가 많이 있는데 좀더 사용해보고 판단해 봐야겠습니다.