jQueryでシェア数を取得し表示を高速化!WordPressに自作バルーンボタンを作成する全手順まとめ

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

ソーシャルサービス固有のシェアのボタンって表示が重たいと感じる時はないでしょうか?

特にFacebookのボタンとか。シェアボタンが表示されないので、それ以降のページが表示されないなんてことも結構あります。

今回は、そんな不満を解消すべく、JavaScriptのAjaxを使用した自作のバルーンボタンの作り方を紹介したいと思います。非同期処理を使用することで、ページが読み込まれてからシェア数を取得しに行くので、ページ表示スピードが体感的にかなり速くなります。

最終目標はこんなボタンになります。

sns

今回は、これまでいろいろ調べてきたことのまとめの記事となり、コピペで使えるようになっています。ですので、コードに書かれている中身とかは深く考えず、コピペに専念すれば、10分もかからずにカスタマイズできるのではないかと思います。

photo by Trevor Bexon

スポンサーリンク
レクタングル(大)広告

自作バルーンボタン作成の主な手順

自作ボタンの作成に必要となる主な手順は以下です。

  1. アイコンフォントファイルなどの準備
  2. 必要なライブラリファイルの呼び出し(コピペ)
  3. JavaScriptファイルの作成(コピペ)
  4. functions.phpファイルに関数の追加(コピペ)
  5. ボタン用テンプレートファイルの作成(コピペ)
  6. バルーンシェアボタンのスタイル設定(コピペ)
  7. header.phpファイルからJavaScriptの関数を呼び出す(コピペ)

とこんな感じになります。ほとんどコピペなので、カスタマイズはそこまで難しくないと思います。

一応どんなテーマにもカスタマイズ出来るので、今回は「Twenty Ten」テーマに取り付けてみたいと思います。

アイコンフォントファイルの準備

まずは、シェアボタンに各種ソーシャルボタンのアイコンを表示させたいので、アイコンファイルをダウンロードします。

まずは以下から、アイコンフォントファイルをダウンロードして解凍してください。

作成されたicomoonフォルダを、テーマファイルフォルダ直下にコピペしてください。

必要なライブラリファイルの呼び出し

次に、header.phpの<head></head>内に必要なライブラリファイルを呼び出します。

今回、Font Awesomeと、jQueryは、WEB上にホストされたものを使用しましたが、ダウンロードしてローカルから呼び出してもOKです。

JavaScriptファイルの作成

今回は、バルーンボタンの吹き出し部分にjQueryのAjaxにより非同期でシェア数を読み込みます。

そのためのJavaScript関数をjavascript.jsファイルに作成します。(ファイル名は何でも良いです。テーマに最初からあるファイルと名前がかぶる場合は変更してください。)

2015年11月にTwitterのツイート数取得APIは廃止されました。ですので、以下のTwitterツイート数取得関数では、ツイート数は取得できません。ツイート数を取得するには、以下の方法などを試してみてください。

参考 jQueryとcount.jsoonを用いてTwitterのシェア数を取得するWordpressカスタマイズ方法

※2016年8月19日のFacebookの仕様変更に対応

作成したファイルは、テーマファイル直下に置いてください。

これらの関数の詳細は、以下の記事に書かれています。

サイトの高速化に!Twitter、Facebook、Google+、はてブのシェア数をJavaScriptで非同期に取得する方法まとめ
今回は、ソーシャルサービスのシェア数をjQueryのAjaxを用いて非同期に取得する方法を紹介します。 ページ表示後に、非同期にJav...

functions.phpファイルに必要な関数を追記

次に、後でテンプレートファイルで使用する関数をfunctions.phpファイルに追記しておきます。

シェアボタン用テンプレートファイルの作成

次に、「sns-buttons-balloon.php」とでも名前をつけて、テーマフォルダ内にファイルを作成し、以下のコードをコピペしてください。

それぞれのソーシャルサービスへのリンク方法については、以下の記事に詳しく書いてあります。

Wordpressで8種ソーシャルサービスに通常リンクからシェアアクションする方法まとめ
先日、自前でソーシャルサービスのシェアボタンの外観のつくり方を書きました。 上記の記事では以下のシェアボタンを作成しています。(P...

あとは、シェアボタンを呼び出したい箇所に、以下のコードを書いてボタンを呼び出します。

シェアボタンを挿入する位置は、single.phpの本文下あたりが無難かと思います。

この時点で、ブラウザで動作確認してみると、以下のようにな通常リンクリストになっています。

シェアボタン(スタイル設定前)

クルクル回っているところは、Font Awesomeの「class="fa fa-spinner fa-spin"」を使用して、「読み込み中…」の動作を表現しています。

バルーンシェアボタンのスタイル設定

あとは、style.cssなどに先程設置したシェアボタンテンプレートファイルのスタイルを設定します。

バルーンボタンの作り方については、以下に詳しく書いています。

コピペで利用!Wordpressに自作のソーシャルバルーンボタンを設置するためのスタイル設定方法
先日、自分のサイトテーマで使おうと思ってバルーン型のソーシャルボタンを作ってみました。 ソーシャルサービス純正のバルーン型シェ...

バルーンについては、以下のジェネレーターを使ってコードを作成し、それを編集しました。

ボタンのグラデーションについては、以下のジェネレーターを利用しました。

この時点で、ブラウザで確認してみると以下のようになっています。

シェアボタン(スタイル設定後)

この時点では、まだJavaScript(jQuery)によりシェア数を取得する関数の実行コードを書いていないので、まだFont Awesomeの「読み込み中…」フォントが回っているだけです。

JavaScriptのシェア数取得関数を呼び出す

最後に、header.phpの<head></head>あたり(jQuery呼び出しファイルより下)に、以下のコードを書けば、シェア数の取得動作は完了します。

これですべて設定は完了しました。

動作確認

ブラウザで読み込んで見ると、ページが表示されてから、JavaScriptが非同期的に実行され、それぞれのサービスのシェア数を読み込んでいます。

sns

ページが読み込まれてから、シェア数を取得する時間も結構早いのではないかと思います。(サービスのサーバーの状態にもよる)

おまけ

せっかく縦型のバルーンボタンを作ったんだから、これを機に横型のバルーンボタンも作ってしまいましょう。

とは言っても、先程作成した「sns-buttons-balloon.php」テンプレートをそのまま使うので、また1からバルーンボタンのHTMLを作る必要はありません。

「sns-buttons-balloon.php」中のHTMLのスタイルシートを変更して使用します。

スタイルシート変更用の仕掛けとして「sns-buttons-top.php」というファイルを作成します。それに以下のように書き込みます。

先程のテンプレートを、div#sns-group-topのラッパーでくるんでいます。

あとは、single.phpのタイトル下あたりに、以下のように書いて、そのテンプレートファイルを呼び出します。

現時点で、ブラウザで確認してみると、先程と同様のものが表示されています。

トップのシェアボタン(スタイル変更前)

あとは、style.cssに横型バルーンボタン用のスタイルを以下のように追記するだけです。

すると、先程の縦型のバルーンが、以下のように横型に変わります。

横型のバルーンボタン

ページをリロードすると、縦型と同じように動作します。

横型のバルーンボタン

まとめ

今回の方法で、2種類のバルーンボタンを、ほとんどコピペだけで作ることができます。

普段サイトを運営していて、「SNSシェアボタンの読み込みが遅くてページが表示されづらい」「特にFacebook!お前だお前!」なんて具合に普段感じている方に、今回の方法はおすすめです。

『jQueryでシェア数を取得し表示を高速化!WordPressに自作バルーンボタンを作成する全手順まとめ』へのコメント

  1. 名前:えり 投稿日:2015/01/05(月) 01:06:41 ID:2beae02a7

    すごく素敵なのですが、個別ページだけではなくアーカイブページなどでも表示させたい場合にはどうしたら良いのでしょうか?

  2. わいひら 名前:わいひら 投稿日:2015/01/05(月) 02:27:13 ID:ef9a6eb45

    記事に書かれている手順行ったならば、アーカイブページの表示させたい場所に、以下のコードを書けばできるかと思います。

  3. 名前:えり 投稿日:2015/01/09(金) 03:32:00 ID:afef1f910

    アーカイブページでもそのままの記述で良かったのですね。
    ありがとうございます。

  4. 名前: 投稿日:2015/08/26(水) 11:41:39 ID:eb3c7a887

    たいへん素晴らしい記事ありがとうございます。

    さっそくうちのブログにも導入したのですが、トップページ、アーカイブページの場合だと、カウント数が全て一番上の記事のものになってしまいます

    なにか良い方法はないでしょうか。

  5. わいひら 名前:わいひら 投稿日:2015/08/26(水) 19:25:56 ID:a9bf5e5a2

    これは、個別の投稿ページ用のカウント取得カスタマイズなので、そのような動作になるのは致し方ないと思います。

    最も手っ取り早くやるとしたら、SNS Count Cacheというプラグインを導入して、SNSのカウントをキャッシュ化し.バルーンのカウント部分をSNS Count Cacheのカウント取得関数と差し替えるとかがいいかもしれません。
    シェア数を高速表示!WordPressプラグインSNS Count CacheのDBキャッシュはAPIより速い – ゆめぴょんの知恵

  6. 名前: 投稿日:2015/08/28(金) 15:20:01 ID:744e6e1ae

    カウント数表示部分をSNS Count Cacheのものに差し替えたら、無事に動きました。
    ご丁寧な解説、ありがとうございました!

  7. 名前:穂積 投稿日:2016/10/24(月) 17:27:17 ID:1b0d10cf8

    いつも大変参考にさせて頂いております。
    http://nelog.jp/sns-balloon-buttons-making
    をテーマファイルに設置していますが、facebook & twitter のみスピン表示になってしまいカウントしてくれません・・・。
    要素調査で見ても数字を読んでいません。

    その他のSNSはカウント表示されています。
    また、facebook twitter 共にシェアは問題無く出来ております。

    お気づきの点ございましたらヒントなどご教授くださいませ。

  8. わいひら 名前:わいひら 投稿日:2016/10/25(火) 18:22:10 ID:66284abae

    Twitterに関しては、カウント取得APIが廃止されたので、以下の方法等で取得するしかないかもしれません。
    jQueryとcount.jsoonを用いてTwitterのシェア数を取得するWordpressカスタマイズ方法
    ※記事には注意書きが書いていなかったため、記事の方にも同様の旨、追記しておきます。

    Facebookのコードに関しては、試しにFacebookの関数部分を以下のように変更するとどうですか?

    僕は、現在これで取得できています。

  9. 名前:穂積 投稿日:2016/10/28(金) 11:25:22 ID:852e75424

    ご解説ありがとうございます!
    ご指示方法で無事設置出来ました!
    迅速にご回答くださいまして感謝いたします。

  10. わいひら 名前:わいひら 投稿日:2016/10/28(金) 12:41:07 ID:7375b695c

    うまくいったようでよかったです。
    また動作報告ありがとうございます!
    記事中のコードは前回コメントでで書き込んだコードに差し替えておこうと思います。