Step by Step Social Count Cacheでバルーン・スクエアタイプの出力を追加


投稿日:2015年10月1日
  • 0
  • 5


簡単なタグを追加するだけでデザインされたカウントを表示できます

sbs_ba_sq

Step by Step Social Count CacheはSNSのカウントをキャッシュするためのプラグインで、デザインやカスタマイズが前提でした。
ところが先日「せっかくSNSのカウントをキャッシュして表示するなら、デザインもやってよ」とのご依頼を頂いたので対応してみました。

ということで、このサイトで使っている2つタイプを流用して実装しました。


2つの表示タイプ

以下の2つのタイプを作成しました。
表示する場所やブログのデザインに合わせて選択してください。

バルーンタイプ

カウントを上に表示するタイプです。
このサイトでも記事の下に表示しています。
カウント部分と、ボタンの部分をクリックすることでウィンドウが開くようにしました。

sbs_ba_sq01

表示する要素は順序を変えたり

sbs_ba_sq02

必要な要素だけ選んだり

sbs_ba_sq03

といったカスタマイズが可能です。

スクエアタイプ

モノトーンの四角でカウントを表示するタイプです。
このサイトではタイトル下と、一覧ページに表示しています。
バルーンタイプでは色彩的にうるさい」「表示スペースを取り過ぎる」という場合に使いやすいと思います。

sbs_ba_sq04

このタイプもバルーンタイプと同じように要素を並べ替えたり、必要な要素だけ表示する事ができます。

どちらも詳しい使い方は「プラグインの解説ページ」をご覧ください。


Twitterですが、カウントを表示するAPI(非公式だった)の提供を2015年9月一杯で停止しました。
しかしTwitterの日本法人から削除するという正式な発表はありません。
公式のボタンからもカウントを削除する予定と伝えられていますが、10月現在でも不安定ながら表示されています。
カウントは根強い人気がある機能なので、復活することがありえます。そのため暫定として残しておきます。

(プラグイン内ではAPIを使ったカウントの取得は停止し、取得は0、表示は「-」となっています。)



現在のページを共有する



現在のページに関連する記事

Step by Step Social Count Cacheでバルーン・スクエアタイプの出力を追加 Step by Step Social Count CacheでTwitterのカウントができるようになりました
Step by Step Social Count Cacheでバルーン・スクエアタイプの出力を追加 SNSのカウントをキャッシュするWordPressのプラグインを作成しました
Step by Step Social Count Cacheでバルーン・スクエアタイプの出力を追加 WordPressプラグインを公式プラグインディレクトリへ追加する方法
Step by Step Social Count Cacheでバルーン・スクエアタイプの出力を追加 Twitterのモバイル認証用コードが届かない場合にチェックする項目
Step by Step Social Count Cacheでバルーン・スクエアタイプの出力を追加 私のブログ論
Step by Step Social Count Cacheでバルーン・スクエアタイプの出力を追加 「人気ブログの作り方」最高のアクセスアップ法!記事とソーシャルメディアの相乗効果
Step by Step Social Count Cacheでバルーン・スクエアタイプの出力を追加 本気で作りたい人向け、WordPressプラグインの作成方法

おすすめの記事

標準のアンインストーラーで消えないソフトを徹底的に削除する方法

標準のアンインストーラーで消えないソフトを徹底的に削除する…

WordPressで手軽にAdblock対策するならBetter Stop AdBlockで決まり!

WordPressで手軽にAdblock対策するならBetter Stop AdBlockで決…

Linuxでサーバを構築するに当たって必要になる基礎知識

Linuxでサーバを構築するに当たって必要になる基礎知識

エンティティとデコード用プラグイン「Entity Decode Button」を作成しました

エンティティとデコード用プラグイン「Entity Decode Button」…

日々の単純作業を自動化できるUWSCの使い方(入門・書式編)

日々の単純作業を自動化できるUWSCの使い方(入門・書式編)

本気で作りたい人向け、WordPressプラグインの作成方法

本気で作りたい人向け、WordPressプラグインの作成方法

パソコン用メガネなんていらない!無料でできる5つの疲れ目対策

パソコン用メガネなんていらない!無料でできる5つの疲れ目対策

これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方

これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザイン…


コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。