게시글 SNS로 공유 및 클립보드에 복사하기

웹 애플리케이션의 게시판에 올린 게시글을 공유해야 하는 경우가 있다. 홍보의 이유건, 공유의 이유건 요즘 SNS로의 공유 기능은 필수적인 것 같다.

다행히도 이런 기능을 SNS마다의 방법으로 제공하고 있는데, 공유 링크에 적절한 URL만 넣어주면 된다.

 

페이스북으로 공유하기

u 파라미터에 공유할 주소를 넣어주면 된다.

xxxxxxxxxx
// 공유 URL
http://www.facebook.com/sharer/sharer.php?u=게시글URL

그 외에 따로 지정하고싶은 것이 있으면 head 내 meta tag를 아래와 같이 지정해주면 된다.

x
<meta property="og:type" content="website" />
<meta property="og:title" content="제목" />
<meta property="og:url" content="게시글URL" />
<meta property="og:description" content="내용 설명" />
<meta property="og:image" content="이미지 경로" />

 

트위터로 공유하기

말 그대로 text에는 text, url에는 URL을 넣어주면 된다.

x
https://twitter.com/intent/tweet?text=공유시자동작성될내용&url=게시글URL

 

Google+ 로 공유하기

url에 URL만 넣어주면 된다. Google+는 이 외에 따로 지정해주는 것은 없다.

xxxxxxxxxx
https://plus.google.com/share?url=게시글URL

 

클립보드에 복사하기

게시글의 링크를 클립보드에 복사해 공유하게 할 수도 있는데, onclick 시 함수를 아래와 같이 지정해주면 된다.

val에 해당 URL을 넣어주면 된다.

x
function copyUrl(val) {
   var textArea = document.createElement("textarea");
   document.body.appendChild(textArea);
   textArea.value = val;
   textArea.select();
   
   document.execCommand('copy');
   document.body.removeChild(textArea);
   //console.log('copied on clipboard');
}

물론 공유 시 외에도 클립보드에 복사할 내용이 있을 때 사용하면 된다.

 

URL에 text 사용 시 주의할 점

URL에 text를 넣어줄 때 한글을 사용하거나 특수문자(특히 공백이나 엠퍼센트(&) 기호)를 사용하면, 크롬의 경우에는 자동으로 URL 변환을 시켜주기도 하지만 브라우저에 따라 구분자로 인식하여 오류가 나거나 할 수 있다.

그럴 때는 아래 함수를 사용해서 URL 사용에 적합한 텍스트로 변환해줄 수 있다.

xxxxxxxxxx
encodeURIComponent("사용할 텍스트 내용");

 

 

 

 

[예시 링크]

• 페이스북으로 공유하기
• 트위터로 공유하기
• google+로 공유하기
• 클립보드로 복사