카카오 공유하기 api 사용 방법 문의합니다

메시지 API
1

저희가 카카오 공유하기 기능을 구현하려고 하는데

스크립트 부분에

script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
script type="text/javascript">
  Kakao.init('에이피아이 부분'); // 초기화
  
   //기본 버튼 공유하기
   Kakao.Link.createDefaultButton({

    /* 버튼을 먹일 곳*/
      container : '#kakao-link-btn',

    /* 여기서 타입은 feed로 고정 */
      objectType: 'feed',

    /* 카드형 안에 들어갈 내용들 */
    content: {

      /* 당연히 제목 */
      title: '바나나!!!~~~~~',

      /* 당연히 설명 */
      description: '#내가 #테스트 #하는 #거야',

      /* 사진 주소 */
      imageUrl: 'https://images2.alphacoders.com/507/thumb-1920-507980.png',

      /* 사진을 눌렀을 때 이동 페이지(다르게 줄 수 있음) */
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: '유알엘'
      }
    },
    /* 각종(좋아요, 댓글수, 공유수, 열어본수, 구독수) */
    social: {
      likeCount: 1,
      commentCount: 2,
      sharedCount: 3,
      viewCount : 10000,
      subscriberCount : 1231241,
    },

    /* 버튼 생성 */
    buttons: [
      {
        /* 버튼 이름 */
        title: '웹으로 보기',

        /* 버튼 링크 */
        link: {
          mobileWebUrl: '유알엘',
          webUrl: '유알엘'
        }
      },
    ]
   });
   //]]>
</script

바디 부분에

a id="kakao-link-btn">
  img src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png" /
</a

이렇게 제작을 하였는데 실행이 되지 않습니다. 무엇이 문제일까요?

그리고 상세페이지를 구현하려고 하는데 각각의 상품의 이미지와 이름을 코드에 어떻게 작성해야 하는지 궁금합니다.
./resources/images/room/${ Camplist.CAMPLIST_ID}_1.jpg 제 생각에는 이런식으로 EL 처리를 하면 될 것이라 생각했는데
되지 않아서 질문 남깁니다.

2

안녕하세요~

첨부 하신 코드를 실행해보면 아래와 같이 에러가 발생하는데요.

{name: "KakaoError", message: "container is required for KakaoTalk Link: pass in element or id"}

<a id="kakao-link-btn">

태그 보다 스크립트가 먼저 실행되어 해당 객체를 찾을 수 없는 상황입니다.
태그 보다 아래 스크립트를 위치 시켜 주시면 정상 작동 될 거예요~

3

답글 감사드립니다.
우선 말씀해주신대로 수정해서 실행에 성공했습니다.

지금 title: 과 description: 에는 EL 표현식을 사용해서 상세페이지 마다의 이름과 내용을 불러오는 것은 성공하였습니다.

제가 하려고 하는 것은 공유메시지를 눌렀을 때 해당 상세페이지로 이동하는 것인데,
현재 공유된 페이지를 누르면 url에 localhost:포트번호 만 나오고 페이지에 아무것도 뜨지 않습니다.
스크립트 안에 link: 와 imageUrl: 에 어떤 식으로 작성을 해야하는지 궁금합니다.

하나 걸리는 것은 제가 이미지를 서버에 처리하지 않고 CSS 폴더의 img 폴더 안에 저장하여 EL로 불러오는 방식을 하였는데,
서버에 처리하지 않아서 이미지 경로를 불러오지 못하는 것인지 궁금합니다.

4

안녕하세요~

설정된 경로로 이동하기 위해서는 아래 설정에 해당 도메인이 등록되어 있어야합니다.

"내 애플리케이션>앱 설정>플랫폼 : 사이트 도메인"

등록되어 있지 않은 경우 해당 설정의 첫번째 링크로 이동하게됩니다~

5

사이트 도메인은 localhost로 설정되어있는 상태였습니다.
혹시 콜백함수와 관련되어 있는 걸까요?

6

콜백과는 무관합니다. 전송후 카카오에서 소유하신 사이트를 따로 호출하는 개념이라서요.

다만, 설정하신 URL을 확일할 필요가 있을 것 같은데요.

몇가지 설정된 URL 예시를 알 수 있을까요?

7

imageUrl: ‘https://localhost:포트번호/img/${상품명}.jpg’,

link: {
mobileWebUrl: ‘https://localhost:포트번호/프로젝트명/유알엘패턴’,
webUrl: ‘https://localhost:포트번호/프로젝트명/유알엘패턴’
}

이런 형식으로 작성했습니다.
모바일 화면에서 확인했을 때 이미지가 전송되지 않고,
url에는 localhost, 네트워크 연결 상태가 좋지 않습니다.
창이 나오는 상태입니다.

8

localhost로 주소를 설정 하셨기 때문에 외부에서 접속할 방법이 없으므로 그렇게 메시지가 표시됩니다.

도메인을 외부에서 접근 가능하신걸로 변경하시면, 잘 표시될 거예요~

1개의 좋아요