どうも7noteです。サイトにSNSのシェアボタンを掲載したいけど、テンプレートやプラグインのものはダサいので使いたくない方向け

Wordpressのプラグインなどを使うことで、SNSのシェアボタンを設置することは簡単にできます。しかし、そのプラグインに用意されているボタンのためサイトのデザインに合わないから変えたいと思う方もいるかもしれません。

フリー画像としてSNSのアイコはたくさん公開されているので、その画像を使ってオリジナルのシェアボタンをサイトに設置する方法を解説していきたいと思います。

手順① 画像を用意

「SNS アイコンフリー」等で検索すれば、著作権フリーのシェアボタンがたくさん出てきます。
サイトに使いたい画像を探します。

「オススメのSNSアイコンがあるサイト」
https://icon-rainbow.com/tag/sns/

※サービスによってはアイコンのガイドラインが決まっているものもありますので使用時には注意してください。（公式アイコンについてまとめているページ↓）
https://www.magical-remix.co.jp/magicalog/archives/3782

手順②URLを作成してimgタグとaタグを設置

Facebook

index.html

<a href="http://www.facebook.com/share.php?u={URL}" rel="nofollow" target="_blank"><img src="facebook.png" alt="facebookシェア" ></a>

{URL}の部分をシェアしてほしいURLに変更してください。

twitter

index.html

<a href="https://twitter.com/share?url={URL}" rel="nofollow" target="_blank"><img src="twitter.png" alt="twitterシェア" ></a>

{URL}の部分をシェアしてほしいURLに変更してください。
本文やタイトルも掲載する場合は以下のように設定が可能です。

<a href="https://twitter.com/share?
  url={URL}&
  via={Twitter ID}&
  related={Twitter ID}&
  hashtags={ハッシュタグ（半角スペースつなぎ）}&
  text={テキスト}" 
  rel="nofollow" 
  target="_blank"><img src="twitter.png" alt="twitterシェア" ></a>

LINE

index.html

<a href="https://social-plugins.line.me/lineit/share?url={URL}" rel="nofollow" target="_blank"><img src="line.png" alt="LINEで送る" ></a>

{URL}の部分をシェアしてほしいURLに、{URL}の部分をタイトルに変更してください。

はてなブックマーク

index.html

<a href="http://b.hatena.ne.jp/add?mode=confirm&url={URL}&title={タイトル}" rel="nofollow" target="_blank"><img src="hatebu.png" alt="はてぶシェア" ></a>

{URL}の部分をシェアしてほしいURLに、{URL}の部分をタイトルに変更してください。

他

FeedlyやPocketは以下のサイトでご確認ください。
https://webdesign-trends.net/entry/3632

まとめ

プラグインを使わなくてもコピペで簡単にシェアボタンを作成することができます。
ただシェア数を表示するなどはボタンの設置に比べると少し複雑になるのでphpなどのプログラミング言語を使う必要がでてきます。

ボタンだけならHTMLだけで簡単に作れるのでサイトやブログなどにオリジナルシェアボタンを設置してみてください。

アイコンは画像でなくても、アイコンフォントを使う方法もあります。
おすすめアイコンフォントはこちら↓

Font Awesome以外のアイコンフォントもあります↓
https://webdesign-trends.net/entry/11656

参考：
https://webdesign-trends.net/entry/11656
https://webdesign-trends.net/entry/3632

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ