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


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



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

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でバルーン・スクエアタイプの出力を追加 「人気ブログの作り方」最高のアクセスアップ法!記事とソーシャルメディアの相乗効果
ソーシャルメディア用アイコン ソーシャルメディア用アイコン

おすすめの記事

NexusFontが重い場合はWindows Font Cache Serviceを無効にしよう

NexusFontが重い場合はWindows Font Cache Serviceを無効にしよう

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

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

プロ根性のあるデザイナーやブロガーにお勧めする4つの画像編集ソフト

プロ根性のあるデザイナーやブロガーにお勧めする4つの画像編集…

Excelでセルとセルの間をダブルクリックすると移動する機能を停止する方法

Excelでセルとセルの間をダブルクリックすると移動する機能を停…

Linuxの基本の基本。Linuxの基本的なディレクトリ構成

Linuxの基本の基本。Linuxの基本的なディレクトリ構成

UWSCでPhotoshopの作業を自動化する方法

UWSCでPhotoshopの作業を自動化する方法

lazysizesの使い方を通して学ぶ、画像の遅延読み込みとレスポンシブイメージの基本

lazysizesの使い方を通して学ぶ、画像の遅延読み込みとレスポン…

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

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


コメントを残す

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

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