カスタムできる！CSSとJavaScriptのシェアボタンスニペット9選

多くのサイトにおいて使われているソーシャル・ボタン。あまり注目されないかもしれませんが、Web上でシェアされるためにはきわめて重要なエレメントです。
しかし、デフォールトの状態が必ずしもサイトに適しているとはかぎりませんし、おおむねそれほど良いものでもありません。
そこで本記事では、シェアボタンをカスタムするのに役立つコード・スニペットを9つ集めました。
美しいシェア・ボタンを作りたいなら、きっと参考になるはずです。
（画像をクリックするとCodepenにとびます。）
 
なお、そもそもサイトにソーシャルメディアへのシェア機能をつけるテクニックやSNSマーケティングの組み立て方が知りたい方は、以下の記事を参考にしてください。
・WebサイトにSNSへのシェア機能をつける方法【Web Share APIを使用】
・SNSマーケティング戦略のポイント【今年はTwitterよりInstagramに注力すべき…？】
 
 
１．サイドシェアリング
人気ブログやマガジンサイトでよく見かけるソーシャルバッジのUIです。見出しのすぐ横に固定するか、ユーザのスクロールに合わせて動かすか選べます。デザインも安っぽくないのでレイアウトになじみやすく、バッジから始めてみたいという方におすすめです。
 
 
２．画像ボタン
もう一つ人気の共有スタイルが

リンク元