コピペでOK！スクロールしてもついてくるオリジナルソーシャルボタンをブログに設置する方法

WordPressブログのテーマ（私の場合はStinger3）をカスタマイズする中で、PC向けのソーシャルボタンはどこに設置するのがいいのか？と考えました。

ソーシャルボタンを押すタイミングは人それぞれ。

そのため、ソーシャルボタンは常についてくる方がいいんじゃないか？
という結論に達したので、サイト内の余白の部分に常についてきてもらう追尾型ボックスの設置方法を紹介します。

スクロールしても縦型になって、ついてくるようなものです。

初めは公式のソーシャルボタンをつけていたのですが、公式のものって読み込みが遅いしボックスの大きさもバラバラだしで、どうも気に入らず。。
というわけでオリジナルのものを設置することに。

完成図はこんなの。

コピペでOKなので皆さんも是非どうぞ。

準備するもの

作成にあたって、下記のプラグインが必要です。

• 「SNS Count Cache」プラグイン

これはSNSのシェアカウント数を取得するプラグインで、PHPで毎回シェア数を取得するよりも、こちらを使用するとキャッシュを利用できるため、結果的にサイトの表示速度が速くなるというプラグイン。

このプラグインを利用して、バルーン内のカウント数を表示させるのに必要です。

複雑なコードなし、そしてfunction.phpをいじらなくても済むので、重宝するプラグインです。作者のまるぼんさんのページはこちら。

設定などの細かい部分も掲載されています。

「SNS Count Cache」プラグインをインストールして有効化

では「SNS Count Cache」プラグインをインストールして有効化してください。
新規追加より「SNS Count Cache」を検索するか、こちらからダウンロードしてください。

HTML

インストールして有効化ができたら、次はコードを書いていきます。
※ここから先はバックアップを取って、自己責任で行いましょう。

まずはHTML。

場所は「single.php」など、ソーシャルボタンを入れたいページに入れます。

具体的な場所は、なるべく上の方に記述すると確実に表示されると思います。
私は＜?php get_header(); ?＞の下に記述しています。

<?php if (is_mobile()) :?>
<?php else: ?>
<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title());
?>
<div id="share2">
<ul class="clearfix">
<li class="twitter">
<div class="balloon">
<a href="https://twitter.com/search?q=<?php the_permalink(); ?>%2F" target="_blank"><?php if(function_exists('scc_get_share_twitter')) echo scc_get_share_twitter(); ?></a>
</div>
<a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&via=ご自身のツイッター＠アカウント&tw_p=tweetbutton"><span>Tweet</span></a>
</li>
<li class="facebook">
<div class="balloon"><?php if(function_exists('scc_get_share_facebook')) echo scc_get_share_facebook(); ?></div>
<a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><span>Facebook</span></a></li>
<li class="hatebu">
<div class="balloon"><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" target="_blank"><?php if(function_exists('scc_get_share_hatebu')) echo scc_get_share_hatebu(); ?></a></div>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;" ><span>はてブ</span></a></li>
<li class="googlePlus">
<div class="balloon"><?php if(function_exists('scc_get_share_gplus')) echo scc_get_share_gplus(); ?></div>
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;"><span>Google+</span></a></li>
<li class="pocket">
<div class="balloon"><?php if(function_exists('scc_get_share_pocket')) echo scc_get_share_pocket(); ?></div>
<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>"><span>Pocket</span></a></li>
<li class="feedly">
<div class="balloon feedly_count"><?php if(function_exists('scc_get_follow_feedly')) echo scc_get_follow_feedly(); ?></div>
<a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F自分のブログURL 例）「mama-hack.com」ここまで%2Ffeed%2F" target="blank"><span><span>Feedly</span></a></li>
</ul>
</div>
<?php endif; ?>

パソコン表示の時だけに出現させたいので、一番上の部分で条件分岐を記述して、スマホでは出さず、パソコンでのみ表示させるようにしています。

次に、13行目の「ご自身のツイッター＠アカウント」というところは、自分のTwitterアカウントを入れてください。ツイート内容に含みます。いらない場合は消してください。

Feedlyも入れていますが、シェアではないのでいらないという方は、27行目から29行目を削除してください。
使用される方は、Feedlyの部分にも自分のサイトURLを入れてください。%2までの部分です。

あとはコピペでOKです。

もう少しカスタマイズしたい場合は

もう少しカスタマイズしたい場合は、ウェブフォントを入れてアイコンを表示させてみてください。
私のはウェブフォントを入れています。

STINGER5などを使用されている方は、デフォルトでアイコンフォントが入っているので、ツイッターやFacebookなどのアイコン部分にそれを使用します。

アイコンフォントについてはこちら。

ただ、PocketやFeedlyのアイコンはfont Awesomeにはないので、こちらの方法でダウンロードしました。ご参考まで。

CSSで調整

次にCSSを記述します。

Stinger5なら、style.cssの「@media only screen and (min-width: 780px) {」のPC部分内に追記します。
パソコンだけに対応させるので。

その他の場合は、style.cssに追記してください。

/* ついてくるシェアボタン */
#share2 {
color: #000;
background:#fff; /*ボックス全体の背景色*/
width:90px; /*ボックス全体の横幅*/
padding:5px;
margin-left:-115px; /*横の位置調整*/
text-align:center;
position:fixed;
bottom:20px; /*下の位置調整*/
list-style-type:none;
border-radius: 5px;
}
#share2 ul {
list-style: none;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 10px;
}
#share2 ul li {
float: left;
width: 80%;
margin-bottom: 15%;
}
#share2 ul li > a {
overflow: hidden;
position: relative;
display: block;
width: 95%;
margin: 0 auto;
padding: 0.9em 0.5em; /*ボタンの余白で大きさを調整*/
color: #fff;
font-size: 60%;
text-align: center;
text-shadow: none;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#share2 ul li > a:hover {
top: 2px;
}
#share2 ul li > a:active {
top: 3px;
box-shadow: none;
}
#share2 ul li > a i {
margin-right: 0.25em;
color: rgba(0,0,0,0.3);
font-size: 1.5em;
vertical-align: middle;
}
/* ブランドカラー */
#share2 ul li.twitter > a {
background: #55acee;
box-shadow: 0 3px 0 #468EC5;
}
#share2 ul li.facebook > a {
background: #315096;
box-shadow: 0 3px 0 #1F3669;
}
#share2 ul li.hatebu > a {
background: #008fde;
box-shadow: 0 3px 0 #0270AC;
}
#share2 ul li.googlePlus > a {
background: #dd4b39;
box-shadow: 0 3px 0 #B94031;
}
#share2 ul li.pocket > a {
background: #ee4056;
box-shadow: 0 3px 0 #C53648;
}
#share2 ul li.feedly > a {
background: #6cc655;
box-shadow: 0 3px 0 #5CA449;
}
/* ブランドカラーマウスオーバー */
#share2 ul li.twitter > a:hover {
box-shadow: 0 1px 0 #468EC5;
}
#share2 ul li.facebook > a:hover {
box-shadow: 0 1px 0 #315096;
}
#share2 ul li.hatebu > a:hover {
box-shadow: 0 1px 0 #008fde;
}
#share2 ul li.googlePlus > a:hover {
box-shadow: 0 1px 0 #dd4b39;
}
#share2 ul li.pocket > a:hover {
box-shadow: 0 1px 0 #ee4056;
}
#share2 ul li.feedly > a:hover {
box-shadow: 0 1px 0 #6cc655;
}
/* ブランドカラーアクティブ */
#share2 ul li.twitter > a:active {
background: #468EC5;
}
#share2 ul li.facebook > a:active {
background: #1F3669;
}
#share2 ul li.hatebu > a:active {
background: #0270AC;
}
#share2 ul li.googlePlus > a:active {
background: #B94031;
}
#share2 ul li.pocket > a:active {
background: #C53648;
}
#share2 ul li.feedly > a:active {
background: #5CA449;
}
#share2 ul li.line {
display: none;
}
#share2 ul li.line > a {
background: #00c300;
}
/* シェア数吹き出し */
#share2 ul li .balloon {
position: relative;
margin: 0 auto 0.5em;
padding: 0.2em 0.25em; /*吹き出しの余白*/
width: 95%;
color: #aaa;
text-align: center;
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#share2 ul li .balloon:before,
#share2 ul li .balloon:after {
content: "";
position: absolute;
left: 50%;
display: block;
width: 0;
height: 0;
margin-left: -7px;
border: 7px solid transparent;
}
#share2 ul li .balloon:before {
bottom: -14px;
border-top-color: #ddd;
}
#share2 ul li .balloon:after {
bottom: -12px;
border-top-color: #fff;
}
#share2 ul li .balloon a {
display: block;
}

使用しているテーマによって横幅の値が違うので、適宜調整してください。

日本語が入っている部分が主な調整箇所かと思います。

きちんとソーシャルボタンが起動するかも確認してくださいね！

オリジナルSNSボックスにしてどれくらい高速化したのか

当初の目的でもある、ソーシャルボタンをオリジナルにして高速化を目指すというのはどれくらい達成されたのかといいますと。

重そうな写真たくさんのページで測ってみました。

• GoogleのPageSpeed Insights：モバイル60点、PC70点→モバイル62点、PC73点
• GTmetrix：表示速度16.5秒→9.4秒
• Pingdom：73点、6.81秒、1.9MB→74点、6.6秒、1.4MB

ものすごくわずかな部分はありますがｗGTmetrixだと7秒くらい速くなりました。
注目すべきはサイズで、0.5MBもページが軽くなっています。体感速度も上がった気がします。

やはりシェア数のキャッシュが効いている気がします。

まとめ

ソーシャルボタンはサイトに欠かせないものになっているので、ユーザーの目につきやすく、シェアしてもらえるような作りを心がけたいですね！

というわけで参考になれば嬉しいです。

参考にさせてもらったサイト

公式のものをそのまま設置するのであればこちらのウェビメモさんの方法でOKです。

こちらのSNSボックスを参考に作らせていただきました。

やってみてね！おしまい。
もし不具合があれば教えて下さい(； ･`д･´)