카카오톡 공유버튼 만들기
0. kakao developers 사이트에 접속한다
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
1. 상단 바의 내 애플리케이션 클릭 -> 애플리케이션 추가하기
2. 앱 이름, 회사명, 카테고리 입력
3.상단 바의 문서 -> 메시지
4.메세지- 이해하기 - 카카오톡 공유 -javascript 클릭
5. 직접 만든 버튼 사용 아래에 있는 예시 코드를 복사한 후 share.js라는 파일에 붙여넣기 한다.
6. 시작하기> javascript> 데모> JS SDK 데모 클릭
7. script src와 초기화를 위한 script kakao.init 코드( 1~5번째 줄)을 복사해
html에 붙여넣기 해준다.
8. 초기화 kakao.init안에는 내 아이디에 할당된 javascript 주소를 넣어야한다.
이를 확인하기 위해서, 다시 kakao developers로 돌아가서
9.내 애플리케이션 > 유진이의 toyproject
10. 앱 키> javascript키 복사해서 kakao.init('') 안에 넣어준다.
+ body 끝나기 전에 script src에 경로 넣는거 잊지 말기!★
<script src="./js/share.js"></script>
</div>
</body>
</html>
11. 플랫폼> web 플랫폼 등록
12. netlify에서 published한 website를 입력해준다
공유하기 버튼을 누르면 main 페이지로 공유된다.
test 결과 페이지를 공유해야 한다면?
:하위 결과페이지 html 파일을 각각 만든다. (나는 result-0.html 이런식으로 img숫자와 같게 입력)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<!-- 메타태그 수정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="yujincoding">
<meta name="keywords" content="십이간지 연애유형">
<meta name="description" content="십이간지 연애유형">
<!-- sns 카카오톡 공유하기 -->
<meta property="og.url" content="https://twelvelovetypee.netlify.app" />
<meta property="og.title" content="십이간지 연애유형" />
<meta property="og.type" content="website" />
<meta property="og.image" content="../img/share.png" />
<meta property="og.description" content="십이간지로 알아보는 연애유형" />
<!-- favicon -->
<link rel="shortcut icon" href="../img/heartfavicon.ico"/>
<link rel="apple-touch-icon-precomposed" href="img/heartfavicon.ico"/>
<title>십이간지 연애유형</title>
<!-- 부트스트랩에서 가지고 온 css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<!-- 구글폰트 입력 -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<!-- css파일 연결 , ,,은 상위 폴더에서 들어가도록.-->
<link rel="stylesheet" href="../css/default.css">
<link rel="stylesheet" href="../css/result.css">
</head>
<body>
<section id="shareresult" class="mx-auto my-5 py-5 px-3">
<h1>당신의 결과는?</h1>
<div class="resultname">
<!-- resultshare페이지는 javascript와 연계 안되어있으므로 data.js에서 하나씩 복붙 -->
<p>연애 뭐 식은 죽 먹기죠, 연애 재능 만땅 '쥐'</p>
</div>
<!-- 결과마다 이미지 값이 다른데 하나씩 입력 불가하므로 id 만들어주기 -->
<div id="resultImg" class="my-3 col-lg-6 col-md-8 col-sm-10 col-12 mx-auto">
<img src="../img/image-0.png" alt="0" class="img-fluid">
</div>
<div class="resultDesc">
<p>연애의 프로재능러인 당신! 쥐에 해당하는 당신은 연애의 모든 것들을 알고 있어, 쉽게 연애에 성공하는 스타일이랍니다. 주로 포부가 크고 성격이 낙천적인 성향을 가지고 있고, 논리적이면서 두뇌회전이 매우 빠르다고 할 수 있어요. 말재주 또한 좋아 사교성이 좋고 유쾌하지만 화려한 것을 좋아해 허영심을 부리거나 사치를 부리기 때문에 이 점들을 주의해야 돼요. 뛰어난 능력에 자만하는 경우도 종종 있기 때문에 겸손이 필요하답니다! </p>
</div>
<!-- 메인 페이지로 돌아가도록 script type해서 javascript넣기 -->
<script type = "text/javascript">
function movehome(){
location.href="/index.html";
}
</script>
<button type="button" class="gohome py-2 px-3 mt-3" onclick="js:movehome()">나도 참여하기</button>
</section>
</body>
</html>
저의 최종 결과입니다!^-^
https://twelvelovetypee.netlify.app/
십이간지 연애유형
십이간지로 알아보는 연애유형 나만의 MBTI 사이트입니다! 아래 시작하기 버튼을 눌러 시작해 주십시오. 시작하기
twelvelovetypee.netlify.app