ワードプレスに、Facebookのシェアボタンをオリジナルデザインで挿入されたいとのご依頼を受けました。ここではその事例とボタンサンプルを公開いたします。

sharebutton

フラットボタンのCSSを作る

現在流行の、フラットボタンのCSSをご用意し、ボタンに適応させました。ボタンはレスポンシブルで、CSSのみでアイコンも表示しています。

シェアカウントを取得する

PHPでFacebookシェア、ツイート、Google+、はてなブックマーク、Pocketのシェア数を取得して、表示します。

例として、Facebookのシェア数を取得するコードは下記のようになります

    $url_encode=urlencode(get_permalink());
    
    $url = "http://api.facebook.com/restserver.php?method=links.getStats&urls=".$url_encode;
    $xml = file_get_contents($url);
    $xml = simplexml_load_string($xml);
    $shares = $xml->link_stat->share_count;

single.phpにコードを埋め込む

こちらのボタンを表示するコードを、ワードプレスの単一記事を表示しているコード、single.php（Themeの中に含まれます）に挿入します。
こちらの工期は約１日となりました。

結果は下記のようになります

シェアボタンの横にはカウントを表示し、またレスポンシブル対応です。（実際にこのページで動作しますのでご確認ください）

WordPressにFacebookのシェアボタンを導入するにはWPドクターにご依頼ください

関連記事:

  1. ワードプレスで数字付きページネーションを出力する方法
    ワードプレスには組み込みでページネーションを出力する関数があります。この関数を使いページネーションを出力する方法を解説いたします。...
  2. ワードプレスのプラグインを作成してみよう：ショートリンク生成プラグイン
    ワードプレスでプラグインを作る方法をこのページの右上に付いている、「ショートリンク生成機能」として実際に動作しているプログラムを全てコードも含めて公開いたします。 このプラグインは、ワードプレスのパーマリンクを使用すると長ったらしい日本語のリンクとなり、それはSEO効果があるのですがリンクをしたいユーザーにとってはリンクしづらいという問題点を解決する為に作成しました。 ショートリンクはワードプレスの基本URL表記方式　？p＝形式　で取得しています（このURLにアクセスするとワードプレスが自動でパーマリンクにリダイレクトしてくれます）。...
  3. 無料テーマ　WordPress 一分でSEO最適化されたブログやメディアが構築できるメディアスターターテーマをリリースしました
    ワードプレスドクターではより多数の方が、ハイクオリティーなブログやメディアを構築されたいと考えられていることから、最新のデザインと技術が詰まったテーマ(無料GPLバージョン、インストーラー付きPay What You...
  4. ContactForm7　コピペで1分で作れるスタイル付きおしゃれコンタクトフォーム
    コピペで1分で作れるスタイル付きおしゃれコンタクトフォーム 下記のコンタクトフォームコードをワードプレスの管理画面＞お問い合わせ＞新規追加　よりコピペで挿入されてみてください。 <style>...
  5. WordPress ワードプレスのログイン画面のロゴを変える方法
    ここではワードプレスのログイン画面のロゴをcssだけで変える簡単な方法をご紹介します。 ロゴをアップロードする まず、ログイン画面に表示したいロゴを管理画面の、メディア→新規追加よりアップロードします。話を簡単にする為に変えたいロゴのサイズは縦横ともに84pxにしてください。...