블로그스팟 모바일 공유 클릭률 2배 높이기! 하단 고정형 SNS 공유 바 제작 가이드

 

모바일 최적화! 6종 SNS 하단 고정 공유 바 제작 가이드

인스타그램, 스레드, 유튜브 등 다양한 채널을 운영하시나요? 화면 하단에 올인원 공유 바를 배치하면 독자가 내 다른 채널로 유입될 확률이 비약적으로 높아집니다. 엄지손가락 하나로 모든 채널을 연결해 보세요.

1단계: 모바일 전용 CSS 설정

📍 위치: [테마] → [맞춤설정] → [고급] → [CSS 추가]

버튼이 많아진 만큼 가독성을 위해 간격과 색상을 세밀하게 조정한 코드입니다. 그대로 복사해 넣으세요.

/* 모바일 전용 올인원 공유 바 */ @media screen and (max-width: 768px) { .mobile-all-share { position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; background: #fff; display: flex; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 9999; } .m-btn { flex: 1; display: flex; align-items: center; justify-content: center; color: #fff !important; text-decoration: none !important; font-size: 16px; font-weight: bold; } /* 각 SNS별 브랜드 컬러 */ .m-inst { background-color: #e1306c; } /* 인스타 */ .m-thrd { background-color: #000000; } /* 스레드 */ .m-ytub { background-color: #ff0000; } /* 유튜브 */ .m-fb { background-color: #3b5998; } /* 페이스북 */ .m-ka { background-color: #fee500; color: #3c1e1e !important; } /* 카톡 */ .m-copy { background-color: #333; } /* 링크복사 */ body { padding-bottom: 60px; } } @media screen and (min-width: 769px) { .mobile-all-share { display: none; } }

2단계: 내 채널 주소 넣기 (HTML)

📍 위치: [테마] → [HTML 편집] → </body> 태그 바로 위

아래 코드에서 강조된 색상 부분에 본인의 SNS 링크를 정확히 입력하세요.

<div class="mobile-all-share"> <!-- 1. 인스타그램 이동 --> <a href="https://www.instagram.com/내아이디" target="_blank" class="m-btn m-inst">IG</a> <!-- 2. 스레드(Threads) 이동 --> <a href="https://www.threads.net/@내아이디" target="_blank" class="m-btn m-thrd">Th</a> <!-- 3. 유튜브 채널 이동 --> <a href="https://www.youtube.com/@내채널주소" target="_blank" class="m-btn m-ytub">YT</a> <!-- 4. 페이스북 공유 --> <a href="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent('여기에 내 페이스북 페이지 링크 넣기'));" class="mobile-share-btn m-fb">f</a> <!-- 5. 카카오톡 공유 --> <a href="javascript:window.open('https://sharer.kakao.com/talk/friends/picker/link?url=' + encodeURIComponent('여기에 내 블로그 홈 주소 넣기'));" class="mobile-share-btn m-ka">K</a> <!-- 6. 링크 복사 (수정 불필요) --> <a href="javascript:void(0);" onclick="copyToClipboard();" class="m-btn m-copy">🔗</a> </div> <script> function copyToClipboard() { var dummy = document.createElement('input'), text = window.location.href; document.body.appendChild(dummy); dummy.value = text; dummy.select(); document.execCommand('copy'); document.body.removeChild(dummy); alert('링크가 복사되었습니다!'); } </script>

💡 채널 연결 팁
- 인스타그램, 스레드, 유튜브는 공유가 아닌 '내 채널로 이동'하는 링크입니다. 따라서 target="_blank"를 넣어 독자가 새 창에서 내 SNS를 볼 수 있게 했습니다.
- 페이스북과 카카오톡은 '현재 블로그 글을 공유'하는 기능입니다.

⚠️ 주의사항
버튼이 6개로 늘어났기 때문에 글자 수를 최소화(IG, Th, YT 등)했습니다. 만약 버튼이 너무 좁아 보인다면 필요 없는 버튼 코드를 삭제하여 개수를 조절해 보세요.

모바일 독자들이 여러분의 모든 소셜 채널을 한 번에 만날 수 있게 되었습니다!