จะเพิ่มปุ่มแบ่งปันทางสังคมแบบลอยตัวในเว็บไซต์ Blogger & WordPress ได้อย่างไร

ในฐานะบล็อกเกอร์หรือเจ้าของเว็บไซต์ คุณทราบดีถึงความสำคัญของโซเชียลมีเดียในการเพิ่มการเข้าชมไซต์ของคุณ แต่คุณจะกระตุ้นให้ผู้อ่านแบ่งปันเนื้อหาของคุณกับผู้ติดตามได้อย่างไร

นั่นคือที่มาของปุ่มแชร์โซเชียล!

ปุ่มแบ่งปันทางสังคมช่วยให้ผู้อ่านของคุณสามารถแบ่งปันเนื้อหาของคุณบนบัญชีสื่อสังคมของพวกเขาได้อย่างง่ายดาย เพิ่มการมองเห็นและการเข้าถึงของคุณ และถ้าคุณต้องการก้าวไปอีกขั้นและทำให้ผู้อ่านแชร์ได้ง่ายขึ้น คุณสามารถเพิ่ม ปุ่มแชร์โซเชียลแบบลอย ไปที่เว็บไซต์ของคุณ ปุ่มเหล่านี้ติดตามผู้อ่านของคุณเมื่อพวกเขาเลื่อนหน้าลงมา ทำให้แบ่งปันประสบการณ์ได้อย่างราบรื่น

ในบทความนี้ เราจะแสดงวิธีเพิ่มปุ่มแบ่งปันทางสังคมแบบลอยไปยังเว็บไซต์ Blogger หรือ WordPress ของคุณและแบ่งปันแนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้งานอย่างมีประสิทธิภาพ เริ่มกันเลย!

คำแนะนำทีละขั้นตอนเกี่ยวกับวิธีเพิ่มปุ่มแชร์โซเชียลแบบลอยในเว็บไซต์ Blogger

หากต้องการเพิ่มปุ่มแบ่งปันทางสังคมในบล็อกเกอร์ คุณต้องคัดลอกและวางโค้ดด้านล่างลงในส่วนเนื้อหาของเว็บไซต์ของคุณ (ก่อนปิดแท็กร่างกาย )

รหัส 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>

รหัส Javascript

 <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 คุณต้องแก้ไขแต่ละรหัสด้านบน

คุณสามารถเพิ่มโค้ด HTML แบบนี้ระหว่างแท็ก div พาเรนต์ (ตรวจสอบข้อความตัวหนา)

 <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;}

ที่นี่ เราได้เพิ่มสีของไอคอนโทรเลข

ตอนนี้คุณต้องแก้ไขรหัส Javascript เพื่อให้ปุ่มโทรเลขใช้งานได้ (กรณีที่สำคัญ)

 <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 = document.title;
  var url = window.location.href;
  var shareUrl = 'https://t.me/share/url?url=' + encodeURIComponent(url) + '&text=' + encodeURIComponent(ชื่อเรื่อง);
  window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
}
  
socialShareButtons.forEach (ฟังก์ชัน (ปุ่ม) {
  button.addEventListener ('คลิก' ฟังก์ชัน (เหตุการณ์) {
    เหตุการณ์.preventDefault();
    var shareType = this.classList[0];
    สวิตช์ (แชร์ประเภท) {
      กรณี 'facebook':
        แชร์บน Facebook();
        หยุดพัก;
      กรณี 'Whatsapp':
        แชร์บน WhatsApp();
        หยุดพัก;
      กรณี 'pinterest':
        shareOnPinterest();
        หยุดพัก;
      กรณี 'linkedin':
        shareOnLinkedIn();
        หยุดพัก;
        
      กรณี 'โทรเลข':
        shareOnTelegram();
        หยุดพัก;
    }
  });
});
</script>

สมมติว่าคุณต้องการเพิ่มปุ่มอีเมลที่คุณสามารถแก้ไขโค้ด 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 การเข้ารหัสจะเหมือนกับที่กล่าวไว้ข้างต้น คุณสามารถวางโค้ดด้านบนแท็ก </body> ในไฟล์ footer.php ได้โดยตรง

หรือคุณสามารถใช้ปลั๊กอินตัวจัดการโค้ด เช่น รหัส WP – แทรกส่วนหัวและส่วนท้าย

บทสรุป

โดยสรุปแล้ว การเพิ่มปุ่มโซเชียลแชร์แบบลอยลงในเว็บไซต์ของคุณอาจเป็นวิธีง่ายๆ แต่ได้ผลดีในการเพิ่มการแสดงตัวตนบนโซเชียลมีเดียของคุณ และเพิ่มการเข้าชมเว็บไซต์ของคุณ ด้วยตำแหน่งที่เหมาะสมและการเลือกแพลตฟอร์ม ปุ่มแบ่งปันทางสังคมสามารถช่วยคุณยกระดับการตลาดเนื้อหาของคุณไปอีกขั้น

แจ้งให้เราทราบหากคุณประสบปัญหาใดๆ ระหว่างการติดตั้งปุ่มแบ่งปันทางสังคมแบบลอยนี้ในเว็บไซต์ Blogger และ Wordpress ของคุณ