Jak dodać pływające przyciski udostępniania społecznościowego w witrynach Blogger i WordPress?

Opublikowany: 2023-03-14

Jako bloger lub właściciel witryny wiesz, jak ważne są media społecznościowe w generowaniu ruchu w Twojej witrynie. Ale jak możesz zachęcić swoich czytelników do udostępniania treści swoim obserwatorom?

Właśnie tam pojawiają się przyciski udostępniania społecznościowego!

Przyciski udostępniania w mediach społecznościowych pozwalają czytelnikom łatwo udostępniać Twoje treści na swoich kontach w mediach społecznościowych, zwiększając Twoją widoczność i zasięg. A jeśli chcesz pójść o krok dalej i jeszcze bardziej ułatwić swoim czytelnikom udostępnianie, możesz dodać do swojej witryny pływające przyciski udostępniania społecznościowego . Te przyciski podążają za czytelnikami, gdy przewijają stronę w dół, dzięki czemu udostępnianie jest bezproblemowe.

W tym artykule pokażemy, jak dodać pływające przyciski udostępniania społecznościowego do witryny Blogger lub WordPress, a także podzielimy się najlepszymi praktykami dotyczącymi ich efektywnego wykorzystania. Więc zacznijmy!

Przewodnik krok po kroku dotyczący dodawania pływających przycisków udostępniania społecznościowego w witrynach Bloggera

Aby dodać przyciski udostępniania społecznościowego w Bloggerze, musisz skopiować poniższy kod i wkleić go w sekcji treści swojej witryny. (Tuż przed zamknięciem tagu body )

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

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

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

Tutaj dodałem przyciski Facebook, Whatsapp, Pinterest i Linkedin w tym pływającym widgecie udostępniania społecznościowego.

Jak dodać więcej ikon w tym pływającym przycisku udostępniania

Załóżmy, że chcesz dodać więcej ikon, takich jak Telegram , a następnie musisz zmodyfikować każdy powyższy kod.

Możesz dodać kod HTML w ten sposób między nadrzędnym znacznikiem div. (Sprawdź pogrubiony tekst)

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

Tutaj dodaliśmy nazwę klasy „ telegram ” i zmieniliśmy kod SVG.

Teraz dodajmy również kod CSS dla telegramu.

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

Tutaj dodaliśmy kolor ikony telegramu.

Teraz musisz zmodyfikować kod Javascript, aby przycisk telegramu działał. (wielkość liter ma znaczenie)

 <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'); } funkcja shareOnTelegram() {
  var tytuł = dokument.tytuł;
  var url = okno.lokalizacja.href;
  var shareUrl = 'https://t.me/share/url?url=' + encodeURIComponent(url) + '&text=' + encodeURIComponent(tytuł);
  window.open(shareUrl, '', 'menubar=nie,toolbar=nie,resizable=yes,scrollbars=yes,height=300,width=600');
}
  
socialShareButtons.forEach(funkcja(przycisk) {
  button.addEventListener('klik', funkcja(zdarzenie) {
    zdarzenie.preventDefault();
    var typudziału = this.classList[0];
    przełącz (typ udziału) {
      sprawa „facebook”:
        Udostępnij na Facebooku();
        przerwa;
      sprawa „WhatsApp”:
        udostępnij naWhatsApp();
        przerwa;
      przypadek „pinterest”:
        udostępnij na Pinterest();
        przerwa;
      przypadek „linkedin”:
        shareOnLinkedIn();
        przerwa;
        
      sprawa „telegram”:
        udostępnij na telegramie();
        przerwa;
    }
  });
});
</script>

Załóżmy, że chcesz dodać przycisk e-mail, za pomocą którego możesz zmodyfikować kod js w ten sposób. Postępuj zgodnie z tym samym procesem dodawania kodu HTML i 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; }

Mam nadzieję, że zrozumiałeś, jak dodać więcej ikon udostępniania społecznościowego.

Jak dodać pływające przyciski udostępniania społecznościowego w Wordpress

W Wordpress kodowanie jest takie samo, jak omówiono powyżej. Możesz bezpośrednio wkleić kod nad znacznikiem </body> w pliku footer.php.

Lub możesz użyć wtyczki do zarządzania kodami, takiej jak Kod WP - Wstaw nagłówki i stopki.

Kod WP – Wstaw nagłówki i stopki

Wniosek

Podsumowując, dodanie pływających przycisków udostępniania społecznościowego do Twojej witryny może być prostym, ale skutecznym sposobem na zwiększenie obecności w mediach społecznościowych i zwiększenie ruchu w Twojej witrynie. Dzięki odpowiedniemu rozmieszczeniu i wyborowi platform przyciski udostępniania w mediach społecznościowych mogą pomóc Ci przenieść marketing treści na wyższy poziom.

Daj mi znać, jeśli napotkasz trudności podczas instalacji tego pływającego przycisku udostępniania społecznościowego na swoich witrynach Blogger i Wordpress.