티스토리 블로그를 운영하면서 페이스북, 카카오 스토리, 페이스북 공유는 있는데 가장 많이 사용되는 카카오톡 공유가 왜? 없는 것인지 모르겠네요.
다행스럽게도 구글에서 검색해 보니 간단하게 복사 몇 번이면 카카오톡을 비롯해서 네이버 카페, 밴드 등에 포스팅을 공유할 수 있는 코드가 있어서 SNS 아이콘 간격을 조금 조절해서 현재 사용하고 있는 미넴스킨에 적용했습니다.
- SNS 아이콘 업로드
- HTML HEAD 영역에 자바스크립트 코드 추가
- 티스토리 본문 출력 코드 위아래에 SNS 공유 코드 추가
✔ 미넴스킨 상단광고 2개를 포스팅 제목 위로 이동시키는 방법✔
미넴스킨 카카오톡 네이버 카페 밴드 공유 버튼 추가
구글에서 "티스토리 카톡 공유"라고 검색을 하면 다양한 내용이 나오는데 그중에는 카카오 API를 활용하는 것도 있지만, 간단하게 자바 스크립트로 된 버전이 있습니다.
그중에 하나를 골라서 다운로드하여서 적용해 보니 원형으로 된 SNS 아이콘의 간격이 너무 가깝고, 개인적으로 사각형으로 된 아이콘을 좋아하다 보니 아이콘 교체 및 간격을 조절하기 위해서 코드를 수정했습니다.
저의 경우에는 미넴스킨에 적용했지만 다른 스킨도 문제없이 사용할 수 있을 것이라고 생각이 되며 단순하게 복사 붙여 넣기 하면 되니 정말 쉬워요.
SNS 공유 버튼 추가 방법 1단계 - SNS 아이콘 업로드
현재 보고 있는 블로그에 적용된 SNS 아이콘을 무료로 사용할 수 있도록 공유해 준 원작자에게 감사드리며 아래에 있는 링크에 가시면 SVG 형태로 된 SNS 아이콘을 받을 수 있습니다.
SVG 형태의 아이콘을 사용하기 위해서 본문에 추가되는 코드에 아이콘 간격 및 아이콘 크기를 지정하는 코드를 추가했습니다.
- 아이콘 출처 : 그누보드 5 팁게시판
SNS아이콘 (SVG) > SIR
SNS 아이콘 묶음 입니다. <br/> <br/>개별 SVG 파일로 되어 있습니다. <br/> <br/> <br/> <br/>매번 찾아다니기 귀찮으시죠...ㅎ <br/> <br/>구글링을 덜어드릴게요. <br/> <br/> <br/> <br/>첨부파일 두번째꺼 zip
sir.kr
티스토리 관리페이지에서 [꾸미기] - [스킨편집] - [HTML]에 진입한 다음 [파일업로드]에서 사용할 SVG 형태의 SNS 아이콘들을 업로드하시면 됩니다.
SNS 공유 버튼 추가 2단계 - HTML HEAD 영역에 자바스크립트 추가
HTML HEAD 영역인 <head> ~ </head> 사이에 추가하는 자바스크립트 및 본문에 추가하는 코드는 구글 검색을 통해서 다운로드하였는데 원작자를 확인하기 어려워서 다운로드한 블로그의 주소를 남겨둘게요.
제가 다운로드한 블로그에서 원형으로 된 아이콘과 추가하는 코드를 사용해서 SNS 공유 버튼을 만드시거나 아래에 있는 변형된 코드와 사각 아이콘을 이용해서 만드시거나 선택해서 진행하시면 됩니다.
✔ HTML HEAD 영역에 추가하는 자바스크립트 코드를 받을 수 있습니다. ✔
SNS 공유 버튼 추가 3단계 - 본문 영역 위아래에 코드 추가
이제 마지막 단계인 포스팅 본문 위쪽과 아래쪽에 SNS 공유 기능이 출력되도록 코드를 추가하면 됩니다.
미넴스킨의 경우 아래에 있는 코드가 본문을 출력하는 코드이며, 이 코드 위, 아래에 SNS 공유 버튼을 추가하는 코드를 추가해 주면 됩니다.
✔ 사각 아이콘에 맞도록 수정한 본문 추가용 코드를 받을 수 있습니다. ✔
✔ 미넴스킨 본문에 적용되는 링크 스타일 변경 및 CSS 버튼을 추가하는 방법✔
맺음말
지금까지 사용하고 있는 미넴스킨 본문 위, 아래에 카카오톡을 비롯한 다양한 플랫폼으로 SNS 공유를 할 수 있는 버튼을 추가하는 방법에 대해서 알아보았습니다.
부족한 글이지만 끝까지 읽어주셔서 감사합니다. 다음에는 더 좋은 내용으로 뵙겠습니다.
출처 및 저작권 표시
자료 출처 : 그누보드 5 팁게시판 SNS 아이콘, 자바스크립트 코드 및 본문 추가 코드
저작권 표시
썸네일 디자인 : 미리캔버스에서 제작되었습니다.
본문 글꼴(폰트) : Google Noto Sans Korean - OFL(Open Font Licese)
'블로그' 카테고리의 다른 글
| 링크 현재창으로 열기 해주는 자바스크립트 코드 배포 - 애드센스 전면광고 (0) | 2023.09.20 |
|---|---|
| 티스토리 블로그 미넴 스킨 썸네일 포스팅 본문에 자동 출력 설정 (0) | 2023.09.10 |
| 미넴스킨 본문 링크 스타일 변경 및 CSS 버튼 추가 (0) | 2023.08.27 |
| 미넴스킨 상단광고 2개 블로그 포스팅 제목 위로 이동 (6) | 2023.08.27 |
| 티스토리 블로그 루트 도메인 접속 불가 해결방법 (2) | 2023.08.13 |
댓글