WordPress にシンプルなソーシャルボタンを設置する

やりたいこと

  • WordPress ブログに Twitter とかのソーシャルボタンを設置したい。
  • 最低限、Twitter、Facebook、はてブ、Feedly ボタンを設置したい。
  • デザインはフラットなシンプル系が良い。
  • ボタン上に Twitter とかのアイコンも表示したい。
  • でも画像使ったりめんどいのはヤダ。
  • ボタン上に ソーシャルカウントも表示したい。

神サイト

設置方法

  1. style.css の編集

  2. ソーシャルボタンを設置したい場所に以下を追加

  • feedly ボタンソースの YOURSITE.JP は自分のサイト URL へ

これだけで、Twitter、Facebook、はてブ、Pocket、Feedly のボタンが設置される。

まじ素敵。

ソーシャルカウントを表示する

  1. WordPress の SNS Count Cache プラグインをインストールして有効化するだけで、ボタンの右下にソーシャルカウントが表示される。

  2. はてブ、Pocket、Feedly はカウントがゼロの場合空白になるので、HTML に貼り付けたソースを若干編集する(該当箇所にゼロを追加する)。

はてブのゼロ表示

<修正前>

<修正後>

Pocket のゼロ表示

<修正前>

<修正後>

Feedly のゼロ表示

<修正前>

<修正後>

アイコンをつける

  • 上記コードは Font Awesome を利用してアイコンが付けられるようになっている。

アイコンのつけ方(CDN)

  1. 以下を <head></head> 内に記述するだけでボタンにアイコンが表示される。

アイコンのつけ方(自分で設置)

  1. Font Awesome をダウンロード & 解凍
  2. 解凍されたファイルをテーマフォルダ内へ移動
  3. <head>&lt/head> の中に以下を追加。

    • パスは適時要修正。

はてブアイコン(っぽいもの)をつける

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">