Blogger 및 WordPress 웹사이트에 플로팅 소셜 공유 버튼을 추가하는 방법은 무엇입니까?

블로거 또는 웹사이트 소유자는 사이트로 트래픽을 유도하는 데 있어 소셜 미디어의 중요성을 알고 있습니다. 그러나 독자가 팔로워와 콘텐츠를 공유하도록 어떻게 독려할 수 있습니까?

그것이 소셜 공유 버튼이 들어오는 곳입니다!

소셜 공유 버튼을 사용하면 독자가 자신의 소셜 미디어 계정에서 콘텐츠를 쉽게 공유하여 가시성과 도달 범위를 높일 수 있습니다. 그리고 한 단계 더 나아가 독자가 더 쉽게 공유할 수 있도록 하려면 플로팅 소셜 공유 버튼을 웹사이트에 추가할 수 있습니다. 이 버튼은 독자가 페이지를 아래로 스크롤할 때 따라가며 원활한 공유 경험을 제공합니다.

이 기사에서는 플로팅 소셜 공유 버튼을 Blogger 또는 WordPress 웹사이트에 추가하는 방법과 이를 효과적으로 사용하기 위한 몇 가지 모범 사례를 공유합니다. 자, 시작하겠습니다!

Blogger 웹사이트에 플로팅 소셜 공유 버튼을 추가하는 방법에 대한 단계별 가이드

Blogger에 소셜 공유 버튼을 추가하려면 아래 코드를 복사하여 웹사이트의 본문 섹션에 붙여넣어야 합니다. (body 태그를 닫기 직전)

HTML 코드

 <div class="social-share"> <a href="#" class="facebook"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.05,0H3.95A3.952,3.952,0,0,0,0,3.95V20.05A3.952,3.952,0,0,0,3.95,24H12.63V14.71H9.62v-3H12.63v-1.5c0-3.6,2.2-5.55,5.38-5.55a28.475,28.475,0,0,1,3.18.16v3L18.79,9c-1.7,0-2,.81-2,1.95v1.5h4.05l-.53,3.05H16.8V24H20.05A3.952,3.952,0,0,0,24,20.05V3.95A3.952,3.952,0,0,0,20.05,0Z"/></svg> </a> <a href="#" class="whatsapp"><svg viewBox="0 0 64 64"><path d="M6.9,48.4c-0.4,1.5-0.8,3.3-1.3,5.2c-0.7,2.9,1.9,5.6,4.8,4.8l5.1-1.3c1.7-0.4,3.5-0.2,5.1,0.5 c4.7,2.1,10,3,15.6,2.1c12.3-1.9,22-11.9,23.5-24.2C62,17.3,46.7,2,28.5,4.2C16.2,5.7,6.2,15.5,4.3,27.8c-0.8,5.6,0,10.9,2.1,15.6 C7.1,44.9,7.3,46.7,6.9,48.4z M21.3,19.8c0.6-0.5,1.4-0.9,1.8-0.9s2.3-0.2,2.9,1.2c0.6,1.4,2,4.7,2.1,5.1c0.2,0.3,0.3,0.7,0.1,1.2 c-0.2,0.5-0.3,0.7-0.7,1.1c-0.3,0.4-0.7,0.9-1,1.2c-0.3,0.3-0.7,0.7-0.3,1.4c0.4,0.7,1.8,2.9,3.8,4.7c2.6,2.3,4.9,3,5.5,3.4 c0.7,0.3,1.1,0.3,1.5-0.2c0.4-0.5,1.7-2,2.2-2.7c0.5-0.7,0.9-0.6,1.6-0.3c0.6,0.2,4,1.9,4.7,2.2c0.7,0.3,1.1,0.5,1.3,0.8 c0.2,0.3,0.2,1.7-0.4,3.2c-0.6,1.6-2.1,3.1-3.2,3.5c-1.3,0.5-2.8,0.7-9.3-1.9c-7-2.8-11.8-9.8-12.1-10.3c-0.3-0.5-2.8-3.7-2.8-7.1 C18.9,22.1,20.7,20.4,21.3,19.8z"></path></svg></a> <a href="#" class="pinterest"><svg viewBox="0 0 64 64"><path d="M14.4,53.8c2.4,2,6.1,0.6,6.8-2.4l0-0.1c0.4-1.8,2.4-10.2,3.2-13.7c0.2-0.9,0.2-1.8-0.1-2.7 C24.2,34,24,32.8,24,31.5c0-4.1,2.4-7.2,5.4-7.2c2.5,0,3.8,1.9,3.8,4.2c0,2.6-1.6,6.4-2.5,9.9c-0.7,3,1.5,5.4,4.4,5.4 c5.3,0,8.9-6.8,8.9-14.9c0-6.1-4.1-10.7-11.6-10.7c-8.5,0-13.8,6.3-13.8,13.4c0,2.4,0.7,4.2,1.8,5.5c0.5,0.6,0.6,0.9,0.4,1.6 c-0.1,0.5-0.4,1.8-0.6,2.2c-0.2,0.7-0.8,1-1.4,0.7c-3.9-1.6-5.7-5.9-5.7-10.7c0-8,6.7-17.5,20-17.5c10.7,0,17.7,7.7,17.7,16 c0,11-6.1,19.2-15.1,19.2c-1.9,0-3.8-0.7-5.2-1.6c-0.9-0.6-2.1-0.1-2.4,0.9c-0.5,1.9-1.1,4.3-1.3,4.9c-0.1,0.5-0.3,0.9-0.4,1.4 c-1,2.7,0.9,5.5,3.7,5.7c2.1,0.1,4.2,0,6.3-0.3c12.4-2,22.1-12.2,23.4-24.7C61.5,18.1,48.4,4,32,4C16.5,4,4,16.5,4,32 C4,40.8,8.1,48.6,14.4,53.8z"></path></svg></a> <a href="#" class="linkedin"><svg viewBox="0 0 64 64"><path d="M8,54.7C8,55.4,8.6,56,9.3,56h9.3c0.7,0,1.3-0.6,1.3-1.3V23.9c0-0.7-0.6-1.3-1.3-1.3H9.3 c-0.7,0-1.3,0.6-1.3,1.3V54.7z"></path><path d="M46.6,22.3c-4.5,0-7.7,1.8-9.4,3.7c-0.4,0.4-1.1,0.1-1.1-0.5l0-1.6c0-0.7-0.6-1.3-1.3-1.3h-9.4 c-0.7,0-1.3,0.6-1.3,1.3c0.1,5.7,0,25.4,0,30.7c0,0.7,0.6,1.3,1.3,1.3h9.5c0.7,0,1.3-0.6,1.3-1.3V37.9c0-1,0-2,0.3-2.7 c0.8-2,2.6-4.1,5.7-4.1c4.1,0,6,3.1,6,7.6v15.9c0,0.7,0.6,1.3,1.3,1.3h9.3c0.7,0,1.3-0.6,1.3-1.3V37.4C60,27.1,54.1,22.3,46.6,22.3 z"></path><path d="M13.9,18.9L13.9,18.9c3.8,0,6.1-2.4,6.1-5.4C19.9,10.3,17.7,8,14,8c-3.7,0-6,2.3-6,5.4 C8,16.5,10.3,18.9,13.9,18.9z"></path></svg></a> </div>

CSS 코드

 <style> .social-share{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:9999;}.social-share a{display:flex;justify-content:center;align-items:center;margin-bottom:10px;width:40px;height:40px;border-radius:50%;background-color:#fff;box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);transition:all 0.3s ease-in-out;}.social-share a:hover{transform:translateY(-5px);box-shadow:0 4px 8px rgba(0, 0, 0, 0.2);}.social-share a svg{width:20px;height:20px;fill:#555;vertical-align:middle;}.social-share a.facebook svg{fill:#3b5998;}.social-share a.whatsapp svg{fill:#25d366;}.social-share a.pinterest svg{fill:#bd081c;}.social-share a.linkedin svg{fill:#0077b5;}@media only screen and (max-width:600px){.social-share{display:none;}}</style>

자바스크립트 코드

 <script> var socialShareButtons = document.querySelectorAll('.social-share a'); function shareOnFacebook() { var title = document.title; var url = window.location.href; var shareUrl = 'https://www.facebook.com/sharer.php?u=' + encodeURIComponent(url) + '&t=' + encodeURIComponent(title); window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); } function shareOnWhatsApp() { var title = document.title; var url = window.location.href; var shareUrl = 'https://wa.me/?text=' + encodeURIComponent(title + ' ' + url); window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); } function shareOnPinterest() { var title = document.title; var url = window.location.href; var shareUrl = 'https://www.pinterest.com/pin/create/button/?url=' + encodeURIComponent(url) + '&media=&description=' + encodeURIComponent(title); window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); } function shareOnLinkedIn() { var title = document.title; var url = window.location.href; var shareUrl = 'https://www.linkedin.com/sharing/share-offsite/?url=' + encodeURIComponent(url) + '&title=' + encodeURIComponent(title); window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); } socialShareButtons.forEach(function(button) { button.addEventListener('click', function(event) { event.preventDefault(); var shareType = this.classList[0]; switch(shareType) { case 'facebook': shareOnFacebook(); break; case 'whatsapp': shareOnWhatsApp(); break; case 'pinterest': shareOnPinterest(); break; case 'linkedin': shareOnLinkedIn(); break; } }); }); </script>

여기에서는 이 플로팅 소셜 공유 위젯에 Facebook, Whatsapp, Pinterest 및 Linkedin 버튼을 추가했습니다.

이 플로팅 공유 버튼에 더 많은 아이콘을 추가하는 방법

Telegram 과 같은 더 많은 아이콘을 추가하려는 경우 위의 각 코드를 수정해야 한다고 가정합니다.

부모 div 태그 사이에 이와 같은 HTML 코드를 추가할 수 있습니다. (굵은 글씨 확인)

 <a href="#" class="telegram"><svg viewBox="0 0 64 64"><path d="M56.4,8.2l-51.2,20c-1.7,0.6-1.6,3,0.1,3.5l9.7,2.9c2.1,0.6,3.8,2.2,4.4,4.3l3.8,12.1c0.5,1.6,2.5,2.1,3.7,0.9 l5.2-5.3c0.9-0.9,2.2-1,3.2-0.3l11.5,8.4c1.6,1.2,3.9,0.3,4.3-1.7l8.7-41.8C60.4,9.1,58.4,7.4,56.4,8.2z M50,17.4L29.4,35.6 c-1.1,1-1.9,2.4-2,3.9c-0.2,1.5-2.3,1.7-2.8,0.3l-0.9-3c-0.7-2.2,0.2-4.5,2.1-5.7l23.5-14.6C49.9,16.1,50.5,16.9,50,17.4z"></path></svg></a>

여기에 클래스 이름 " 텔레그램 "을 추가하고 SVG 코드를 변경했습니다.

이제 텔레그램용 CSS 코드도 추가해 보겠습니다.

 .social-share a.telegram svg{fill:#0088cc;}

여기에 텔레그램 아이콘의 색상을 추가했습니다.

이제 텔레그램 버튼이 작동하도록 자바스크립트 코드를 수정해야 합니다. (대소문자 구분)

 <script> var socialShareButtons = document.querySelectorAll('.social-share a'); function shareOnFacebook() { var title = document.title; var url = window.location.href; var shareUrl = 'https://www.facebook.com/sharer.php?u=' + encodeURIComponent(url) + '&t=' + encodeURIComponent(title); window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); } function shareOnWhatsApp() { var title = document.title; var url = window.location.href; var shareUrl = 'https://wa.me/?text=' + encodeURIComponent(title + ' ' + url); window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); } function shareOnPinterest() { var title = document.title; var url = window.location.href; var shareUrl = 'https://www.pinterest.com/pin/create/button/?url=' + encodeURIComponent(url) + '&media=&description=' + encodeURIComponent(title); window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); } function shareOnLinkedIn() { var title = document.title; var url = window.location.href; var shareUrl = 'https://www.linkedin.com/sharing/share-offsite/?url=' + encodeURIComponent(url) + '&title=' + encodeURIComponent(title); window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); } function shareOnTelegram() { var title = document.title; var url = window.location.href; var shareUrl = 'https://www.linkedin.com/sharing/share-offsite/?url=' + encodeURIComponent(url) + '&title=' + encodeURIComponent(title); window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); } 함수 shareOnTelegram() {
  var 제목 = 문서.제목;
  var url = window.location.href;
  var shareUrl = 'https://t.me/share/url?url=' + encodeURIComponent(url) + '&text=' + encodeURIComponent(title);
  window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
}
  
socialShareButtons.forEach(기능(버튼) {
  button.addEventListener('클릭', function(event) {
    event.preventDefault();
    var shareType = this.classList[0];
    스위치(공유 유형) {
      케이스 '페이스북':
        shareOnFacebook();
        부서지다;
      케이스 'whatsapp':
        shareOnWhatsApp();
        부서지다;
      케이스 '핀터레스트':
        shareOnPinterest();
        부서지다;
      케이스 'linkedin':
        shareOnLinkedIn();
        부서지다;
        
      케이스 '전보':
        shareOnTelegram();
        부서지다;
    }
  });
});
</스크립트>

이와 같이 js 코드를 수정할 수 있는 이메일 버튼을 추가하고 싶다고 가정합니다. HTML 및 CSS 코드를 추가할 때도 동일한 프로세스를 따릅니다.

 function shareOnEmail() { var title = document.title; var url = window.location.href; var shareUrl = 'mailto:?subject=' + encodeURIComponent(title) + '&body=' + encodeURIComponent(url); window.location.href = shareUrl; }

더 많은 소셜 공유 아이콘을 추가하는 방법을 이해하셨기를 바랍니다.

Wordpress에서 플로팅 소셜 공유 버튼을 추가하는 방법

Wordpress에서 코딩은 위에서 설명한 것과 동일합니다. footer.php 파일의 </body> 태그 위에 코드를 직접 붙여넣을 수 있습니다.

또는 WP Code – Insert Headers and Footers와 같은 코드 관리자 플러그인을 사용할 수 있습니다.

결론

결론적으로 떠다니는 소셜 공유 버튼을 웹사이트에 추가하는 것은 간단하면서도 효과적인 방법으로 소셜 미디어에서의 인지도를 높이고 웹사이트에 더 많은 트래픽을 유도할 수 있습니다. 플랫폼을 올바르게 배치하고 선택하면 소셜 공유 버튼을 통해 콘텐츠 마케팅을 한 차원 높일 수 있습니다.

Blogger 및 Wordpress 웹사이트에 이 플로팅 소셜 공유 버튼을 설치하는 동안 어려움이 있으면 알려주세요.