オリジナルデザインのSNSシェアボタンを作成する方法

SNSシェアボタンの作り方で悩んでいる人

SNSシェアボタンどうやってつくればいいんだ?
ボタンのデザインを自由に作成したいなぁ
公式ドキュメントとか見ずに、さくっと作れないかな?

今回はこんな悩みに答えていきます。

SNSのシェアボタンは、公式のボタンで作成することが多いですが、時々オリジナルのデザインでボタンを作成することがありますので、オリジナルのボタンで作成する方法を解説します。

公式ボタンでの作成はこちら(CodePen)

完成形のイメージ

See the Pen
SNSシェアボタン(オリジナルのボタン)
by shimpei (@shimpei)
on CodePen.

ボタンをクリックすると、そのページをシェアするやつです。

Facebookのシェアボタン

下記のテンプレをコピペして、URL部分にシェアしたいURLを入力します。

<a href="http://www.facebook.com/share.php?u=シェアしたいURLを入力する" target="_blank" class="sns-btn -fb">Facebook</a>

Facebookでシェアする

Twitterのシェアボタン

下記のテンプレをコピペして、URL部分にシェアしたいURLを入力します。

<a href="https://twitter.com/intent/tweet?url=シェアしたいURLを入力する target="_blank" class="sns-btn -tw">Twitter</a>

Twitterでシェアする

最後に

設置できましたでしょうか?
思っていたより簡単にできたのではないでしょうか。

最後まで読んで頂きありがとうございました。