티스토리 SNS 공유버튼 설정 방법 가이드

티스토리 공유버튼은 플러그인 또는 커스텀 코드를 통해 손쉽게 추가할 수 있습니다. 기본 제공되는 '공유하기' 플러그인은 네이버, 카카오톡, 트위터, 페이스북 등 주요 SNS에 대응하며, HTML 편집을 통한 직접 삽입도 가능합니다.

하지만 모바일과 PC 화면에서 각각 어떻게 표시되는지, 위치 조정이나 스타일 변경은 어떻게 해야 할지 혼란스러운 분들이 많습니다.

티스토리 SNS 공유버튼 설정 방법 가이드

• 기본 플러그인과 커스텀 방식의 차이 이해
• 반응형 적용을 고려한 배치 설정 팁
• 네이버·카카오톡 등 주요 SNS 버튼 코드 제공

1. 티스토리 기본 공유버튼 설정 방법

티스토리 관리자 페이지에서 제공하는 플러그인을 활용하면 별도의 코딩 없이도 공유 버튼을 삽입할 수 있습니다. 특히 모바일 화면에 자동 최적화된 구성으로 초보자에게 적합합니다.

1) 플러그인 메뉴 접근하기

관리자 → 플러그인 → '공유하기' 플러그인을 찾아 활성화하세요. 게시물 하단에 자동 삽입됩니다. 별도 위치 조정은 불가능하지만, 간단하게 SNS 공유 기능을 추가할 수 있는 장점이 있습니다.

2) 지원 SNS 종류

현재 기준 플러그인으로 지원되는 SNS는 카카오톡, 페이스북, 트위터, 네이버, 밴드 등입니다. 버튼은 자동으로 아이콘 형식으로 표시되며, 각각 해당 앱/페이지로 연결됩니다.

3) 단점 및 한계

디자인 수정이 어렵고, 글 상단에 버튼을 넣고 싶을 경우 직접 HTML 편집이 필요합니다. 다양한 커스터마이징을 원한다면 직접 코드 삽입 방식을 고려해야 합니다.

2. 직접 SNS 공유버튼 삽입하는 방법

기존 플러그인이 부족하다고 느껴진다면, HTML에 직접 버튼 코드를 넣는 방식이 적합합니다. 이 방법은 위치, 크기, 디자인 등을 자유롭게 설정할 수 있습니다.

1) HTML 위치 편집

글쓰기 화면의 HTML 모드에서 아래와 같은 SNS 공유 버튼 코드를 원하는 위치에 삽입하면 됩니다. 일반적으로 본문 상단 또는 하단이 적당합니다.

2) 주요 SNS 공유 링크 코드

• 카카오톡 공유: Kakao SDK 사용 필요
• 트위터 공유: https://twitter.com/intent/tweet?url=[URL]
• 페이스북 공유: https://www.facebook.com/sharer/sharer.php?u=[URL]
• 네이버 공유: https://share.naver.com/web/shareView.nhn?url=[URL]

3) HTML 버튼 샘플 코드

<a href="https://www.facebook.com/sharer/sharer.php?u=YOUR_URL" target="_blank">
  <img src="https://imageURL/facebook.png" alt="페이스북 공유">
</a>

버튼 이미지 주소는 직접 업로드한 이미지 링크로 교체해야 하며, 버튼 배치는 CSS로 스타일 조정 가능합니다.

 

공동인증서 PC로 가져오기 전체 절차 정리

공동인증서 PC로 가져오기 전체 절차 정리

3. 반응형 대응을 위한 팁

공유버튼은 PC와 모바일에서 동시에 잘 보여야 합니다. 특히 티스토리는 반응형 스킨을 사용하는 경우가 많기 때문에, 버튼 크기나 간격을 vw, % 단위로 설정하는 것이 좋습니다.

1) CSS 예시

.sns-buttons img {
  width: 36px;
  margin: 5px;
  display: inline-block;
}

2) 가로 정렬 유지

버튼들이 한 줄에 나란히 배치되도록 하려면 display: flex 또는 text-align: center 속성 사용을 고려하세요.

3) 모바일 최적화 확인

작은 화면에서도 버튼이 눌리기 쉽게 설정되어 있는지 반드시 테스트해 봐야 합니다. 터치 간격을 40px 이상 확보하는 것이 권장됩니다.

방식	설정 난이도	커스터마이징	추천 대상
플러그인	매우 쉬움	불가능	초보자
직접 삽입	중간	자유로움	중급 이상

파워포인트 PPT 암호 설정과 해제 방법

파워포인트 PPT 암호 설정과 해제 방법

4. 사용자 후기 기반 팁

1) 플러그인 버튼이 너무 작을 때

CSS에서 확대는 불가하므로, 버튼 클릭률을 높이기 위해 본문 상단에 한 번 더 커스텀 버튼을 삽입하는 방식이 유용합니다. 중복 삽입이 오히려 클릭 유도에 효과적이라는 의견도 많습니다.

2) 카카오 공유가 안될 때

카카오 SDK 버전 문제이거나, 도메인 등록이 되지 않은 경우가 많습니다. JavaScript SDK 초기화 여부 확인과 카카오디벨로퍼 등록</strong 상태를 점검해 보세요.

3) 반응형 스킨에서 위치 어긋날 때

기존 스킨 CSS와 충돌 가능성이 있습니다. 커스텀 클래스명을 지정하거나, div 래핑으로 독립 구조를 만드는 방식이 가장 안정적입니다.

• 카카오, 네이버, 트위터 공유 가능 코드 제공
• 플러그인보다 유연한 커스텀 삽입 방법 안내
• 반응형 대응 CSS까지 포함된 실전 가이드

5. 자주 묻는 질문

Q. 티스토리에서 공유버튼 위치를 상단으로 바꿀 수 있나요?

기본 플러그인으로는 불가능하며, HTML 모드에서 직접 삽입하는 방식으로 상단 배치가 가능합니다.

Q. 카카오톡 공유 버튼이 작동하지 않아요.

Kakao SDK가 제대로 설정되지 않았거나 도메인이 등록되지 않은 경우입니다. 카카오디벨로퍼 등록 상태를 확인해 주세요.

Q. 모바일에서 공유버튼이 잘 보이지 않아요.

버튼 크기나 간격이 충분치 않은 경우입니다. CSS로 터치 최적화 스타일을 조정해 주세요.

Q. 버튼 클릭 시 팝업이 차단돼요.

브라우저 설정 또는 자바스크립트 구조의 문제입니다. 새 창으로 여는 target 속성 및 HTTPS 연결 상태를 확인해 보세요.

Q. SNS 링크를 어떻게 변경하나요?

직접 삽입하는 방식이라면 URL 부분만 교체하면 되며, 동적 공유를 원할 경우 JavaScript 사용이 필요합니다.