SNS(트위터, 페이스북)로 홈페이지 URL 공유하는 방법(소셜 공유 샘플 코드)

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

홈페이지 내 특정 URL 공유 기능을 개발할 때가 있다.

이때 사람들이 많이 사용하는 트위터, 페이스북으로 URL을 공유하는 방법에 대해서

오늘은 설명해볼까 한다.

 

meta태그 설정하기

URL을 공유하게 되면 URL과 함께 대표적인 이미지, 타이틀, 세부 내용 등이 같이 보내는 것이 가능하다.

해당 정보를 담는 곳이 바로 meta 태그이다.

 

오픈그래프

meta 태그 중 오픈그래프는 HTML에 대한 정보를 담기 위한 프로토콜이다.

SNS 공유 시 게시될 때 해당 정보를 이용하기 때문에 공유를 위해서는

오픈그래프인 og 매타태그를 설정해줘야 한다. 

설정 방법은 아래와 같다.

<meta property='og:title', content= '공유될 Title 명'/>
<meta property='og:description', content= '공유될 URL 설명'/>
<meta property='og:type', content= 'website'/>
<meta property='og:url', content= '공유될 URL'/>
<meta property='og:image', content= '썸네일 이미지'/>

 

트위터 카드 속성

트위터의 경우는 meta태그를 twitter로 설정해야 된다.

트위터의 경우 card 속성이 이 있다.

사진위주일 경우 photo, 비디오의 경우 player, 요약정보인 카드 형태이면 summary로 지정한다.

<meta name='twitter:title', content= '공유될 Title 명'/>
<meta name='twitter:description', content= '공유될 URL 설명'/>
<meta name='twitter:card', content= 'summary 혹은 photo 혹은 player'/>
<meta name='twitter:url', content= '공유될 URL'/>
<meta name='twitter:image', content= '썸네일 이미지'/>

 

페이스북 URL 공유하기

페이스북에서 URL을 공유하는 링크가 제공되고 있다.

URL에 파라미터를 이용해서 링크 공유가 가능하다.

Javasript window.open을 이용해서 페이스북 공유할 새로운 팝업을 띄워서 해당 URL을 공유하는 방식이다

 

페이스북 공유 URL : http://www.facebook.com/sharer.php?u=공유할URL&t=공유URL타이틀

<script>
  function shareFacebook() {
      let url = encodeURIComponent('공유할url');
      let title = '공유될 url 타이틀';
      window.open(`http://www.facebook.com/sharer.php?u=${url}&t=${title}`, 'popup제목', 'width=400, height=400');
  }
</script>

 

트위터 URL 공유하기

트위터의 경우도 URL을 공유하는 링크가 마찬가지로 제공된다.

마찬가지로 URL에 파라미터를 던져줘야 한다.

 

트위터 공유 URL : https://twitter.com/intent/tweet?url=공유할URL&text=공유URL타이틀

<script>
  function shareTwitter() {
      let url = encodeURIComponent('공유할url');
      let title = '공유될 url 타이틀';
      window.open(`https://twitter.com/intent/tweet?url=${url}&text=${title}`,'popup제목', 'width=400, height=400');
  }
</script>