[STINGER5]SNSボタンにSNS Count Cacheをつかってみた

あとで読めるサービス「Pocket」を使い始めたものの、自分のブログのSNS登録欄には「Pocket」がありません。

というわけで、SNSボタンを標準のものから変更してみました。

※2015年11月20日をもってTwitterのツイート数取得APIの提供が終了したため、今後はツイート数は更新されません。

統一デザインのSNSボタン

STINGER5の標準で用意されているSNSボタンのデザインを統一デザインへとカスタマイズしている記事を見つけました。

ここまでだと、見栄えは良くなったものの、記事を表示するたびに各SNSから直接カウントを取得してしまうため記事の表示が非常に「遅い」ので、さらにSNSカウントをキャッシュするプラグイン「SNS Count Cache」を導入するところも参考にさせていただきました。

そして、「SNS Count Cache」では、「Pocket」のカウントも取得できているようなので、このSNSボタンに「Pocket」も追加して実装してみました。

こちらがプラグイン作者さんのプラグインの紹介ページです。

そして、WordPress.orgプラグインディレクトリのページです。公式ディレクトリに登録されているので、ダッシュボードからインストールすることができます。

SNSボタンの画像を用意

ボタンの画像や、貼り付けるテキストなどは上記の「えじの自由帳」さんの記事に公開用のZIPファイルがありますのでダウンロードします。

(このZIPファイルに同梱されいてる「sns.php」は、高速化する前のAPIを使って直接カウントを取得する内容になっています。)

download-zip-sns-button

ZIPファイルを展開すると、「sns-icons.png」があります。

sns-icons

今回はこれを、Windows標準のペイントで開いて、「ファイル」→「プロパティ」を開いて、高さを「100」から「120」に変更して、

height-100-to-120

公式サイトのアイコンを見本にしながら書いてみました。

mspaint-sns-button

文字は、20ポイントくらいで書いたのを、Microsoft Office Picture Managerで縮小したのを貼ったりして完成。

うん、それっぽい!

sns-icons

WordPressの「メディア」→「新規追加」でファイルを追加します。

media-upload

画像のURLをコピーしておいて、次項のスタイルシートの「background: url(‘【アイコンファイルのURL】‘) no-repeat;」のところにURLを指定します。

sns-button-url

スタイルシートの変更

スタイルシート(style.css)の、SNSボタンの記述があるところを探して、「.snsbox」以降をコピー/貼り付け。(Pocket用の定義も追加してあります。)

「【アイコンファイルのURL】」というところに、画像ファイルのURLを記入しておきます。

例えば、当サイトでは「https://popozure.info/blog/wp-content/uploads/2015/02/sns-icons2.png」を指定しました。

SNSボタンの設置

SNSボタンが記述されている「sns.php」の中身を丸ごと入れ替えでします。

(2015/11/22追記)2015年11月20日をもって、Twitterのツイート数取得APIの提供が終了しました。以後、ツイート数は更新されないため、「0」のままになります。その内、ツイート数を表示させないような修正方法を載せるかもしれません。

「Pocket」と「Feedly」のカウントも「SNS Count Cache」から取得するように追加・変更しています。

(2015/02/16追記)FeedlyもSNS Cache Countから取るように変更しました。プラグインで使用する関数を新しいものに修正しました。

「【フィードのURL】」がありますが、RSSフィードのURLを入力します。トップページのアドレスでは無いので注意。

例えば、当サイトでは「https://popozure.info/feed」を指定しました。

(追記)タブレットでボタンが表示されない?

NEXUS7でページを見たところ、ボタンが上手く表示されず、文字だけになってしまいました。

sns-text

自分のスタイルシートの理解が足りなかかったため、style.cssのどこにおけばタブレットでも正しく見えるか分かりませんでした。

そこで、style.cssに追加した部分は削除して、SNS用のスタイルシートとして「sns.css」を新たに作成してSNS.phpと同じフォルダーに置きました。

「sns.php」の中から、スタイルシートをリンクします。

結果、スマートフォン/タブレットからも表示されるようになりました。

設置できました

無事に設置できたようです。

post-sns-button

シェアしていただいている記事があったりしたのが分かりました。

ありがたやありがたや。

広告