정지현

정지현

기술과 세상을 이어 소외된 사람들에게더 나은 환경을제공하고 싶은 개발자**

Tags

[음식기반 성격 유형] 페이지 SNS 공유

1 분 소요

결과 페이지에 SNS(페이스북, 카카오, 네이버) 공유하기 버튼 및 기능 추가

페이스북 공유

  • 페이스북의 경우 URL을 통해 공유하기 구현

    const shareFacebook = () => {
  const sendUrl = "전달 URL"
  window.open("http://www.facebook.com/sharer/sharer.php?u=" + sendUrl);
}

트위터 공유

  • 트위터의 경우 URL 통해 공유하기 구현

    const shareTwitter = () => {
  const sendText = "전달 Text";
  const sendUrl = "전달 URL"
  window.open("https://twitter.com/intent/tweet?text=" + sendText + "&url=" + sendUrl);
}

카카오 공유

  • 카카오의 경우 제공하는 API를 통해 공유하기 구현

  1. KaKaoDeveloper(https://developers.kakao.com/) 사용자 등록

    1. 로그인
    2. 내 애플리케이션 - 내 애플리케이션 추가하기 - 정보 입력 및 저장
    3. 만든 애플리케이션 설정 - 플랫폼 - Web 도메인 추가

  2. 소스 코드 작성

    • index.html
    <head>
  <!-- Kakao 제공 sdk 추가 -->
  <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
</head>
    • SNS.tsx
    // Index.html에 선언한 Kakao sdk를 인식하기 위한 코드
// Kakao global로 선언
declare global{
  interface Window{
    Kakao:any;
  }
}
// 선언한 Kakao를 해당 파일에서 사용하기 위해 Kakao 변수에 담음
const { Kakao } = window;
   
// UseEffect를 통한 Kakao객체 Key값으로 초기화 
useEffect(() =>{
    Kakao.init("Kakao developer에서 제공하는 Key값")
},[])
   
// Kakao 공유 코드
const shareKakao = () => {
  Kakao.Link.createDefaultButton({
    container: '카카오 버튼 ID(HTML)',
    objectType: 'feed',
    content: {
      title: "나의 음식 찾기",
      description: "당신의 음식 찾기 결과",
      imageUrl: "컨텐츠 URL",
      link: {
         mobileWebUrl: "#",
         webUrl: "#"
      }
    }
  });
}

참고