おはようございます、SABURO DESIGNのサブロー(@saburo_design)です。

ブログで書いた記事をツイッターやフェイスブック等のソーシャルメディアでシェアしてもらうためにシェアボタンを設置する人が増えています。パソコン慣れしている人はURLをコピペしてシェアしたりすることができますが、やはりボタン一個で簡単に記事をシェアできるようにしたほうが読者に親切です。

ワードプレスならWP Social Bookmarking Light等のプラグインで簡単にシェアボタンを記事の中に配置したりできますが、表示に一瞬のラグがあるのがどうしても気になってしまい、プラグインを使わず自分で作ることにしました。

コピペでできますので皆さんも使ってみてください。

設置するソーシャルメディアのシェアボタン

今回は以下ソーシャルメディアのシェアボタンを設置したいと思います。

  • Twitter
  • facebook
  • Google+
  • はてなブックマーク
  • pocket
  • LINE

『ツイッターカード』を設定しておくとツイッターでシェアされた時、見栄えが良くなります。今回の設定が終わった後にでも設定しておきましょう。

ワードプレスで記事を作成した時に拡散させるための手段としてツイッターを使用することが多いです。特にブログを運営したばかりの時はサイトへのアクセスも少なく、せっかく書いた記事を誰にも

記事のテンプレートファイル内にコピペ

記事のテンプレートの中に以下のコードをコピペしてください。

※LINE(ライン)に関しては、モバイルからなら現在のページをシェアすることが出来ますが、パソコン上からだと公式サイトに飛ぶだけのようです。

スタイルシート内にコピペ

このままだとただのリスト表示になっているので、下記のCSSをコピペしてレイアウトを整えます。

以上です。

シェア数を表示したい方は

この方法だとシェア数をカウントして表示することが出来ませんが、そこはプラグインを使って対応することが出来ます。詳しくは下記の記事をご参照下さい。

ワードプレスでソーシャルメディアのシェアボタンを表示させている方は多いのではないでしょうか。ブログの拡散目的でもシェアボタンは必ず導入しておきたいものですね。 ワードプレスな

まとめ

いかがでしたでしょうか?上記スタイルシートはパソコンだと1列で横並びですが、スマホなど小さな画面では2列になるようにしています。お好みでレイアウトを変えてみてください。