WordPressにPush7ボタンをAPI+Ajaxで実装する方法(購読者数の取得)

前回は、PHPでPush7のAPIを利用してプッシュボタンを実装する方法を紹介しました。

Wordpressに独自のPush7ボタンをAPI+PHPで設置する方法
以前、Push7に用意されたHTMLタグを利用してボタンを設置する方法を書きました。 けれど、Wordpressテーマ...

で、今回はPHPを使わずJavaScript(jQuery)を利用してPush7ボタンの購読者数を取得する方法を紹介します。

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

主な手順

JavaScriptからAPIを使用してPush7ボタンを設置する主な手順は以下です。

  1. Push7からAPPNOを取得する
  2. JavaScriptを書く
  3. ボタン用のHTMLを挿入する

大体こんな感じです。

Push7のAPI詳細については、以下を参照してください。

APIの使用については、ドキュメントにゆだねるとして、以下では使い方のみを紹介します。

Push7からAPPNOを取得する

まずは、Push7にログインして、「アプリケーション設定 → 自動プッシュ設定 → WordPress」を選択してください。

Push7のアプリナンバーを取得する

すると、APPNOが表示されるので、メモしておいてください。

Push7のアプリナンバーをメモする

Push7について詳しくは以下を参照してください。

Push7を使ってWordpressブログをプッシュ通知に対応させる方法
最近、Push7というWEBプッシュ通信サービスに関する記事をよく目にします。 なんでも、プッシュ通信サービスを利用すると、ユーザーの...

JavaScriptを書く

次に、</body>手前に、以下のようなjQueryコードを書きます。

JavaScriptファイルから読み込む場合は、<script>タグを取り除いて、jsファイルに貼り付けて読み込んでください。

大文字で「APPNO」と書かれている部分は、前項で取得したAPPNOと置換してください。

関数の説明

fetch_push7_count関数について、簡単に説明しておきます。

第1引数にAPPNOを指定してください。

第2引数には、取得したPush7購読者数を表示するための要素を表すCSSセレクタを指定してください。指定したCSSセレクタの要素に対して、購読者数が挿入されます。

ボタン用のHTMLを挿入する

Push7購読用のURLは、Push7管理画面にある「アプリケーションURL」をそのまま利用します。

購読用リンクの作成

Push7のアプリケーションURL

当サイトのものだったら、以下になります。

上記の、URLに移動するだけでも購読できる仕組みになっています。

リンクにするとしたら、こんな感じです。

購読する

こんな感じで、単なる通常リンクで購読リンクを作成することができます。

購読者数を表示する要素を書く

あとは、購読者数表示用のHTML要素を追加します。

先程のJavaScript関数の第2引数のCSSセレクタを「.push7-count」としました。ですので、購読者数を表示させたいところに、「.push7-count」クラスを使用したHTML要素を書けばOKです。

例えばこんな感じです。

JavaScript関数で、Push7購読者数が取得出来た場合は、上記の0が購読者数に置き換えられます。

Push7ボタン例

僕の場合は、上記のコードを応用して、以下のようなバルーンボタンの形にして使用しています。

AjaxでPush7購読者数の取得

バルーンの、HTML記述やスタイルなどについては、以下を参照してください。

jQueryでシェア数を取得し表示を高速化!Wordpressに自作バルーンボタンを作成する全手順まとめ
ソーシャルサービス固有のシェアのボタンって表示が重たいと感じる時はないでしょうか? 特にFacebookのボタンとか。シェアボ...

まとめ

今のところ、Push7のAPIは早くて、わざわざ非同期で取得するほどでもないかもしれません。

なので通常は、PHPを使った方法で、速度的にも問題なく動作すると思います。(※比較的新しいサービスなので、利用者が増えるとどうなるかはわからないけど)

Wordpressに独自のPush7ボタンをAPI+PHPで設置する方法
以前、Push7に用意されたHTMLタグを利用してボタンを設置する方法を書きました。 けれど、Wordpressテーマ...

PHPでするにも、Ajaxで取得するにも、取り立ててトリッキーなことを行う必要がないので、普段WEB系のプログラミングを行っている人なら、結構簡単に実装できると思います。

『WordPressにPush7ボタンをAPI+Ajaxで実装する方法(購読者数の取得)』へのコメント

  1. 名前:名無しさん 投稿日:2016/04/02(土) 17:09:27 ID:81101cc8d

    内容が長いもうちょっと簡潔にまとめろ、ネット検索したら頻繁にお前のサイトが出てきてうざい、氏ね

  2. わいひら 名前:わいひら 投稿日:2016/04/02(土) 17:53:44 ID:277d257d8

    また野口(野田)さんですか?
    いつも同じプロバイダのアクセスポイントからなので…。
    http://nelog.jp/auto-post-thumbnail-custum#comment-41807
    http://nelog.jp/for-pc-crash#comment-40304
    http://nelog.jp/wordpress-h1-h6#comment-40267
    http://nelog.jp/wordpress-child-theme#comment-38815
    http://nelog.jp/seo-bookmarklets#comment-41951

    検索アルゴリズムは、僕にはどうしようもありません。
    検索エンジンが独自に評価をしているものですので。
    検索順位に不服がある場合は、新たな仕組みを提案するなどして、検索エンジンに申し立てを行ってください。