いいね、tweet、+1、はてブ‥今時ソーシャルシェアボタンの無いサイトは考えられません。でも各SNSの公式ボタンはどれも重く高速化を妨げます。そこで、画像無しの軽いボタンを自作して入れ替えてみました。

ソーシャルボタン自作前の状況

当サイトでは、以前に、高速化のために、公式のソーシャルボタンを大幅削減しました。

• 【WordPress高速化日記】.htaccessの書き換え効果絶大、Lazy Load系プラグインの停止、SNSボタン削減も効果あり⇒3.SNSボタン削減

モバイル向けの表示からはSNSボタンを全廃し、PC向けの表示では記事直下の1箇所のみに削減しました。

ただ、いいねボタン等のシェアボタンは今や必須アイテムです。

今回は、アイコンフォントを利用して画像を使わない軽いボタンを自作することで、ソーシャルボタンを以前と同じだけ設置しつつも、高速化の目的も達成しようと考えました。

どんなシェアボタンを作ったか

個別記事ページの直前・直後に設置したので見れば一目瞭然です。

しかし、今後の変更に備えてこの記事を作成した時点でのシェアボタンを画像で残します。

閲覧デバイスの幅に応じて伸縮します。

以下にシェアボタン設置のためのコードを書きます。

この記事で導入したアイコンフォントのうちfacebookを指すものとtwitterを指すものが導入されている前提で書いています。

これらが導入されていないと全く違う見た目になりますので、その点ご了承ください。（G+とはてブのアイコンは導入する必要がありません。）

シェアボタンのためのphp,html

まず、最初にボタンを設置する場所の直前に、以下のコードを入れて、記事のURLとタイトルを取得します。

私は、記事タイトルの直後に書いています。

<?php
$canonical_url=get_permalink();//記事のURL取得
$title=wp_title( '', false, 'right' ).'｜'.get_bloginfo('name');//記事タイトル取得
$canonical_url_encode=urlencode($canonical_url);//記事URLエンコード
$title_encode=urlencode($title);//記事タイトルエンコード
?>

次に、ソーシャルボタン設置場所に、以下のようなコードを挿入します。

私の場合は、<?php the_content();?>の直前と直後に置いています。

<div class="share-buttons">
    <div class="fb-iine">
        <a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $canonical_url_encode;?>&amp;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 class="icon-facebook-squared-ffffff">&nbsp;like</span>
        </a>
    </div>
    <div class="tweet">
        <a href="http://twitter.com/intent/tweet?url=<?php echo $canonical_url_encode;?>&text=<?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 class="icon-twitter-squared-ffffff">&nbsp;tweet</span>
        </a>
    </div>
    <div class="gplus">
        <a href="https://plus.google.com/share?url=<?php echo $canonical_url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;">
        <span class="gplus-squared-ffffff">&nbsp;+1</span>
        </a>
    </div>
    <div class="hatebu">
        <a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $canonical_url_encode;?>&title=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;">
        <span class="hatebu-squared-ffffff">&nbsp;はてブ</span>
        </a>
    </div>
</div>

onclick=”javascript~”でボタンをクリックすると別窓を開くようにしています。公式ボタンの挙動に似せるためにそうしました。窓の大きさは適宜調節してください。

また、facebookは「いいねボタン」ではなく「シェアボタン」です。

「いいね」ボタンは挙動がおかしいものしか作れず‥残念です。

style.css

最後にスタイルをあてます。

.share-buttons{
    width:100%;
    box-shadow: 3px 0px 0px rgba(225,225,225,0.3) inset,
             -3px 0px 0px rgba(225,225,225,0.3) inset,
              0px 3px 3px rgba(0,0,0,0.1) inset,
              0px -3px 3px rgba(0,0,0,0.3) inset,
              0px 3px 3px #666;
}
.share-buttons div{
    float:left;
    width:25%;
    box-shadow: 3px 0px 0px rgba(225,225,225,0.3) inset,
             -3px 0px 0px rgba(225,225,225,0.3) inset,
              0px 3px 3px rgba(0,0,0,0.1) inset,
              0px -3px 3px rgba(0,0,0,0.3) inset,
              0px 3px 3px #666;
}
.share-buttons div a{
    display:inline-block;
    width:100%;
    text-align:center;
    padding:0.5em 0;
    height:1.2em;
    line-height:1.2;
}
.share-buttons .tweet{
    background:#4dccf5;
}
.share-buttons .fb-iine{
    background:#455a9d;
}
.share-buttons .gplus{
    background:#dc4935;
}
.share-buttons .hatebu{
    background:#2c6dbd ;
}

.hatebu-squared-ffffff:before { 
    content: 'B!';
    color:#2c6dbd;
} 
.gplus-squared-ffffff:before  { 
    content: 'G+';
    color:#dc4935;
} 

.hatebu-squared-ffffff:before ,
.gplus-squared-ffffff:before  { 
    background:#ffffff;
    font-weight:bold;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    font-size:67%;
    padding:0 2px;
    vertical-align:1px;
} 
.icon-facebook-squared-ffffff:before { 
    content: '\0066';
} /* 'f' */
.icon-twitter-squared-ffffff:before { 
    content: '\0074';
} /* 't' */
.icon-facebook-squared-ffffff:before ,
.icon-twitter-squared-ffffff:before { 
    color:#ffffff; 
    font-family: "fontello";
    speak: none;
    text-decoration: inherit;
} 
.hatebu-squared-ffffff,
.icon-facebook-squared-ffffff,
.gplus-squared-ffffff,
.icon-twitter-squared-ffffff{ 
color:#ffffff; 
}

ソーシャルアカウントへのリンクボタン

当サイトでは、検索窓の直下に、各SNSアカウントとフィードへのリンクボタンを設置しています。

以前の記事でボタンの画像を全てアイコンフォントに入れ替えましたが、全く同じものを記事直下にも設置しました。

高速化の成果

今回の自作ソーシャルボタン設置によって、モバイル向けでもPC向けでも、個別記事ページの記事の直前・直後にソーシャルボタンを設置しました。

モバイル向けでは、全くボタンが無かったところに、軽いとはいえ自作のボタンをつけたのですから、ページの表示スピードは遅くなるかも知れません。

一方、PC向けでは、公式のソーシャルボタンを自作のソーシャルボタンに替えました。しかし、設置箇所が増えたので高速化できているか心配です。

こういう不安な気持ちで、「Krad XinによるロリポップWordpressサイト大量ハッキングまとめ ｜ウェブシュフ」のページスピードをGoogleページスピードインサイトで計測しました。

結果のキャプチャーが冒頭の画像です。結果は上出来でした。

• ボタンが全く無かったモバイル向けの表示に自作ボタンをつけたが、モバイルのスコアは79と変わらず
• PC向け表示では、公式のソーシャルボタンを自作ボタンに取替えて、設置数を増やしたが、PCのスコアが89⇒91に上がった。

さらに、Google adsenseのスコアカードがオール5になりました。

ページスピードを表す「サイトの状況」は1という低評価だったので感無量です。

高速化のためには、絶対に、軽いソーシャルボタンを自作するべきです。