Simplicity20141107公開。重たいSNSボタンとはおさらば！？独自シェアボタン機能追加、他12ほど。

Simplicityをバージョンアップしました。

僕は、前々から、ソーシャルサービスデフォルトのシェアボタンの表示がかなり遅いのが気になっていました。

先日、あまりにも遅い日があって、ちょっとイラっとしたもので、なんとか改善できないものかと、今回バルーンボタンを自作してみました。

jQueryの非同期処理により、後からシェア数を取得するようにしたので、この機能を使用すれば、シェアボタンの表示がかなり早くなるのではないかと思います。

ついでに、モバイルシェアボタンも非同期でシェア数を表示するように変更しました。

以下は、主な変更点です。今回結構いろいろ変えしました

1. 非同期でシェア数を取得するソーシャルシェアボタンを独自作成しカスタマイザーに機能追加
2. モバイルのシェアアイコンにもシェア数表示
3. モバイルのシェアアイコンにfeedly追加
4. コメント欄のタイプに「シンプルスレッド表示」を追加
5. テーマテキストに「記事を読む」を空欄にした時にHTML要素を表示しないようにした （要望より）
6. モバイル（スマホ）表示時にコメントのアバターの大きさを小さくするようにした
7. feedlyフォローボタンのアイコフォントが崩れて表示されている方も崩れないようにした
8. Facebookのフォローアイコンフォントを変更（背景の白色のズレを無くすため）
9. wp_title()関数を用いてタイトル表示するとタイトル毎に余白が付いてしまうので他の手段を使うことにした （不具合報告より）
10. ブログカードを「brBrbr」を使っていても表示されるように対応。多分。（要望より）
11. 狭いモバイル表示でタイトルを微妙に大きくした*
12. 狭いモバイル表示で、コメントという表記、コメントをどうぞという表記、関連記事という表記を少し小さく調整*
13. 狭いモバイル表示でウイジェットのタイトルも少し小さくした（*アドバイスより）
14. 細かなCSS調整

Simplicity独自のシェアボタンを作成

冒頭にも書いたのですが、サービス固有トシェアボタンの表示の遅さ対策のため、Simplicity側で独自のバルーンボタンを作成しました。

独自シェアボタンは、ページが表示されてからAjaxにより非同期的にシェア数が取得されるので体感的にページ表示が早く感じるようになると思いますTwitterとFacebookとGoogle＋とはてブのみ非同期で取得。Pocketは良い取得方法がなく、feedlyはPHPで取得。）

サイトの表示時間を調べるブックマークレットで同条件で調べてみたところ、通常のシェアボタン表示だと、13.4秒かかっていましたが

独自シェアボタンを使用すると3.8秒と10秒近く短縮できました。

10回ほど調べてみたのですが、だいたい同様の結果でした。

設定方法

独自シェアボタンの設定方法は、「外観→カスタマイズ→SNSの設定」から「独自シェアボタンの使用」にチェックを入れてください。

これにチェックを入れると、タイトル下のボタンも以下のようになり、

サイドで追従してくるシェアボタンも同様に独自ボタンになります。

注意点

早く表示できる、独自シェアボタンですが、当然JavaScriptが有効になっていないブラウザでは表示されないのでご注意ください。

あとデフォルトのものより見慣れない分、クリックされづらいかもしれません。

モバイルのシェアアイコンにもシェア数表示

ついでに、モバイルでのシェアアイコンにもシェア数を表示するようにしました。

こちらもjQueryによる非同期処理なので体感的に遅くなることはないと思います。

あと、前バージョンにはなかったfeedlyのアイコンも追加しました。

シンプルなスレッドコメント欄を追加

「外観→カスタマイズ→コメントの設定」に「シンプルスレッド表示」を追加しました。

こんな感じで表示されます。

フォーラムでの要望（不具合）に対応

あとは、フォーラムにて、不具合修正や要望など、修正できる箇所は修正して、要望を取り入れられる部分は取り入れられたと思います。

• 「記事を読む」の変更を空欄にした場合のモバイルでの表示について
• titleタグに無駄なスペースが混入するバグ
• 拡散ボタンが崩れて表示されている
• ヘッダー背景色がFacebookのアイコンにかぶる
• ブログカード機能について
• 気になる

v1.2.6 あとがき

今回も結構いろいろな変更を行ったので、不具合があった場合は、サポートフォーラムにて報告していただけると助かります。

ブラウザキャッシュを有効にしている場合は、スタイルが変更されたので表示が崩れているかもしれませんが、そういう時はブラウザをリロードして、再度表示を確認してください。

フォーラムでの要望（不具合）にも、おおよそ対応できたとは思うのですが、もし動作がおかしかったり、不具合が修正されていない場合はご報告ください。