Follow Us:

WordPressにFacebookシェア等のボタンをオリジナルデザインでいれる

  •  更新日:

ワードプレスに、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の中に含まれます)に挿入します。
こちらの工期は約1日となりました。

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

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

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


関連タグ:

Wordpress ワードプレス ドクターBlog タグ一覧

© 2015-16. «WP Doctorワードプレスドクター». All right reserved.