프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[소스] 카카오 메세지 보내기 혹은 공유하기 버튼_02

2021.07.16
북마크 [출처 이동]    작성자 정보
첨부이미지(0/1)
카카오 메세지 보내기 혹은 공유하기 버튼

https://developers.kakao.com/
- 카카오 메세지 보내기 > 공유하기 버튼 보면 관련 샘플스크립트를 찾을 수 있다.
그중에서 자바스크립트 부분을 보면 되겠다.


01. 카카오에 개발자에 가입 로그인 후 앱만들기를 통해 우선 사용키를 발급 받고 사이트를 등록해야함. <<필요조건>>
-> http://www.relation.co.kr/html_board/board_view.php?par_no=5&no=178 여기참조


02.  기동하는 순서는 이미지 참조


03-1. 공유하기버튼( Kakao.Link.createDefaultButton(PARAMETER);
-> 웹페이지 소스 코드 중 카카로링크 고유하기 버튼을 띄우려는 위치에 KaKao.Link.createDefaultButton를 호출하도록 합니다. 이 함수는 해당위치에 카카오링크 공유하기 버튼을 추가하고, 해당 버튼을 클릭했을때 메세지 보내기를 요청합니다.
<a href="javascript:;" id="kakao-link-btn"> 
<!-- 버튼이 생기는 부분, id는 맘대로 쓰시되 아래 js 코드도 동일하게 적용해주셔야 합니다. -->
<img src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png" /> <!-- 톡 이미지 부분이고, 전 kakaolink_btn_small.png로 불러왔습니다.   -->
</a>
<script type="text/javascript">
  //<![CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    Kakao.Link.createDefaultButton({
      container: '#kakao-link-btn',  // 컨테이너는 아까 위에 버튼이 쓰여진 부분 id 
      objectType: 'feed',
      content: {  // 여기부터 실제 내용이 들어갑니다. 
        title: '딸기 치즈 케익', // 본문 제목
        description: '#케익 #딸기 #삼평동 #카페 #분위기 #소개팅',  // 본문 바로 아래 들어가는 영역?
        imageUrl: 'http://mud-kage.kakao.co.kr/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png', // 이미지
        link: {
          mobileWebUrl: 'https://developers.kakao.com',
          webUrl: 'https://developers.kakao.com'
        }
      }
    });
  //]]>
</script> 
데모보기1




03-2. 직접만든 버튼 사용하기 (Kako.Link.sendDefault(PAPMETER));
-> Kakao.Link.sendDefault 함수는 카카오링크 공유하기 버튼을 추가하지 않고, 메세지 보내기 요청만 합니다. 웹페이지 구성 요소중, 카카오링크 고유하기 버튼으로 사용할 버튼 크릭시 해당 함수를 호출하도록 하는 방법입니다.
데모보기2




04. content 입력값 
- title, description, imagesUrl, link{ moblieWebUrl , androidExecutionParams }



출처 : 
https://developers.kakao.com/
https://www.hahwul.com/2018/05/30/KakaoLinkshare/
 

이 포스트 공유하기

전체목록