Javascript/카카오톡 공유하기/카카오 링크 API

#VSCode #HTML #JS #Javascript #카카오톡 #공유 #share

프로젝트를 진행하면서 VSCode를 이용해 웹페이지를 구현하고있다.
그중 웹페이지를 카카오톡으로 공유하기 기능을 구현함에 있어서
여러 유튜브영상들과 카카오 디벨로퍼 홈페이지를 참고했다.

1. [youtube] js로 카카오톡 공유 메시지보내기
2. [youtube] 카카오톡 공유 기능 추가하기
3. [youtube] 코딩없이 SNS 공유 기능 만들기
4. [카카오 디벨로퍼] 공유기능

---

3번 링크의 경우, 매우 편리하다. 스크립트를 짤 필요가 전혀 없다. 디자인만 뚝딱 눌러주면 알아서 코드를 만들어주는 AI 같았다.
다만 내가 원하는 디자인대로 커스터마이징 할 수가 없을 것 같아서 배제하고 1,2,4 를 종합적으로 보며 제작해나갔다.

meta 태그에 og property 를 주고(content 의 경우 url만 신경써도 되었다.)

    <meta property="og:url"           content="https://내웹페이지주소/" />
    <meta property="og:title"         content="나의---?1" />
    <meta property="og:description"   content="이름으로 알아보는---" />
    <meta property="og:image"         content="/share/kakao/input.jpg" />

script 태그에 카카오 Javascript App key 를 주고
아래의 코드를 넣으면

function sendLink() {
            Kakao.Link.sendDefault({
                objectType: 'feed',
                content: {
                    title: '여긴 타이틀이라구?',
                    description: '관심 있는 당신',
                    imageUrl: './share/kakao/sea_.jpg',
                    link: {
                        mobileWebUrl: '모바일환경에서 공유받았을때, 연결될 주소',
                        webUrl: '웹 환경에서 공유받았을때, 연결될 주소'
                    },
                },
                buttons: [
                    {
                        title: '테스트 결과보기',
                        link: {
                            mobileWebUrl: '모바일환경에서 공유받았을때, 연결될 주소',
                            webUrl: '웹 환경에서 공유받았을때, 연결될 주소'
                        },
                    },
                ]
            });
        }

나의 경우,
반응형 웹앱페이지를 구현하고 있던터라 아래의 링크와 버튼링크 둘다 겹치는 부분이 있었다.
그런데 sendLink의 imageUrl을 저렇게 절대위치로 주면 적용이 안되더라!!😵

이 부분은 내가 참고했던 3가지 링크 중에서 주의사항에 없던 것으로 생각되는데...
끙끙 씨름하다가 결국 해결방법을 찾았다.
이미지링크를 따로 걸어줘야한다.
https://~~~~.jpg 나 https://~~~~.png 로 나오는 형태로 교체해주고 카카오톡 공유화면을 체크했더니

이미지가 잘 출력되는 모습을 볼 수 있었다.
생각해보니 카카오 디벨로퍼에서 레퍼런스를 참고할때, 이미지링크가 이미 https://~~~.jpg 형태였었는데 내가 간과한 부분이였다😱😱😱.
꼼꼼함이 재산이다. 나자신!