WordPressにプラグインなしでSNSのシェアボタンを設置してみました。

どうもこんにちは。ブログの方も空いた時間にちょくちょく足りないところや機能を実装している最中です。今度はPJAXでも導入してみようかと思っています。
さて、今回はブログには必須と言っても過言ではないSNSのシェアボタンを実装する方法をご紹介します。

*Wordpress内での実装を想定しているため、他の場所では動きません。

必要な素材

・fontawesome アイコンで使用しています。
・はてなブックマークの画像 fontawesomeになかったのでこれだけ画像

基本的にコピペだけで動きますので(貼り付ける場所を間違えなければ。。。)、ぜひ活用してみてください。いろいろなプラグインでシェアボタンを入れることができると思いますが、自分で実装した方がデザインもブログに合わせることができるのでデザインにこだわる方は自ら実装した方がいいですね。
ただ、SNSシェアの使用が変わったりしたときは変更を加える必要があります。

サンプルコード

html

css

上記のhtmlコードをsingle.phpの入れたい箇所(僕の場合は記事の最初と最後に設置しました)に入れるだけで完了です。特にJavascriptを書く必要もなく設置できるのでコピペだけで完了します。

デザインはFacebookが提供しているデザインと同じにして統一感を出しています。
お好みで数を減らすこともできるので、わざわざプラグインを入れたくないという方にはぴったりだと思います。

特にシェア数を表示する必要を今は感じていないのでFacebook以外のシェア数を表示するようにはなっていません。今後SNSでのシェアが伸びてくるようであれば表記しようと思います。

では。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。