テーマを自作する~その④~個別記事ページなどに設置するシェアボタンについて。

2016/08/22カスタマイズ, WordPress

どうも、リョウ(@ryskyshd)です。

今日は、前々から設置したかったFacebookやTwitterなどへのシェアボタンについてエントリーしたいと思います。

ちょうど先日、あかめさんの以下のエントリーをTLで知りました。

何てタイミングが良いのでしょう(笑)
丸ごと参考にさせていただきました。

最終形はこれ!

シェアボタンの種類は色々とありますが、私がやりたい最終形が以下の画像です。

share-button

ボタンの上にバルーンでシェア数の表示、利用するサービスはFacebook、Twitter、Google+、Pocket、はてなブックマークの5つでした。
あかめさんのエントリーではPocketの掲載がなかったのでPocketについては以下を参考にしました。

サイトに行ってバルーン形式を選択してコードをコピーするだけの超絶簡単な作業です。

これに加えてFeedlyのフォローボタンも入れ込みました。
こちらについては以下を参考にしました。

これでボタンのコードはゲットできたので、あとはテーマファイル「single.php」のボタンを置きたい箇所にコードを入力します。
私はひとつひとつをリストタグで囲みました。
見た目は横並びですが、性質上リストタグがしっくりくるのかなと。
ご参考までにこんな感じになりました。

プラスCSSで見た目を整えています。

これで皆さんにシェアしていただけるような体制がひとつできました。

最後に

いかがでしたでしょうか。
今回はバルーンを表示するタイプの大きめなボタンでしたが、細横長いアイコンのタイプもありますのでご自分のブログに合ったものを設置すると良いかと思います。
また、Feedlyについては以下のようなエントリーもありますのでご参考までに。

私はまずもう少し購読者数を増やせるよう中身の方を充実させていければなぁと考えていますのでまだ設置しません(笑)

スポンサーリンク