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秒かかっていましたがデフォルトのSNSボタン

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

独自カスタマイズのSNSボタン

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

設定方法

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

独自シェアボタンにする

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

タイトル下の独自シェアボタン

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

追従してくる独自シェアボタン

注意点

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

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

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

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

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

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

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

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

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

シンプルスレッド表示

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

シンプルスレッドコメント表示

フォーラムでの要望(不具合)に対応

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

v1.2.6 あとがき

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

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

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

スポンサーリンク
アドセンス(大)
アドセンス(大)

スポンサーリンク
アドセンス(大)

コメント

  1. レニウム より:

    昨日フォーラムで「brBrbr」に関する要望をした者です。
    フォーラムのスレッドがクローズされていたのでこちらで返事をさせて頂きます。
    新バージョンで無事、要望通りブログカードが機能するようになりました。

    迅速な対応、有難うございました。

  2. わいひら わいひら より:

    ちゃんと動作しましたか!よかったです。
    使用した事がないプラグインだったので動作確認は一応したものの、動作が不安でした。
    報告ありがとうございます!

  3. […] 新しいSimplicityがリリースされていました。これによってSNSボタンが刷新されたので、以下の記事のボタンの位置等の調整は特に必要無くなりました(ん?もしかすると、自分が子テーマ […]