Simplicityを少し改造してみた part2

2014/11/7に新しいバージョンがリリースされたWordpressのテーマSimplicityで、SNSボタンのカウントを非同期で取得するという機能が備わった。これによって各SNSのapiからの反応をカウントだけに絞れることでかなり高速に表示されるようになった。

先日投稿した「Simplicityを改造してみた」では、jQuery.map.jsのエラーが出ている人向けに、Wordpressの自前で持っているjQueryをGoogleのCDNから取得するというような内容に触れた。
ここで2.x系のjQueryを取得すると言うのを選択した場合、もしかすると動作はするかも知れないけれどもSNSボタンのカウントが動作しないかも知れないということから、Simplicityテーマフォルダ内にあるJavascriptのSNSボタンのカウントする部分の内容とjQueryの呼び出し方法をちょっと書き換えてみた。

Simplicity を少し改造してみた
2014/11/7 夜 追記 新しいSimplicityがリリースされていました。これによってSNSボタンが刷新されたので、以下の記事のボ...

前回テーマのheader.phpに変更したjQueryをCDNから読み込むやり方だと全体に適用されてしまうので、管理画面等で動作しないものが出てくるかも知れない。それがマズイ場合は!is_adminを利用して、

これをテーマのheader.phpでjQueryを読み込む部分に書き込んでおく。44行目あたり。
参考サイト: Lancork

本題

オリジナルのJavascriptはsuccess,errorを利用したajaxになっているが、done,failを利用したものに書き換えている。何故にそうしたかというと、例えばerrorは「ハンドラはクロスドメイン・スクリプトとクロスドメイン・JSONPリクエストに対しては呼び出されません。」と言うのやらがあるからと言うわけです(参考サイト:js STUDIO)。だからと言って特別変更する必要もないのですが、jQuery3が出た時にどうなるかわからないのでひとまず最新の方法でみたいな感じでやってみました。

書きなおした部分で説明しておくと、まず$.ajaxの構造はどうなっているかから書いておきます。

つまりはこんな構造です。これは例えば、

こんなふうにも書けて、むしろこっちのがわかりやすいかも知れません。また多くの場合もっと簡単に書ける$.getや$.postの方が使い勝手が良い場合もありますが、今回のようにapiにアクセスしてJSONPでコールバックを処理するというような場合は、アドレスの最後に 「?=callback?」と言うのを付けなくてはいけません。
JSONはいわゆるデータのオブジェクト(?)ですが、JSONPはスクリプトですからその答えを受ける受け皿を用意しなくてはいけないわけです。「?=callback?」はjQueryが勝手に数値を当ててくれるのでこれだけ書いておけばよいわけですが、明示的に何かしらの値を入れることもできます。

また、ここが重要ですが、$.ajaxを利用して、受け取るdataTypeをjsonpにした場合、「?=callback?」は自動的にアドレスの最後に付与してくれます。なので、今回変更した例で言うと、はてなのカウントを取得する部分で「?=callback?」を削除しているのが見ていただけると思います。
他の$.getなどでは、自分でアドレスの最後に付けないといけないので、簡単に書けそうでまぁどっちもどっちと言う感じでしょうか。

facebookは現在使用していないので、実際これで正しいのかどうかの検証はしていませんが、Twitter, Google+, はてなあたりは問題ないのではないかと思います。おそらく。


2014/11/9 夜 追記
何やらGoogle+のカウントが0から動かなかったりしておや?と思ったので色々調べてみた所、gitHubのプラグインを公開しておられる方のページにちょっと違った方法で値を取得しているのを見つけて、それに合わせてスクリプトを書き換えてみました。
元々のスクリプトでは、xmlでデータを拾ってきていたりするわけですが、確かにデータは拾ってきているもののウチではどうやっても「content」が拾えなかったんです。で色々やりすぎてもうjsonpでやったらどうよとdataTypeをいじった所、consoleにオブジェクトがキタわけですよ。来るじゃん(笑)って感じでした。

そこで、オブジェクトが来たのは良かったのですがさて、どうやって拾うかと思った所、結局同じようなやり方に落ち着きましたが一応拾えるようになりました。ただ過去にWordpressのプラグインJetpacでのパブリサイズ共有でGoogle+とTwitterに共有していた記事を拾えていないような気がするんです。
拾えていないような気がするというのは、今回のSimplicityアップデート前の状態では、SNSボタンのTwitter,Googl+共に1と記事を投稿した後すぐに表示されていましたが、今見てみるとどうもそれが見つからないように思います。

ただし、テストとしてTwitterのシェアボタンを押してみると確かに+1される。何が違うのかはわかりかねますがボタンとしては正常に動作しているのでまぁいいかと。

更に、Qiitaにて発見した内容だと、facebookのシェア数は、以下のようになっているらしいです。

  • Graph APIのsharesが取得できればそれをそのまま
  • Graph APIのlikesがあれば、それとFQLで取得したtotal_countを足したものを
  • likesがなければFQLのtotal_countをそのまま

とのこと。このような処理をすると公式のボタンの数が取得できるっぽいらしいです。

そこまで手を出すかどうかをいろいろ考えた所で、大変になってきたのでまた今度ということで(ΦωΦ)

追記ここまで


wordpressのプラグインAutoptimizeについては、設定でJavascriptを処理しないようにすればいけるようですが、プラグインを停止した方がプラグイン自体の処理がなくなるのか若干スピードアップしたように思います。サイト速度を測るテストでもわずかに速くなったように思う。

Google+のカウントを拾う箇所にYahooApiが使用されていたのですが、これは初めて知りました。ひとまず忘れないように該当部分のマニュアルをリンクしておきます。

ちなみにさっきまで、サイドバーの一番下にスポンサーリンクを入れていたんだけれど、Googleのadsenseポリシーに抵触している可能性があると言う事で取りました。話によると、Javascript等を用いて画面にずっとadSenseが表示されるようにするのは禁止していると言うことみたいです。
特別表示させているというわけではなく、サイドバーの一番下に広告があるだけなんですけどもそれでもどうなのかなぁ?という部分です。まぁ別にあったとしても誰しもがそうそうクリックしてくれるわけではないだろうからまぁいいかと言うことで。

最後に、スクロールバーの固定される部分あたりのスクリプトで処理自体は見てませんがif 〜 else{};となっていたので気になる人は最後の ; は要りませんと言うことだけおまけで。

ひとまずここまで。続きは以下のブログカード

Simplicityを少し改造してみた part3
part2ではSNSボタンのカウント読み込みをしているjQuery部分(javascript.js)でsuccess,errorで書かれてい...
スポンサーリンク

シェアする

フォローする