본문으로 바로가기

안녕하세요. 오늘은 아주 쉽게 티스토리 블로그 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>


네이버 버튼은 최근 공유API가 변경되어서 버튼하나

블로그, 카페, 포스트, 폴라가 가능합니다


네이버 버튼에 관련된 자세한 사항은 아래 포스팅을 참고하세요.

http://cocosoft.kr/358 - [티스토리]네이버 공유 버튼 만들기(블로그,카페,포스트,폴라)



마지막으로 카카오톡 공유 버튼!!

카카오톡 버튼




카카오톡 공유 버튼을 만들기 위해서는 개인개발자등록(무료)를 한다음 개인 키를 발급받아야 합나디!!


아래 포스팅에 자세히 설명을 해놓았으니 해당 포스팅을 참고해주세요!!


http://cocosoft.kr/350 - [티스토리]카카오톡 공유 버튼 만들기(제목+썸네일+링크)



그럼 예쁘게 블로그 콘텐츠 공유 버튼을 만들어보시기 바랍니다!!

암튼 요즘 스킨 바꾼다고 여기저기서 소스코듭 붙혀넣기해서 정신이 없네요.

시간되면 하루날잡아서 스킨 처음부터 정리를 쭉해야겠습니다.



마지막!!! 흉내쟁이님의 CCZ-CROSS 스킨을 사용중이신 분들은

아이콘 폰트를 사용하시면 쉽게 표현이 가능합니다.


http://ccz-cross.tistory.com/28



신고

댓글을 달아 주세요

  1. BlogIcon SONYLOVE 2016.03.02 00:23 신고

    저도 처음에 코코님 블로그 왔다가 이거 보고 힌트를 얻어서 상단바에 버튼들 배치했었다는.. ㅎㅎ

    • BlogIcon COCOSOFT COCO Media 2016.03.02 01:22 신고

      저도 상단바에 아무것도 없는게 허전하더라구요 ㅎㅎ 소셜은 예전에 자주하고 안하지만 하나씩 늘려가다보니 예뻐서 뺏지 모우듯이 모아지네요. ㅎㅎ

  2. BlogIcon SONYLOVE 2016.03.02 16:56 신고

    비슷한걸 하나 달려고 했는데 지난번 아이콘 폰트 새로 만들면서 SNS 관련된건 안쓸거 같아서 다 삭제해버려서 아이콘 폰트가 없네요;; 그렇다고 다시 추가해서 만들기는 귀찮고 해서 그냥 콜메뉴? 에다 비슷한 아이콘 찾아서 박아버렸어요;;

    • BlogIcon COCOSOFT COCO Media 2016.03.02 18:29 신고

      저도 ㅠ 아이콘폰트 안쓰는 것들은 지우고싶은데 귀찮아서 나뒀어요 ㅠㅠ ㅋㅋㅋccz-cross.tistory.com 가니깐 아이콘폰트 원본 svg 파일이있어서 수정은 쉽게 되더라구요. ㅎㅎ 그런데 css까지 다시 수정해줘야하니ㅠㅠ그건 포기했어요 ㅎㅎ

  3. BlogIcon 베짱이 2016.03.03 13:25 신고

    코코님
    댓글에 소셜계정으로 로그인하여
    댓글을 작성하게 구현하는 건 좀 어려울까요?

    • BlogIcon COCOSOFT COCO Media 2016.03.03 15:36 신고

      현재 ㅠ 자기 입맛에 맞게 직접 ㅠ 구현하는 것은 힘들 것 같아요 API를 주물러야 하는데 ㅠ 아직 제가 그정도 능력은 되지않아서

      디스커스 댓글을 사용하면 그나마 좀빠르긴한데.. 카카오나 네이버 로그인이 없다는게 단점이죠 ㅠ

      디스커스라도 티스토리댓글과 왔다갔다 하면서 설치할수있는 방법을 찾아봐야겠습니다.

    • BlogIcon 베짱이 2016.03.03 15:47 신고

      솔직히
      네이버와 카카오가 국내에서는
      많이 사용하지요. 다음, 네이버, 카카오...
      거기다가 페이스북까지 합치면 최고일텐데.. ^^

  4. BlogIcon 당꿈응 2016.10.06 11:09 신고

    정말 정리 잘해주셨네요. 덕분에 잘 해결했습니다. 감사합니다 .^^

  5. BlogIcon Constantine B2 2016.10.23 16:14 신고

    제블로그에서 googleplus와kakao story가 이상하네요
    확인하신후 올려주세요

  6. BlogIcon BlogHub 2016.11.24 20:53 신고

    일부 게시글이 공유가 안돼요 ㅠㅠ

  7. BlogIcon SONYLOVE 2016.12.26 11:01 신고

    이제까지 공유 버튼 없이 했는데 갑자기 달고 싶어져 지금에서야 공유 버튼을 추가했어요.
    도움이 많이 되었습니다. ㅋㅋ

  8. BlogIcon JG MANAGER 2017.03.22 19:32 신고

    구글플로스는 작동을 안하는데요..ㅜ_ㅜ
    그냥 현재 페이지가 하나 더 열려요..

    수정 부탁드릴께요^^

  9. BlogIcon 알송달송IT 2017.07.22 18:54 신고

    감사히 잘 쓰겠습니다

티스토리 툴바