Here's an easy and straightforward solution to add social share buttons to your WordPress site. This solution doesn't require any additional assets, all styles and icons are inline (SVG/CSS).
Using builtin Wordpress appearnce editor:
- Go to Templates > Single Posts
- Add a new block where you need to add sharing buttons, then copy-past the following code:
<div style="margin-left:auto;margin-right:auto;">
<!-- X Share Button -->
<div style=" cursor: pointer;display: inline-block; padding: 10px; margin: 5px; background-color: black; border-radius: 5px; color: white;" onclick="window.open('https://twitter.com/intent/tweet?url=' + window.location, '_blank')">
<svg xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle;" width="24" height="24" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 509.64"><path fill="#fff" fill-rule="nonzero" d="M323.74 148.35h36.12l-78.91 90.2 92.83 122.73h-72.69l-56.93-74.43-65.15 74.43h-36.14l84.4-96.47-89.05-116.46h74.53l51.46 68.04 59.53-68.04zm-12.68 191.31h20.02l-129.2-170.82H180.4l130.66 170.82z"/></svg>
</div>
<!-- LinkedIn Share Button -->
<div style=" cursor: pointer;display: inline-block; padding: 10px; margin: 5px; background-color: #0077B5; border-radius: 5px; color: white;" onclick="window.open('https://www.linkedin.com/shareArticle?mini=true&url=' + window.location, '_blank')">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="vertical-align: middle;">
<path d="M22.23 0H1.77C.79 0 0 .79 0 1.77v20.46C0 23.21.79 24 1.77 24h20.46c.98 0 1.77-.79 1.77-1.77V1.77C24 .79 23.21 0 22.23 0zM8.77 20.5H5.54V9h3.23v11.5zm-1.61-13a1.88 1.88 0 110-3.75 1.88 1.88 0 010 3.75zm14.34 13h-3.23v-5.65c0-1.35-.03-3.08-1.88-3.08-1.88 0-2.17 1.47-2.17 2.98v5.75H11.5V9h3.11v1.57h.04c.43-.82 1.49-1.69 3.07-1.69 3.29 0 3.89 2.17 3.89 4.99v6.63z"/>
</svg>
</div>
<div style="cursor: pointer;display: inline-block; padding: 10px; margin: 5px; background-color: #FFFFFF; border-radius: 5px; color: white;" onclick="window.open('https://mastodon.social/compose?text=' + encodeURIComponent(document.title) + '&url=' + encodeURIComponent(window.location), '_blank')">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 216.4144 232.00976" style="vertical-align: middle;">
<path fill="#2b90d9" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"/>
<path fill="#fff" d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675"/>
</svg>
</div>
<div style="cursor: pointer;display: inline-block; padding: 10px; margin: 5px; background-color: #fff; border-radius: 5px; color: #000;" onclick="window.open('https://steemit.com/compose?ref=&title=' + encodeURIComponent(document.title) + '&url=' + encodeURIComponent(window.location), '_blank')">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256" style="vertical-align: middle;">
<path fill="#333" d="M128 0C57.3 0 0 57.3 0 128s57.3 128 128 128 128-57.3 128-128-57.3-128-128-128zm94.7 189.3H33.3c-10.2 0-18.4-8.2-18.4-18.4v-57.1c0-10.2 8.2-18.4 18.4-18.4h91.4c10.2 0 18.4 8.2 18.4 18.4v57.1c0 10.2-8.2 18.4-18.4 18.4zM128 33.3c-22.1 0-40 17.9-40 40v57.1c0 22.1 17.9 40 40 40h91.4c22.1 0 40-17.9 40-40v-57.1c0-22.1-17.9-40-40-40h-91.4z"/>
</svg>
</div>
</div>Result is as follows:
Tip: to add more icons, just prompt your favourite A.I assistant, give it code above and ask it to add needed social network button.