【WordPress】コピペで出来るオリジナルSNSボタン(カウント付き)の作り方
やっぱり前田亜季可愛いなぁとふと思いました私(@こふす)です。いや、特に意味は無いです。急にね、急に思っただけです。
さて、ブログをしている方が必ず導入するもの、それはTwitterやFacebook、Google＋といったSNSボタンですよね。シェアされるとカウントが増えていき訪問者は記事の注目度が一目で分かりますし、ページも華やかになりますし、なんといってもシェアが簡単ということでほぼ全てのブログでこのSNSボタンをお目にかかる事ができます。
そんな便利なSNSボタンですが厄介な点が１つあります。それは読み込み速度が遅く、ページが重たくなるという点。
ページにアクセスする度にボタン毎に情報を取得するためどんなに頑張っても多少読み込み速度に影響してきます。そこで今回は予めカウントデータを取得し保存するプラグインを使用したオリジナルSNSボタンの作り方をご紹介します。読み込み速度は早く、しかもオリジナルのデザインにしたいという方は是非ご覧ください。
まずはプラグイン「SNS Count Cache」をインストールしよう！
カウントデータを表示するためにはJavascriptを使った方法やPHPを使った方法など幾つかありますが、Wordpressを使用しているなら手っ取り早くプラグイン「SNS Count Cache」を使用することでカウントデータを取得することが出来ますし、取得したデータをデータベースに保存してくれるので読み込み速度もかなり早くすることが出来ます。
インストールは、管理画面のプラグイン「新規追加」から「SNS Count Cache」と検索、またはダウンロードページからZIPファイルをダウンロード＆アップロードしてインストールします。
SNS Count Cacheについてはコチラをご参考に
ちなみにSNS Count Cacheで表示することが出来るSNSボタンはTwitterとFacebookとGoogle+とはてブのみです。今後増えるかもしれませんが現時点では４つのみです。
Feedlyのボタンも表示したい方はプラグイン「Feedly Insight」もインストール
SNSボタンと同時に購読ボタンのFeedlyも一緒に表示したいという方は「Feedly Insight」をインストールすることで簡単に表示することが出来ます。
インストールは、管理画面のプラグイン「新規追加」から「Feedly Insight」と検索、またはダウンロードページからZIPファイルをダウンロード＆アップロードしてインストールします。
Feedly Insightについてはコチラをご参考に
ボタンのデザインをしよう！まずはコピペでね
一応このブログで使用しているオリジナルSNSボタンのソースコードをご紹介するだけです。コピペするだけでこんな感じに仕上がると思います。
ではではまずはHTMLから。表示させたい場所に下記のHTMLをコピペしましょう。
<ul class="snsbtn-ori">
<li>
<div class="snsarrow"><div class="scount"><?php echo get_scc_twitter(); ?></div></div>
<a href="http://twitter.com/share?url=<?php echo("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>&text=<?php echo trim(wp_title( '', false)); ?>&via=ツイッターアカウント名" target="_blank"><div class="sbtn stw"><p><i class="sciconori icon-twitter"></i>Twitter</p></div></a>
</li>
<li>
<div class="snsarrow"><div class="scount"><?php echo get_scc_facebook(); ?></div></div>
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><div class="sbtn sfb"><p><i class="sciconori icon-facebook-sign"></i>いいね!</p></div></a>
</li>
<li>
<div class="snsarrow"><div class="scount"><?php echo get_scc_gplus(); ?></div></div>
<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><div class="sbtn sgp"><p><i class="sciconori icon-google-plus"></i>+1</p></div>
</li>
<li>
<div class="snsarrow"><div class="scount"><?php echo get_scc_hatebu(); ?></div></div>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><div class="sbtn shb"><p><i class="sciconori icon-hatena"></i>はてブ</p></div>
</li>
<li><?php if ( function_exists( 'fi_the_button' ) ) fi_the_button( 'vertical' ); ?></li>
</ul>
コピペしたらTwitterのソース文の所に”ツイッターアカウント名”とあるのでそこに自分のアカウントの名前にします。
お次はCSS。テーマファイルのstyle.cssに付き足しましょう。
ul.snsbtn-ori{padding:0px !important;}
ul.snsbtn-ori li {width:70px;list-style: none;float: left;margin-right: 10px;}
.scount {font-size: 13px;text-align: center;color: #555;line-height: 36px;}
.snsarrow{background-color:#fff;border:1px solid #ccc;border-radius:2px;position:relative;height:34px;width:68px;margin-bottom:5px;}
.snsarrow:after{border-width:5px 5px 0px;border-style:solid;border-right:5px solid transparent;border-color:#CCC transparent transparent;-moz-border-top-colors:none;-moz-border-right-colors:none;-moz-border-bottom-colors:none;-moz-border-left-colors:none;border-image:none;bottom:-5px;content:"";display:block;left:50%;position:absolute;width:0px;margin-left:-5px;}
.snsarrow:before{border-width:5px 5px 0px;border-style:solid;border-right:5px solid transparent;border-color:#FFF transparent transparent;-moz-border-top-colors:none;-moz-border-right-colors:none;-moz-border-bottom-colors:none;-moz-border-left-colors:none;border-image:none;bottom:-4px;content:"";display:block;left:50%;position:absolute;width:0px;z-index:1;margin-left:-5px;}
.sbtn{color: #fff;border-radius: 2px;}
.sbtn p{font-size: 12px !important;text-align: center;line-height: 1.8em !important;}
.stw{background-color: #00ACED;}
.sfb{background-color: #3b5998;}
.shb{background-color: #008FDE;}
.sgp{background-color: #DD4B39;}
HTMLもCSSも独学＆浅はかな知識の私が書いたので些か無駄な箇所もあるかと思いますがご勘弁。
取り敢えずWordpressの方ならご紹介したプラグインをインストールし、ボタンのHTMLとCSSをコピペすれば簡単にオリジナルSNSボタンを表示することが出来るかと思います。CSSを弄って更にオリジナルなボタンにしてみて下さい！
