소셜 공유 플러그인

탕비수다 스킨에서 제공하는 소셜 공유 서비스 가운데 카카오톡 서비스를 활성화하기 위해 사용자가 처리해야할 몇 가지 일들이 있습니다. 소셜 공유 설정은 HTML 영역 가운데 body 태크가 끝나는 곳에서 찾을 수 있습니다.

‘짤방’은 짤림방지의 줄임말입니다. 예전에는 이미지를 올리지 않으면 성의없는 글이라 생각했나 봅니다.

카카오톡 JavaScript 키 설정

카카오톡 링크 기능을 사용하기 위해서는 사용할 앱의 JavaScript 키 설정이 필요합니다. JavaScript 개발가이드 — Kakao Developers(https://developers.kakao.com/docs/js)을 통해 필요한 앱 JavaScript 키를 받을 수 있습니다. 발급 받은 앱 JavaScript 키를 'YOUR APP KEY'에 입력하세요. 앱 JavaScript 키는 플랫폼 웹에 등록되지 않은 웹사이트에서 사용하면 작동하지 않습니다. 

kakaoKey: 'YOUR APP KEY'

카카오톡 활성화

카카오톡 링크 기능에 필요한 앱 Javascript 키를 설정했다면, 카카오톡 활성화를 설정해 마무리합니다. 설정은 false를 true로 변경하면 됩니다. 기본적으로 카카오톡 링크 기능은 데스크 탑에서는 보이지 않습니다. 이는 카카오톡 링크가 모바일 기기에 설치된 앱을 구동하기 때문입니다.

kakaoActive: true

아이콘

소셜 아이콘 테마를 설정할 수 있습니다. 아직은 기본적으로 지원되는 아이콘 테마만 있습니다.

icon: 'default'

아이콘 정렬

가운데(center) 정렬과 왼쪽(left), 오른쪽(right) 정렬을 지원합니다.

align: 'right'

아이콘 크기

소셜 아이콘 크기(normal, small)를 설정할 수 있습니다.

size: 'small'

적용 예

<script type="text/javascript">
  var shareOptions = {
    icon: 'default',
    align: 'right',
    size: 'small',
    kakaoActive: true,
    kakaoKey: '20f35a251edc48dd282360dc9e384dfb'
  };
  $( '.share-bar-group' ).share( shareOptions );
</script>

예시에서 사용한 kakaoKey는 특정 사이트에서만 작동하기 때문에 그대로 사용하면 작동하지 않습니다. 반드시 카카오톡 JavaScript 키 설정을 통해 발급 받은 본인의 kakaoKey를 사용해야 합니다.

롤랑존

이미지를 활용해 다양한 기능을 제공하는 티스토리 반응형 스킨

    이미지 맵

    도구 다른 글

    댓글 5

      • 비밀댓글입니다

      • 안녕하세요.

        말씀하신 사항을 살펴봤는데요. 대부분의 소셜 공유 주소는 entry(문자주소) 방식이 아닌 key(숫자주소) 방식을 권고하고 있습니다.

        현재 사용 중인 방식이 권고 방식인 key 방식이 아닌 entry 방식으로 확인되었습니다. 아쉽게도 key 방식으로 변경하지 않으면 오동작이 발생할 수 있을 것 같습니다.

        감사합니다.

      • 덕분에 해결되었습니다...감사합니다.

    *

    *

    이전 글

    다음 글