twitterの共有ボタンが重いので自作する

twitterのアカウント共有ボタン

　が重いです。
　これはツイッターの公式ウィジェットですが、これは中身を見てみると

<a href="https://twitter.com/PKST_puyo2?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @PKST_puyo2</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

　となっています。ただのボタンなのにいちいちスクリプトを読み込んでいるため遅く感じます。

　なので自作しました。

/********************/
/*twitterのボタン*/
/********************/
.twitter_btn{/*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 12px;/*角丸に*/
  position: relative;
  display: inline-block;
  height: 20px;/*高さ*/
  width: 220px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 12px;/*文字のサイズ*/
  line-height: 20px;/*高さと合わせる*/
  background-color: #1D9BF0;
  text-decoration:none;/*下線は消す*/
}

.twitter_btn .fa-twitter {/*アイコン*/
  font-size: 12px;/*アイコンサイズ*/
  position: relative;
  right: 2px;
}

.twitter_btn span {
  position: relative;
}

.twitter_btn:hover{
  color: #FFF;
  background-color: #0C7ABF;
}

<a href="https://twitter.com/PKST_puyo2" class="twitter_btn"><i class="fab fa-twitter"></i><span>@PKST_puyo2さんをフォロー</span></a>

できたボタンはこんな感じ。

@PKST_puyo2さんをフォロー

　並べると

Follow @PKST_puyo2
@PKST_puyo2さんをフォロー

　上が公式、下が自作です。そこそこ似ていると思います。

　シンプルですが結構有効でした。実際PageSpeedInsightsを見てみると、公式の共有ボタンでは出ていた『使用していないJavaScriptの削減』の項目が消えました。

公式のやつはこれが出ていたけど消えた。

　同じ状況の人は試してみるといいかもしれません。

　この記事だけだと説明不足感があるので、場合によっては以下も参考にしてください。