SNS 공유하기 (카카오, 페이스북, 트위터)

📂 오픈 그래프와 트위터 카드

 

Html

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:image" content="/images/thumbnail.jpeg">
<meta property="og:url" content="">

<!-- Twitter Cards -->
<meta property="twitter:card" content="summary">
<meta property="twitter:site" content="">
<meta property="twitter:title" content="">
<meta property="twitter:description" content="">
<meta property="twitter:image" content="/images/thumbnail.jpeg">
<meta property="twitter:url" content="">

<!-- 공유하기 버튼 -->
<div class="share">
    <a class="share-icon share-kakao">
    	<img src="./images/icons/icon-kakao.png">
    </a>
    <a class="share-icon share-facebook">
    	<img src="./images/icons/icon-facebook.png">
    </a>
    <a class="share-icon share-twitter">
    	<img src="./images/icons/icon-twitter.png">
    </a>
    <a class="share-icon share-or-copy">
    	<img src="./images/icons/icon-url.png">
    </a>
</div>

 

📂 페이스북 및 트위터로 공유하기

const shareFacebookEl = document.querySelector(".share-facebook");
const shareTwitterEl = document.querySelector(".share-twitter");

/**
 * Twitter 공유 함수
 */
function shareTwitter() {
    let sendText = "";
    let sendUrl = ;
    window.open("https://twitter.com/intent/tweet?text=" + sendText + "&url=" + sendUrl ); //Twitter에 전송 정보 파라미터 삽입
}

/**
 * Facebook 공유 함수
 */
function shareFacebook() {
    let sendUrl = ;
    window.open("http://www.facebook.com/sharer/sharer.php?u=" + sendUrl); //Facebook에 전송 정보 파라미터 삽입
}

shareTwitterEl.addEventListener("click", function () {
    shareTwitter();
});

shareFacebookEl.addEventListener("click", function () {
    shareFacebook();
});

 

📂 카카오톡으로 공유하기

 

1. 앱 입력

Kakao Developers

2. 플랫폼 입력

3. 구현

 

Hmtl

<!-- KaKao -->
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

Javascript

Kakao.init("JavaScript 키");

Kakao.Link.createCustomButton({
    container: ".share-kakao", templateId: ID,
});