このブログではオリジナルのソーシャルボタンを設置して、サイト表示速度を高速化し、独自デザインによる差別化も行っています。今回はPCだけでなくスマホサイト用のシェア数付きSNSアイコンの設置方法も紹介します。
ゆめぴょん(@yume_pyon)です。こんちはっ！
今回の記事はAPIではなく、下のWordPressプラグインを利用します。通常のソーシャルボタンのシェア数の表示は高速化の妨げになりますが、このWPプラグインではDBキャッシュを使うため高速表示できます。
そのため、Webサイトやブログの表示が遅いという悩みから解消されて、スマホではPageSpeed93点を達成しました。PC版はまだまだですが。
ソーシャルボタンについては、いくつも記事を書いています。表示の高速化はSEO対策の1つでもあるので、できることから取り組んでいきましょう。
- 【Webサイト高速化】ソーシャルボタンを1つにまとめるコードを共有するよ
- 【Webサイト高速化】SNSソーシャルボタンをあと読み設定する方法とコードを紹介
- 【Web制作】コピペでOK！ソーシャルボタン設置と追尾方法。プラグイン不要
- 【WordPress】WPtouchでソーシャルボタンやAdsense設置と日付表記の変更方法
完成イメージ：SNSシェア数つきソーシャルボタン
ソーシャルボタンとして、ツイートボタン、Facebookのいいね！やシェアボタン、Google+1ボタン、はてなブックマーク（はてブ）ボタンに、feedlyやLINEを加えて表示しています。
このブログのソーシャルボタンは日々改良しているため、現時点(2014.9.4)のものを紹介します。
トップページ/ホームや、カテゴリー一覧などでは、下のようにSNSアイコンとカウンタ数を表示しています。
個別投稿記事では、記事上にシンプルなフラットデザイン風のソーシャルボタンを表示しています。もちろんSNSシェアのカウント数付きです。バイラルメディアの普及？により、オリジナルのSNSボタンもクリックされやすくなったと思います。
スマホサイト用のデザインでは、記事上も記事下にも自作のソーシャルボタンを設置しています。スマホサイトではPC以上に表示を高速化する必要があるので、通常のSNSボタンは一切読み込んでいません。
自作のSNSシェア数つきソーシャルボタンの設置方法
ツイートボタン、Facebookのシェア/いいね！ボタン、Google+1ボタン、はてなブックマーク（はてブ）のオリジナルボタンの設置方法を紹介します。
シェアのカウント数については、Pocket、LINEはAPIで取得できないため、今回は対象としません。LINEはリンクのみ紹介します。feedlyはソーシャルメディアではないし、少し改良中なので後日また別記事で書くつもりです。
また前提として、SNSアイコンは「Ligature Symbols」のWebフォントを利用しています。日本特有のはてブ、LINE、mixiなどにも対応してるし、空文字を使わないのでSEO対策にも配慮されているウェブフォントです。
いちおシンプルなスタイルシート/CSSも掲載しますが、設置環境によってはうまく表示されない場合もありますので、お好みで修正してください。
PC・スマホ共通！ホームなど記事一覧ページ用
PCでもスマホサイトでも、ホームやカテゴリ一覧ページでは、表示件数が多いので通常のソーシャルボタンは高速化の妨げになり、SEO対策にもマイナスです。
しかし「SNS Count Cacheプラグイン」を使えば、かなり高速化することができます。
WordPressのテーマ/テンプレートファイルの「index.php」などに、下コードをコピペするだけでOKです。Ligature Symbols以外のウェブフォントを利用している場合は、class等を書き換えてください。
|
1 2 3 4 5 6 |
<!--ツイッターアイコン--> <?php if(function_exists('get_scc_twitter')) { ?><span class="lsf" style="color:#00acee">twitter</span><?php echo get_scc_twitter(); } ?> <!--Facebooアイコン--> <?php if(function_exists('get_scc_facebook')) { ?><span class="lsf" style="color:#4561b0">facebook</span><?php echo get_scc_facebook(); } ?> <!--はてブアイコン--> <?php if(function_exists('get_scc_hatebu') && get_scc_hatebu()!=0) { ?><span class="lsf" style="color:#00a4de">hatenabookmark</span><?php echo get_scc_hatebu(); } ?> |
今回CSSはアイコンの色だけ設定しています。色、フォントサイズ、アイコンとシェア数との間隔などは、お好みのスタイルシートでデザインしてみてください。
はてブは、0カウントの場合も多いため、0の時はシェア数だけでなくアイコンも非表示にしています。ツイッター、Facebookいいねボタンなども同様にできます。
PCの個別の投稿記事用
フラットデザイン風にして、SNSアイコンにはWebフォント「Ligature Symbols」を利用しています。スタイルシートは自由に編集してください。
WordPressのテーマ/テンプレートファイルの「single.php」などに、下コードをコピペしてください。Ligature Symbols以外のウェブフォントを利用している場合は、class等を書き換えてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<style type="text/css"> .sns-icons { width: 100%; margin: 20px 0; } .sns-icons>a { float: left; width: 120px; margin: 0 2px 0 0; padding: 4px 0 5px; font-size: 12px; text-align: center; color: #fff; border-radius: 8px; } .sns-icons .lsf-icon:before { font-size: 22px; vertical-align: -1px; } .sns-icons>a:hover { color: #f00; background: #fb8; line-height: 0.9; text-decoration: none; } </style> <?php $url_encode=urlencode(get_the_title()); $title_encode=urlencode(get_permalink()); ?> <aside class="sns-icons"> <!--ツイートボタン--> <a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" class="lsf-icon" title="twitter" style="background:#00acee">ツイッター<?php if(function_exists('get_scc_twitter')) echo get_scc_twitter(); ?></a> <!--Facebookいいね！/シェアボタン--> <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;" style="background:#4561b0" class="lsf-icon" title="facebook">Facebook <?php if(function_exists('get_scc_facebook')) echo get_scc_facebook(); ?></a> <!--Google+1ボタン--> <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;" class="lsf-icon" title="google" style="background:#dd4b30">Google+<?php if(function_exists('get_scc_gplus')) echo get_scc_gplus(); ?></a> <!--はてブボタン--> <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;" class="lsf-icon" title="hatenabookmark" style="background:#00a4de">はてブ <?php if(function_exists('get_scc_hatebu')) echo (get_scc_hatebu()==0)?'':get_scc_hatebu(); ?></a> </aside> |
スマホサイトの個別の投稿記事用
スマホサイトでは、フラットデザイン風ではタップしにくいので、少し高さのあるアイコン風に仕上げました。LINEボタンはPCでクリックしてもうまくシェアできないので、スマホやタブレットでのみ表示するのがおすすめです。
またPC版と違い、スマホ版ではSNSアイコンを単独で表示することもあるため、アイコンごとにCSS用のclassを設定しています。
スマホ用のWordPressのテーマ/テンプレートファイルの「single.php」などに、下コードをコピペして利用してください。テーマ切替プラグインが便利です。レスポンシブサイトの場合は、下記事の条件分岐を使う方法もあります、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<style type="text/css"> .sns-icon { float: left; display: block; margin: 0 5px; width: 50px; line-height: .9; border: 2px solid #ccc; border-radius: 14px; text-align: center; } .sns-icon .lsf { font-size: 34px; } .sns-count { padding-bottom: 3px; font-size: 12px; color: #666; } </style> <?php $url_encode=urlencode(get_the_title()); $title_encode=urlencode(get_permalink()); ?> <!--ツイートボタン--> <div class="sns-icon"> <a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton" target="_blank"> <div class="lsf" style="color:#00acee">twitter</div> <div class="sns-count"><?php if(function_exists('get_scc_twitter')) echo get_scc_twitter(); ?></div> </a> </div> <!--Facebookいいね！/シェアボタン--> <div class="sns-icon"> <a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" target="_blank"> <div class="lsf" style="color:#4561b0">facebook</div> <div class="sns-count"><?php if(function_exists('get_scc_facebook')) echo get_scc_facebook(); ?></div> </a> </div> <!--LINEボタン--> <div class="sns-icon"> <a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>"> <div class="lsf" style="color:#00c300">line</div> </a> </div> <!--Google+1ボタン--> <div class="sns-icon"> <a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" target="_blank"> <div class="lsf" style="color:#dd4b30">google</div> <div class="sns-count"><?php if(function_exists('get_scc_gplus')) echo get_scc_gplus(); ?></div> </a> </div> <!--はてブボタン--> <div class="sns-icon"> <a href="http://b.hatena.ne.jp/entry.touch/<?php echo str_replace('http://', '', get_permalink()); ?>" target="_blank"> <div class="lsf" style="color:#00a4de">hatenabookmark</div> <div class="sns-count"><?php if(function_exists('get_scc_hatebu')){$g=get_scc_hatebu(); echo ($g==0)?'':$g; } ?></div> </a> </div> |
はてブだけは0カウントの場合に非表示にしています。他のSNSシェア数でも使えるので参考にしてください。
まとめ：今日のゆめぴょんの知恵
ソーシャルボタンをオリジナルにできれば、デザインの幅も広がります。シェア数をDBキャッシュから取得すれば高速化でき、SEO対策としても役立ちます。あなたのオリジナルデザインもぜひ教えてくださいね。
ソーシャルメディアのシェア数をAPIで取得したり、ソーシャルボタンをふきだし仕様にしたい場合などは、下記事もおすすめです。
◆PHPとJSでソーシャルカウントを取得する方法まとめ(全9サイト)
◆SNSボタンをオリジナルデザインに！設置方法＆シェア数の取得方法まとめ | Design Color
次回の記事は「自作ソーシャルボタン設置方法」の予定です。
更新を見逃さないためにも、の登録をおすすめします(^^)/
ゆめぴょん(@yume_pyon)でした。ばいちゃお！ こてっZzz