Social Share

Naver

참조 : https://developers.naver.com/docs/share/navershare/

<script>
function share() {
  var url = encodeURI(encodeURIComponent(myform.url.value));
  var title = encodeURI(myform.title.value);
  var shareURL = "https://share.naver.com/web/shareView?url=" + url + "&title=" + title;
  document.location = shareURL;
}
</script>

<input type="button" value="네이버공유하기" onclick="share()"/>

Facebook

<script>
function share() {
  var url = '[콘텐츠 URL]';
  var title = '[콘텐츠 Title]';
  var sns_url = 'http://www.facebook.com/sharer/sharer.php?u=' + url + '&title=' + title;
  window.open(sns_url);
}
</script>

Twitter

<script>
function share() {
  var url = '[콘텐츠 URL]';
  var title = '[콘텐츠 Title]';
  var sns_url = 'https://twitter.com/intent/tweet?text=' + url + ' ' + title;
  window.open(sns_url);
}
</script>

Telegram

<script>
function share() {
  var url = '[콘텐츠 URL]';
  var title = '[콘텐츠 Title]';
  var sns_url = 'https://telegram.me/share/url?url=' + url + '&text=' + title;
  window.open(sns_url);
}
</script>

Url to ClipBoard (url 카피)

<script>
function share() {
  var url = '[콘텐츠 URL]';
  navigator.clipboard.writeText(url).then(() => {
    alert('copy');
  });
}
</script>

Kakao

참조 : https://developers.kakao.com/tool/demo/message/kakaolink
카카오는 처리하기가 기존과는 사뭇 다르다.
먼저 카카오에서 제공하는 sdk 파일을 먼저 정의해 두어야 한다.

<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>
  Kakao.init('c089c8172def97eb00c07217cae17495'); // Enter your app's JavaScript key
</script>

JavaScript key 획득 방법

function kakaoShare(url, title, description, imageUrl) {
  Kakao.Share.sendDefault({
    objectType: 'feed',
    content: {
      title: title,
      description: description,
      imageUrl: imageUrl,
      link: {
        mobileWebUrl: url,
        webUrl: url,
      },
    }
  })
}

통합하여 처리

html part

<ul>
  <li onclick="share('kakao')">카카오</li>
  <li onclick="share('naver')">네이버</li>
  <li onclick="share('facebook')">페이스북</li>
  <li onclick="share('twitter')">트위트</li>
  <li onclick="share('link')">Link</li>
</ul>

javascript Part

function share(sns) {
  var url = window.location.href;
  // var title = encodeURI(document.querySelector('meta[name="title"]').content)
  // var description = encodeURI(document.querySelector('meta[name="description"]').content)
  var title = document.querySelector('meta[name="title"]').content
  var description = document.querySelector('meta[name="description"]').content
  switch(sns) {
    case 'kakao':
      kakaoShare(url, title, description);
      break;
    case 'naver':
      sns_url = "https://share.naver.com/web/shareView?url=" + encodeURIComponent(url) + "&title=" + title;
      window.open(sns_url);
      break;
    case 'facebook':
      sns_url = 'http://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(url) + '&title=' + title;
      window.open(sns_url);
      break;
    case 'twitter':
      sns_url = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(url) + ' ' + title;
      window.open(sns_url);
      break;
    case 'telegram':
      sns_url = 'https://telegram.me/share/url?url=' + encodeURIComponent(url) + '&text=' + title;
      window.open(sns_url);
      break;
    case 'link':
      // navigator.clipboard.writeText(encodeURIComponent(url)).then(() => {
      navigator.clipboard.writeText(url).then(() => {
        alert('copy');
      });
    }
}

function kakaoShare(url, title, description) {
  Kakao.Share.sendDefault({
    objectType: 'feed',
    content: {
      title: title,
      description: description,
      imageUrl: '[콘텐츠 이미지]',
      link: {
        mobileWebUrl: url,
        webUrl: url,
      },
    }
  })
}