SNSシェアボタンをHTMLとJavaScriptでつくる【Twitter/Facebook/LINE/hatena/pocket】

ブログやメディアサイトではほとんどが実装しているSNSシェアボタン。 公式のプラグインを使うと、簡単にシェアボタンを作成することができます。 しかし、デザインがプラットフォームによってバラバラであることや文言の調整が難しい点からスクラッチでつくりたいなーと思い、CSSで自由にカスタマイズ可能なHTML側のコピペ用SNSシェアボタンのコードをまとめてみました。 スクラッチでつくれば、統一したデザインでつくれるので、ぜひ参考にしていただければと思います。 SNS ボタンをスクラッチでつくる際の注意点 ボタンをつくってデザインを編集する際、一旦SNSのプラットフォーム側のブランドガイドラインを確認しましょう。 公式のブランドガイドラインには、アイコンを斜めにしてはいけない・視認性の悪い組み合わせにしない等のルールが書いてあります。 あと、現在開いているページのURLをシェアするにはJavaScr