나만의 SNS 공유 버튼을 만들다

웹 사이트에 SNS 공유 버튼을 만드는 방법이다. 웹 디자인과 어울리는 커스텀 이미지를 사용해서 버튼을 만들 수 있다. 누른 사람 숫자가 나오는 '좋아요' 버튼과는 다르다.

우선 버튼으로 사용할 이미지를 준비해야 한다.

그리고, HTML로 링크를 만든다.

<li><a href="" target="_blank><span>구글+</span></a></li>

또, CSS의 background-image 및 background-position 등을 적당히 사용해서 꾸며준다.

웹 디자인에 발이라도 담궈본 이라면 이 정도는 식은 죽 먹기이므로 자세한 설명은 생략한다. 위의 내용을 모르겠다면 먼저 HTML 및 CSS에 발부터 담그고 오기 바란다.

이 글에서 논하고자 하는 핵심은 각각의 SNS에 적절한 링크 주소 형식이다. 아래의 주소들을 링크의 href 속성에 지정하면 끝난다.

구글+

https://plus.google.com/share?url=[URL]

페이스북

http://www.facebook.com/sharer/sharer.php?u=[URL]&title=[TITLE]

트위터

https://twitter.com/intent/tweet?url=[URL]&text=[TITLE]

핀터레스트

http://pinterest.com/pin/create/bookmarklet/?media=[MEDIA]&url=[URL]&is_video=false&description=[TITLE]

링크드인

http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]&source=[SOURCE/DOMAIN]

에버노트

http://www.evernote.com/clip.action?url=[URL]&title=[TITLE]