SNS Count Cache｜いいねボタン、ツイートボタンを自作してWebページ表示速度を高速化！

いいねボタンやツイートボタン、設置してますか？

いいねボタンやツイートボタンなどをソーシャルボタンと言いますが、SNS（ソーシャル・ネットワーキング・サービス）が提供しているWebサイトやブログのコンテンツ（記事）を拡散させる用のボタンです。

私は、自作のソーシャルボタンに変更したところ、検索エンジン流入が増え、ページビューがかなり上がりました！

自作のソーシャルボタンを設置した時は月間PVが60万ほどでしたが、今では120万PVを超えていますw

Webページ表示速度の高速化は、googleが2012年に検索エンジンの表示結果に対するランキング要因とアナウンスしており、いつかやろういつかやろうと考えていた次第です。実際に対策をしたのは半年以上も前の事ですが、高速化の必要性を実感している次第です。

重い腰を上げて自作のソーシャルボタン（シェアボタン）へ変更して良かったです。
って事で、重い腰を上げて記事として紹介したいと思いますw

もしまだ公式のソーシャルボタンを設置している方は、自作のソーシャルボタンへ変更される事をおすすめします！

自作のソーシャルボタンを用意しているレンタルブログは少ないので、WordPressはソーシャルボタンさえ自由にカスタマイズできるので色んな相乗効果が得られます。

各SNSから提供されているソーシャルボタンを設置するのさえ難しく、HTMLなどに詳しくない方は難色を示されそうですが、コピペで設置できるようにとソースコードを紹介したいと思います。

自作のソーシャルボタン（シェアボタン）を表示するにあたり、いいね数、ツイート数、はてぶ数などのシェア数を表示したい訳ですが、WordPressのプラグインにはシェア数を取得するプラグイン「SNS Count Cache」があるので、SNS Count Cacheの設定方法と合わせて紹介致します。

公式のソーシャルボタンが遅い原因は、シェア数をいちいち取得するのが原因で、SNS Count Cache プラグインを使ってシェア数をキャッシュする事で、劇的にWebページ表示完了が速くなりますw

• ソーシャルボタン（シェアボタン）の種類
• Webページ表示速度 高速化のメリット
• 自作のソーシャルボタン（シェアボタン）の設置
• SNS Count Cache プラグインの設定

ソーシャルボタン（シェアボタン）の種類

呼び方は、ソーシャルボタン・シェアボタン・SNSボタンと人によっては色々ありますが、「ソーシャルボタン」と呼ぶのが一般的です。

自分が運営するWebサイトやブログにソーシャルボタンを設置する事で、より多くのユーザーに恒久的にコンテンツ（記事）を読んで貰える可能性を増やす事ができます。

日本にもSNSは多々あり、それと同じくしてソーシャルボタンは提供されていますが、思い当たるソーシャルボタンは下記になります。

などなど、興味がるソーシャルボタンは設置してみましょう。
ただ、むやみに複数の公式のソーシャルボタンをそのまま設置すると、Webページ表示速度がめちゃんこ遅くなるので必要最低限のボタンにしましょう。

ソーシャルボタンを設置すると同時に必ず設定しておきたい事として、OGP設定があります。
ソーシャルボタン設置とOGP設定はセットなので覚えておきましょう。
⇒ facebook いいねボタン設置時のOGP設定方法♪

TwitterにはTwitter Cardsなどあるので要チェックです。

ソーシャルボタンと並べて設置しておくのにおすすめなボタンとして、リピーターさん用に「feedlyボタン」があります。こちらも要チェック♪
⇒ Feedly購読ボタンを自分のブログやサイトに設置する方法

Webページ表示速度 高速化のメリット

冒頭にも書いた通り、以前から検索エンジンの上位表示アルゴリズムには「Webページ表示速度」が要素としてありましたが、実際に自分のサイトやブログに自作のソーシャルボタン（シェアボタン）を設置し、高速化を図ったところ、大幅にページビューがアップしました！

各SNSが公式に提供しているソーシャルボタンは読み込み速度が遅く、Webページ表示の読み込み完了を遅くしている原因となっているので、早め早めの対応をしておきたいところ。

Webページや記事を読み込んでもソーシャルボタンが設置している場所だけ空白って事もよくありますし、レイアウトに変な挙動が出てきて、閲覧したユーザーに不快感を与えてしまう事もあります。

下記は、Webページ表示速度 高速化のメリット。

自作のソーシャルボタンを設置するだけで、ページビューが増える可能性があるので、できる限り対策した方が良いですし、一度の対策だけで、見た事も無い数値を見る事ができると思いますw

自作のソーシャルボタン（シェアボタン）の設置

さて、WordPressサイト・ブログへの自作のソーシャルボタンの設置ですが、WordPressの管理画面を開いて、プラグインページから「SNS Count Cache」をダウンロードして有効化して下さい。
⇒ WordPress｜SNS Count Cache « WordPress Plugins

SNS Count Cacheを有効化したら、テーマ編集画面で任意のテンプレートに自作ソーシャルボタンのソースコードを挿入します。

自作ソーシャルボタン

上記は私が作成したソーシャルボタンですが、必要に応じてダウンロードして使っていただいて構いませんw

画像は透過pngで作成しており、4種類あります。

FTPで画像をアップされる場合は、画像のファイル名に01～04まで番号を振っていますので、使う画像によってソースコードを編集して下さい。
テーマフォルダに「imgフォルダ」を作成し、画像をアップするとそのまま使えます。

WordPressのメディアアップロードを使われる場合は、ソースコード内<img”タグを”ファイルのURL”に変更して下さい。

ボタンは画像じゃなくてもテキスト表示やアイコンフォントの利用が可能です。
アイコンフォントの設置がわかる方はトライしてみて下さいw

画像１つの容量は1Kバイト以内ですので、アイコンフォントを使うよりも軽いかもですw

「このコンテンツ（記事）を他の人達にも伝えたい」と思われた時に、押してみたくなるような、クリックされやすいソーシャルボタンを作成してみてください。

自作ソーシャルボタンのソースコード

ここでは、よく使うソーシャルボタンとして、facebookいいねボタン、Twitterツイートボタン、Google＋の＋1ボタン、はてなブックマークのはてぶボタン、Pocketの後で読むボタンのソースコードを記載しますので、コピペして使っていただければと思います。

SNS Count Cacheがシェア数を取得するソースコードが挿入してあります。

<ul class="sns">

<!--facebook-->
<li><a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>" onclick="window.open(this.href, 'FBwindow', 'width=660, height=460, menubar=no, toolbar=no, scrollbars=yes'); return false;"><img src="<?php echo get_template_directory_uri(); ?>/img/sns_fb01.png" alt="facebook" /></a> <span class="count"><?php if(function_exists('scc_get_share_facebook')) echo scc_get_share_facebook(); ?></span></li>

<!--google-->
<li><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="window.open(this.href, 'Gwindow', 'width=660, height=460, menubar=no, toolbar=no, scrollbars=yes'); return false;"><img src="<?php echo get_template_directory_uri(); ?>/img/sns_g_plus01.png" alt="Google+" /></a> <span class="count"><?php if(function_exists('scc_get_share_gplus')) echo scc_get_share_gplus(); ?></span></li>

<!--hatena-->
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo get_the_permalink() ?>" data-hatena-bookmark-title="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" onclick="window.open(this.href, 'hatebuwindow', 'width=660, height=460, menubar=no, toolbar=no, scrollbars=yes'); return false;"><img src="<?php echo get_template_directory_uri(); ?>/img/sns_hatena01.png" alt="はてなブックマーク" /></a> <span class="count"><?php if(function_exists('scc_get_share_hatebu')) echo scc_get_share_hatebu(); ?></span></li>

<!--Pocket-->
<li><a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>" onclick="window.open(this.href, 'Pwindow', 'width=660, height=460, menubar=no, toolbar=no, scrollbars=yes'); return false;"><img src="<?php echo get_template_directory_uri(); ?>/img/sns_pocket01.png" alt="Pocket" /></a> <span class="count"><?php if(function_exists('scc_get_share_pocket')) echo scc_get_share_pocket(); ?></span></li>
</ul>

<!--twitter-->
<li><a href="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>" onclick="window.open(this.href, 'Twitterwindow', 'width=660, height=460, menubar=no, toolbar=no, scrollbars=yes'); return false;"><img src="<?php echo get_template_directory_uri(); ?>/img/sns_tw01.png" alt="twitter" /></a></li>

必要なソーシャルボタンを設置しましょう。
※ twitterのカウント数は2015年11月20日に廃止されました（汗）

facebookのボタンは、いいねボタンではなくシェアボタンとして機能します。

他に、Feedlyと全てのシェア数を表示させるタグは下記。

scc_get_follow_feedly
scc_share_count_total

CSS（任意で変更して下さい）

ul.sns {
clear:both;
text-align: left;
margin: 0 0 20px 0;
padding: 0;
overflow: hidden;
}

ul.sns li{
float:left;
list-style:none;
margin: 0 10px 0 0;
}

.count{
padding: 0 6px;
font-size:12px;
border-radius: 10px; /* 角丸 */  
-webkit-border-radius: 10px; /* 角丸 Safari,Google Chrome用 */  
-moz-border-radius: 10px; /* 角丸 Firefox用 */
background-color:#FFCCCC;
color:#f00;
}

ご自身のテーマに合わせて調整して下さい。

SNS Count Cache プラグインの設定

テーマ編集画面で任意のテンプレートにソーシャルボタンのソースコードを挿入したら、SNS Count Cacheの設定をしましょう。
キャッシュ系プラグインとの併用では挙動に注意が必要。

SNS Count Cache プラグインを有効化すると、WordPress管理画面のサイドメニュー下部に「SNS Count Cache」を表示されているので、シェア状況の確認や各種設定ができます。

SNS Count Cacheの設定画面では下記設定ができます。
（ピンク色の文字は必須＆おすすめ）

シェア数を取得するSNSにチェックを入れましょう。

投稿日からコンテンツを新着とみなす期間の選択

比較基準の更新方式の選択

フォロー数のチェック間隔の数値を入力
（既定値: 86400 最小値: 3600）

対象フィードタイプの選択（デフォルト、RSS、RSS2、RDF、ATOM）

有効（非同期2次キャッシュ）を選択しましょう！

SSL証明書検証の有効・無効を選択

有効・手動を選択

シェア数をCSVファイルにエクスポート

有効化するだけで使えますが、ひととおり確認をされてください。
細かい事は、ヘルプ画面が用意されているのでヘルプを参照されてください。

以上、Webページ表示高速化実現の為の自作ソーシャルボタン設置方法とSNS Count Cacheの設定方法でした。

まぁ何よりも自分のWebサイトやコンテンツ（記事）が拡散されるには、ユーザーの心をくすぐる有益な情報を綴るのが大事ですので、心がけていってください。

自作のソーシャルボタンを設置は、Webサイト表示高速化の一要因でもありますので、もっともっと高速化を図る場合は、HTMLやCSS、JAVAスクリプトの軽量化やサーバーのグレードアップも考慮していきましょう。

WordPressの高速化に長けたレンタルサーバーもあるので要チェックですw
⇒ レンタルサーバーの速度向上！エックスサーバーのWordPress表示速度高速化！

サイドバーの誰もクリックしていないであろう不要なウィジェットを削除をするだけでもWebサイト表示高速化の効果があると思うので是非お試しくださいw

レンタルブログサービスにできない事が、WordPressではたくさんできますw