카카오 공유하기 버튼을 이용한 간단한 예제 (for javascript+php)
카카오 공유하기 버튼을 이용한 간단한 예제 (for javascript+php)
REDINFO
약 1년전 2023-01-07 01:08:09

카카오 공유하기의 경우 거의 대다수 사이트에서 많이 볼 수 있으며 모바일에서는 웹 브라우저 기본 공유시에도 카카오톡 공유하기가 제공되기 때문에 상당히 많은 비중을 차지하고 있는것을 알 수 있다. 

 

다만 원하는 형태의 내용을 담아 공유하기 위해선 카카오 API 중 JS SDK 가 필요하다. (카카오 공유하기는 javascript 방식만 제공) 이번편에서는 카카오 공유하기에 대한 간단한 예제를 살펴보도록 하자. 참고로 중간에 PHP 소스가 있으니 원하는 방식을 참고하길 바란다. 

 

| 카카오톡 공유하기 공식 개발가이드 문서

 
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com/

 

카카오 공유하기의 경우 아래와 같은 소스코드로 간단하게 바로 테스트 해볼 수 있다. (아래 예제는 카카오 공유하기 예제소스를 참고 하였으며 소스코드 몇군데만 수정을 했다.)

 

JAVASCRIPT를  이용한 기본적인 방식
<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.1.0/kakao.min.js"
  integrity="sha384-dpu02ieKC6NUeKFoGMOKz6102CLEWi9+5RQjWSV0ikYSFFd8M3Wp2reIcquJOemx" crossorigin="anonymous"></script>
<a id="kakaotalk-sharing-btn" href="javascript:;">
  <img src="https://developers.kakao.com/assets/img/about/logos/kakaotalksharing/kakaotalk_sharing_btn_medium.png"
    alt="카카오톡 공유 보내기 버튼" />
</a>
<script>
  var kakaoShareData = {
    container: '#kakaotalk-sharing-btn',
    objectType: 'feed',
    content: {
      title: '딸기 치즈 케익',
      description: '#케익 #딸기 #삼평동 #카페 #분위기 #소개팅',
      imageUrl:
        'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
    social: {
      likeCount: 286,
      commentCount: 45,
      sharedCount: 845,
    },
    buttons: [
      {
        title: '웹으로 보기',
        link: {
          mobileWebUrl: 'https://developers.kakao.com',
          webUrl: 'https://developers.kakao.com',
        },
      },
      {
        title: '앱으로 보기',
        link: {
          mobileWebUrl: 'https://developers.kakao.com',
          webUrl: 'https://developers.kakao.com',
        },
      },
    ],
  };
  Kakao.init('카카오 developers > 내 애플리케이션 > 요약정보 > 앱키 > JavaScript 키'); // JavaScript 키
  Kakao.Share.createDefaultButton(kakaoShareData);
</script>

 

| 실행화면(PC)

 

너무 간단해서 예제라고하기엔 메리트가 없는면이 있어서 아래와 같이 이번엔 공유하기 옵션 객체들을 PHP로 처리해보았다. 

 

JAVASCRIPT 와 PHP를 이용한 방식 
<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.1.0/kakao.min.js"
  integrity="sha384-dpu02ieKC6NUeKFoGMOKz6102CLEWi9+5RQjWSV0ikYSFFd8M3Wp2reIcquJOemx" crossorigin="anonymous"></script>
<a id="kakaotalk-sharing-btn" href="javascript:;">
  <img src="https://developers.kakao.com/assets/img/about/logos/kakaotalksharing/kakaotalk_sharing_btn_medium.png"
    alt="카카오톡 공유 보내기 버튼" />
</a>
<?php 
  // 카카오 공유하기 옵션 데이터
  $kakaoShareData = array(
    'container'=>'#kakaotalk-sharing-btn',
    'objectType'=>'feed',
    'content'=>array(
      'title'=>'딸기 치즈 케익',
      'description'=>'#케익 #딸기 #삼평동 #카페 #분위기 #소개팅',
      'imageUrl'=>'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
      'link'=>array(
        'mobileWebUrl'=>'https://developers.kakao.com',
        'webUrl'=>'https://developers.kakao.com',
      ),
    ),
    'social'=>array(
      'likeCount'=>286,
      'commentCount'=>45,
      'sharedCount'=>845,
    ),
    'buttons'=>
    array(
      array(
        'title'=>'웹으로 보기',
        'link'=> array(
          'mobileWebUrl'=>'https://developers.kakao.com',
          'webUrl'=>'https://developers.kakao.com',
        )
      ),
      array(
        'title'=>'앱으로 보기',
        'link'=> array(
          'mobileWebUrl'=>'https://developers.kakao.com',
          'webUrl'=>'https://developers.kakao.com',
        )
      ),      
    ),
  );
?>
<script>
  Kakao.init('카카오 developers > 내 애플리케이션 > 요약정보 > 앱키 > JavaScript 키'); // JavaScript 키
  Kakao.Share.createDefaultButton(<?php echo json_encode($kakaoShareData) ?>);
</script>

 

위의 예제소스를 보면 객체에 들어갈 내용을 PHP로 처리한 부분을 볼 수 있다. PHP에선 배열을 json_encode() 함수를 사용하여 객체 String 으로 변경할 수 있기때문에 이를 잘 활용한다면 여러 데이터를 깔끔하게 PHP단에서 처리 후 스크립트에선 최소한의 PHP스크립트만 사용하여 처리할 수 있다. 

 

 

 

 

이 포스트글이 도움이 되었나요?
2
카테고리 연관글

Comment

댓글작성

0(500) | 1(30)