Bagaimana cara Menambahkan tombol berbagi sosial mengambang di situs web Blogger & WordPress?

Diterbitkan: 2023-03-14

Sebagai blogger atau pemilik situs web, Anda tahu pentingnya media sosial dalam mengarahkan lalu lintas ke situs Anda. Tapi, bagaimana Anda bisa mendorong pembaca Anda untuk membagikan konten Anda dengan pengikut mereka?

Di situlah tombol berbagi sosial masuk!

Tombol berbagi sosial memungkinkan pembaca Anda membagikan konten Anda dengan mudah di akun media sosial mereka, meningkatkan visibilitas dan jangkauan Anda. Dan, jika Anda ingin melangkah lebih jauh dan membuatnya lebih mudah bagi pembaca Anda untuk berbagi, Anda dapat menambahkan tombol berbagi sosial mengambang ke situs web Anda. Tombol-tombol ini mengikuti pembaca Anda saat mereka menggulir ke bawah halaman Anda, menjadikan berbagi pengalaman yang mulus.

Dalam artikel ini, kami akan menunjukkan cara menambahkan tombol berbagi sosial mengambang ke situs web Blogger atau WordPress Anda dan membagikan beberapa praktik terbaik untuk menggunakannya secara efektif. Jadi, mari kita mulai!

Panduan langkah demi langkah tentang cara menambahkan tombol berbagi sosial mengambang di situs web Blogger

Untuk menambahkan tombol berbagi sosial di Blogger, Anda perlu menyalin dan menempelkan kode di bawah ini ke bagian badan situs web Anda. (Tepat sebelum menutup tag body )

Kode 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>

kode 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>

Kode 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>

Di sini, saya telah menambahkan tombol Facebook, Whatsapp, Pinterest, dan Linkedin di widget berbagi sosial mengambang ini.

Cara Menambahkan Lebih Banyak Ikon di tombol Bagikan mengambang ini

Misalkan Anda ingin menambahkan lebih banyak ikon seperti Telegram maka Anda perlu memodifikasi setiap kode di atas.

Anda dapat menambahkan kode HTML seperti ini di antara tag div induk. (Periksa Teks Tebal)

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

Di sini, kami telah menambahkan nama kelas " telegram " dan mengubah kode SVG.

Sekarang mari tambahkan juga kode CSS untuk telegram.

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

Di sini, kami telah menambahkan warna ikon telegram.

Sekarang Anda perlu memodifikasi kode Javascript agar tombol telegram berfungsi. (hal - hal sensitif)

 <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'); } fungsi shareOnTelegram() {
  var judul = dokumen.judul;
  var url = jendela.lokasi.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(fungsi(tombol) {
  button.addEventListener('klik', function(event) {
    event.preventDefault();
    var ShareType = this.classList[0];
    beralih(shareType) {
      kasus 'facebook':
        bagikan di Facebook();
        merusak;
      kasus 'whatsapp':
        shareOnWhatsApp();
        merusak;
      kasus 'pinterest':
        shareOnPinterest();
        merusak;
      kasus 'linkedin':
        shareOnLinkedIn();
        merusak;
        
      kasus 'telegram':
        shareOnTelegram();
        merusak;
    }
  });
});
</skrip>

Misalkan Anda ingin menambahkan tombol email yang dapat Anda ubah kode jsnya seperti ini. Dan ikuti proses yang sama untuk menambahkan kode HTML & CSS juga.

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

Saya harap Anda mengerti bagaimana Anda dapat menambahkan lebih banyak ikon berbagi sosial.

Bagaimana cara menambahkan tombol berbagi sosial mengambang di Wordpress

Di Wordpress, pengkodeannya sama seperti yang dibahas di atas. Anda bisa langsung menempelkan kode tersebut di atas tag </body> pada file footer.php.

Atau Anda dapat menggunakan plugin pengelola kode seperti WP Code – Insert Headers and Footers.

Kesimpulan

Kesimpulannya, menambahkan tombol berbagi sosial mengambang ke situs web Anda dapat menjadi cara yang sederhana namun efektif untuk meningkatkan kehadiran media sosial Anda dan mendorong lebih banyak lalu lintas ke situs web Anda. Dengan penempatan dan pemilihan platform yang tepat, tombol berbagi sosial dapat membantu Anda meningkatkan pemasaran konten ke level selanjutnya.

Beri tahu saya jika Anda mengalami kesulitan selama pemasangan tombol berbagi sosial mengambang ini di situs web Blogger dan Wordpress Anda.