티스토리 블로그 SNS 공유버튼 직접 달기(공유 소스 API URL, 쉬움주의)

안녕하세요. 오늘은 아주 쉽게 티스토리 블로그 SNS 공유버튼을 아주 간단하게 만들어 보겠습니다.

제 블로그 상단 헤더 부분에 존재하는 것들이죠!

예전에 하나씩 공유 버튼 다는법 포스팅을 했는데 이번엔 총정리!! 카카오톡까지!

Addthis와 같은 플러그인들로 만들 수 있지만(X) 외부스크립트파일이고

또 네이버나 카카오스토리는 없고!! 또 버튼 모양이나 배치를 원하는 곳에 할 수 없기 때문에!!

직접 아주 간단하게 만들어보겠습니다.

인트로-사전지식(크게 중요하지 않아요)

간단하게 사전지식이 필요로 합니다.

encodeURIComponent() 이라는 자바스크립트의 인코딩 함수를 사용할 것입니다.

한글 인코딩에 관련된 자세한 내용은 아래 해당 포스트를 읽어보세요

http://d2.naver.com/helloworld/76650 - 한글 인코딩의 이해 2편

그리고 문자셋

http://webdir.tistory.com/39 - 문자셋 UTF-8과 EUC-KR

사실 저도 다읽어봤지만 무슨말인지 모르겠습니다.

대충 알듯하면서도 모르는 그런 느낌..

이것을 알면 뀂뉎뺏뛬 같은 단어만 아니면 간단하게 브라우저 검색만으로도

한글의 인코딩된 문자를 알 수 있습니다.

나중에 문자열을 추가해서 자기만의 맞춤형 메세지를 작성할 때 유용할 수 있습니다

몰라도 버튼 다는데는 아무런 문제가 없습니다!!!!!!!!!!!!!!!!!!!!!!!!

서론이 길었고 이제는

본격적으로 시작해보자

각각의 코드를 공개해두었으니 본인이 부착하고 싶은 HTML 위치에 부착하면 됩니다!!

사용하기 편하게 팝업창 크기 조절까지 일일히 다해놓았습니다!!

트위터부터 시작 하겠습니다. 어렵지는 않았는데 가장 오래 걸렸던 트위터 버튼 ㅠ

링크쉐어주소를 사용하니 불필요한 문자열(@님이공유같은)등이 나타나서

그냥 일반 트윗날리는 주소를 사용해서 공유버튼을 만들었습니다. 깔끔!

위에 설명드린 한글 인코딩 문자열을 추가해서 본인만의 문구를 넣을 수도 있습니다.

버튼은 예시로 만들어 놓은 것이니 본인이 알아서 자기 버튼을 만들면됩니다!!

트위터 버튼


<a href="#" onclick="javascript:window.open('https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20'
+encodeURIComponent(document.URL)+'%20-%20'+encodeURIComponent(document.title), 'twittersharedialog',
 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank"
 alt="Share on Twitter" ><img src="./images/트위터.png">트위터버튼</a>

트위터버튼

완성된 예시

클릭 해보시면 앞부분에 [공유] 문자열이 보일겁니다.

URL에 [%EA%B3%B5%EC%9C%A0]%20 이부분을 추가 해나서 그런 것입니다.

본인이 수정하고 싶으시거나 추가로 넣고 싶은 문자열이 앞뒤로 넣어서 사용하시면 됩니다.

암튼 트위터는 문자열 수정한다고 가장 삽질을 많이 했다는... 자체 플러그인도 뜯어보고.. 휴..

페이스북 버튼


<a href="#" onclick="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u='
+encodeURIComponent(document.URL)+'&t='+encodeURIComponent(document.title), 'facebooksharedialog',
 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank"
 alt="Share on Facebook" ><img src="./images/페이스북.png">페이스북버튼</a>

페이스북버튼

구글플러스 버튼


<a href="#" onclick="javascript:window.open('https://plus.google.com/share?url='
+encodeURIComponent(document.URL), 'googleplussharedialog','menubar=no,toolbar=no,resizable=yes,
scrollbars=yes,height=350,width=600');return false;" target="_blank" alt="Share on Google+">
<img src="./images/구글플러스.png">구글플러스버튼</a>

구글플러스버튼

많이는 하지 않는 버튼이지만.. 그래도 ㅎㅎ 혹시나 하시는분들도 계셔서!!

카카오스토리 버튼


<a href="#" onclick="javascript:window.open('https://story.kakao.com/s/share?url='
+encodeURIComponent(document.URL), 'kakaostorysharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,
height=400,width=600');return false;" target="_blank" alt="Share on kakaostory">
<img src="./images/카스.png">카카오스토리버튼</a>

카카오스토리버튼

이것도 오늘 포스팅 정리하면서 공유URL 찾아서 방금 만들어본 뜨끈뜨끈한 것입니다.

카스도 점점 하는 사람들이 많아지길 기대합니다. ㅠ_ㅠ 우측 상단에 채널 구독하기 에서 카카오스토리 채널을 구독해주세요!!

네이버 버튼


<a href="#" onclick="javascript:window.open('http://share.naver.com/web/shareView.nhn?url='
+encodeURIComponent(document.URL)+'&title='+encodeURIComponent(document.title),
 'naversharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" 
target="_blank" alt="Share on Naver" ><img src="./images/네이버.png">네이버버튼</a>

네이버버튼