[JavaScript] URL과 텍스트를 SNS(Facebook, Twitter, Pinterest) / Email(mailto) 로 공유

2021. 10. 18. 17:47

SNS(Facebook, Twitter, Pinterest)와 이메일(mailto)을 통해 URL 또는 글 등을 공유하는 방법

Facebook :

<a href="javascript:(function(){window.open('https://www.facebook.com/sharer.php?s=100&u=URL&quote=TEXT&hashtag=HASHTAG')})();">Facebook Share</a>

Twitter :

<a href="javascript:(function(){window.open('https://twitter.com/intent/tweet?url=URL&text=TEXT')})();">Twitter Share</a>

Pinterest :
<a href="javascript:(function(){window.open('https://www.pinterest.co.kr/pin/create/button/?url=URL&media=IMAGE URL')})();">Pinterest Share</a>

Email :

<a href="mailto:받는사람 이메일?cc=참조&bcc=비밀참조&subject=제목&body=메일 내용">Send email</a>

- 소스코드

/TEST/html/share.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SNS Share</title>
</head>
<body>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script type="text/javascript" src="../js/share.js"></script>

    <a href="" target="_blank" id="facebook">facebook Share</a><br>
    <a href="" target="_blank" id="twitter">twitter Share</a><br>
    <a href="" target="_blank" id="pinterest">pinterest Share</a><br>
    <a href="" target="_blank" id="mailto">email Share</a><br>
</body>
</html>

/TEST/js/share.js

window.onload = function(){
    const SHARE_URL = "https://coding-tool.tistory.com/";
    const SHARE_TEXT = "coding-tool blog";
    const HASHTAG = "%23web"; //해시태그는 %23 붙여줘야함
    const SHARE_IMG = "https://www.urbanbrush.net/web/wp-content/uploads/edd/2017/12/web-20171216234058563271-1560x1337.png";
    const BR_ = "%0D%0A"; //줄바꿈 상수

    $("#facebook").attr("href", "https://www.facebook.com/sharer.php?s=100&u="+SHARE_URL+"&quote="+SHARE_TEXT+BR_+"share text"+"&hashtag="+HASHTAG);
    $("#twitter").attr("href", "https://twitter.com/intent/tweet?url="+SHARE_URL+"&text="+SHARE_TEXT+BR_+HASHTAG+BR_);
    $("#pinterest").attr("href", "https://www.pinterest.co.kr/pin/create/button/?url="+SHARE_URL+BR_+"&media="+SHARE_IMG);
    $("#mailto").attr("href", "mailto:받는 사람@email.com?cc=참조@email.com&bcc=비밀참조@email.com&subject=제목&body=메일 내용");
}

- 결과