ソーシャルボタンをオリジナルデザインで実装

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));</script>

<a class="twitter-share-button"
href="https://twitter.com/intent/tweet"
data-text="custom share text"
data-url="https://dev.twitter.com/web/tweet-button"
data-hashtags="example,demo"
data-via="twitterdev"
data-related="twitterapi,twitter"
data-size="large"
>
Tweet
</a>

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v10.0" nonce="B4YYxJOq"></script>

<div class="fb-share-button" 
data-href="[シェアするURL]" 
data-layout="button_count" 
data-size="small">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=[シェアするURL（要エンコード）]" class="fb-xfbml-parse-ignore">シェア</a></div>

<iframe
src="https://www.facebook.com/plugins/share_button.php
?href=[シェアするURL（要エンコード）]
&layout=button_count
&size=small
&width=103
&height=20
&appId"
width="103" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" loading="lazy" ></iframe>

<a href="https://b.hatena.ne.jp/entry/" 
class="hatena-bookmark-button" 
data-hatena-bookmark-layout="basic-label-counter" 
data-hatena-bookmark-lang="ja" 
title="このエントリーをはてなブックマークに追加">
<img src="https://b.st-hatena.com/images/v4/public/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" />
</a>
<script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

<div class="line-it-button" data-lang="ja" data-ver="3" style="display: none;" 
data-type="share-a" 
data-url="https://social-plugins.line.me/ja/how_to_install" 
data-color="default" 
data-size="large" 
data-count="false" ></div>
<script src="https://www.line-website.com/social-plugins/js/thirdparty/loader.min.js" async="async" defer="defer"></script>

<a data-pocket-label="pocket" data-pocket-count="none" class="pocket-btn"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>

<iframe width="66" height="22" id="pocket-button-0" frameborder="0" allowtransparency="true" scrolling="NO" src="https://widgets.getpocket.com/v1/button?label=pocket&count=none&v=1&url=[URL（要エンコード）]" loading="lazy"></iframe>

const url = encodeURIComponent(location.href);

$url = rawurlencode( get_permalink() );

<a href="https://twitter.com/intent/tweet
?url=[URL（要エンコード）]
&via=sho_taiko
&related=sho_taiko
&hashtags=example%2Cdemo
&text=custom%20share%20text
">
<img src="" alt="">
</a>

<a href="https://www.facebook.com/sharer/sharer.php?u=[シェアするURL（要エンコード）]" target="_blank"><img src="" alt=""></a>

<a href="https://b.hatena.ne.jp/add?mode=confirm&url=[ブクマするURL]" target="_blank"><img src="" alt=""></a>

<a href="https://b.hatena.ne.jp/entry/s/[ブクマするURLのhttps://以下]" target="_blank"><img src="" alt=""></a>

<a href="https://social-plugins.line.me/lineit/share?url=[URL（要エンコード）]" target="_blank"><img src="" alt=""></a>

<a href="https://getpocket.com/edit?url=[URL（要エンコード）]" target="_blank"><img src="" alt=""></a>