軽量のソーシャルボタンを作成する方法

作成:2015/05/08 更新:2017/03/06

snsボタン
ブログに設置が必須になったソーシャルボタン。様々なサービスが独自のボタンを提供していますが、そのまま使うとページの表示速度が遅くなったり、Googleの「PageSpeed Insights」でjavascriptを圧縮やキャッシュ時間を長くしろと注意されたりします。

そこで、

・Webフォントを使用
・ソーシャルカウントを表示
・シェア画面をポップアップ表示（PCのみ）

機能をもったWordPress用のソーシャルボタンを作成したので備忘録がてらメモ。

Webフォントの準備

通常ブラウザに表示される文字はパソコンに入っているフォントを使うため、WindowsやMacあるいは個人の設定により見た目が変わってくる。

サーバ上にフォントを置き、ダウンロードしてもらうことで、制作者の意図した統一のデザインを提供できる。

Webフォントはベクター画像を利用して作れるので、拡大しても文字やアイコンがギザギザにならずキレイに表示される。これはRetinaディスプレイなどの高解像度ディスプレイに対応するのに役立つ。

ベクター画像を用意すれば「IcoMoon」で作成できるが、
「jQueryでシェア数を取得し表示を高速化！Wordpressに自作バルーンボタンを作成する全手順まとめ」で日本でよく使われるWebサービスのアイコンをまとめたものをダウンロードできるのでこれを使わせてもらう。

上記ページの「ウェブサービスアイコンフォントのダウンロード」からダウンロードをクリックしてダウンロード。

解凍してできた「icomoon」フォルダをそのまま使っても良いが、CSSファイルを別に読み込みたくないのと手を加えたかったので、「icomoon」フォルダ内にある「fonts」フォルダをテーマのCSSファイルが置いてあるフォルダに移動。

「icomoon」フォルダ内にある「style.css」の中身を自分のCSSファイルに追加。

マークアップ

このようにマークアップ

<?php
$url_encode   = urlencode(get_permalink());
$title_encode = urlencode(get_the_title());
?>

<div class="sns_box">
  <ul class="clearfix">
    <li>
      <a href="Twitter" class="social twitter" onclick="window.open('http://twitter.com/share?text=<?php echo $title_encode; ?>&tw_p=tweetbutton&url=<?php echo $url_encode; ?>', '_blank', 'width=640,height=480,top=' + (screen.height-640)/2 + ',left=' + (screen.width-480)/2); return false;">
        <span class="icon-twitter"></span>
        <span class="sns-count twitter-count">0</span>
      </a>
    </li>

    <li>
      <a href="Hatena" class="social hatena" onclick="window.open('http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode; ?>', '_blank', 'width=640,height=480,top=' + (screen.height-640)/2 + ',left=' + (screen.width-480)/2); return false;">
        <span class="icon-hatebu"></span>
        <span class="sns-count hatena-count">0</span>
      </a>
    </li>

    <li>
      <a href="Facebook" class="social facebook" onclick="window.open('https://www.facebook.com/sharer/sharer.php?src=bm&u=<?php echo $url_encode; ?>&t=<?php echo $title_encode; ?>', '_blank', 'width=640,height=480,top=' + (screen.height-640)/2 + ',left=' + (screen.width-480)/2); return false;">
        <span class="icon-facebook"></span>
        <span class="sns-count facebook-count">0</span>
      </a>
    </li>

    <li>
      <a href="Pocket" class="social pocket" onclick="window.open('http://getpocket.com/save?url=<?php echo $url_encode; ?>', '_blank', 'width=640,height=480,top=' + (screen.height-640)/2 + ',left=' + (screen.width-480)/2); return false;">
        <span class="icon-pocket"></span>
        <span class="sns-count pocket-count">0</span>
      </a>
    </li>

    <li>
      <a href="Google+" class="social googleplus" onclick="window.open('https://plus.google.com/share?url=<?php echo $url_encode; ?>', '_blank', 'width=640,height=480,top=' + (screen.height-640)/2 + ',left=' + (screen.width-480)/2); return false;">
        <span class="icon-google-plus"></span>
        <span class="sns-count googleplus-count">0</span>
      </a>
    </li>

    <li>
      <a class="social line" href="http://line.me/R/msg/text/?<?php echo $title_encode; ?>%0D%0A<?php echo $url_encode; ?>">
        <span class="icon-line"></span>
      </a>
    </li>
  </ul>
</div>

解説

最初にURLとページのタイトルをURLエンコード。

$url_encode   = urlencode(get_permalink());
$title_encode = urlencode(get_the_title());

ボタンがクリックされた時に画面遷移や新しいタブで開きたくないので、「onclick」で新しいウィンドウが開くように。

一つ目の「span」の部分にアイコンが表示される。

<span class="icon-twitter"></span>

二つ目の「span」はシェアされたカウント数を表示させる。

<span class="sns-count twitter-count">0</span>

CSS

CSSは「icomoon」フォルダ内にある「style.css」を参考にこのようにしてみた。

.@font-face {
  font-family: 'icomoon';
  src: url("fonts/icomoon.eot?-qz7pb2");
  src: url("fonts/icomoon.eot?#iefix-qz7pb2") format("embedded-opentype"), url("fonts/icomoon.woff?-qz7pb2") format("woff"), url("fonts/icomoon.ttf?-qz7pb2") format("truetype"), url("fonts/icomoon.svg?-qz7pb2#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* line 256, ../scss/app.scss */
[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  color: #fff;
  font-size: 25px;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-feedly:before {
  padding: 0px;
  content: "\e007";
}

.feedly {
  background-color: #6cc655;
}

.icon-hatebu:before {
  padding: 0px;
  content: "\e00a";
}

.hatena {
  background-color: #008fde;
}

.icon-line:before {
  padding: 0px;
  content: "\e009";
}

.line {
  background-color: #5ae628;
}

.icon-pocket:before {
  padding: 0px;
  content: "\e008";
}

.pocket {
  background-color: #ee4256;
}

.icon-google-plus:before {
  padding: 0px;
  content: "\e608";
}

.googleplus {
  background-color: #db4a39;
}

.icon-facebook:before {
  padding: 0px;
  content: "\e60d";
}

.facebook {
  background-color: #305097;
}

.icon-twitter:before {
  padding: 0px;
  background-color: #00aced;
  content: "\e611";
}

.twitter {
  background-color: #00aced;
}

sns_box ul li {
  float: left;
  margin-right: 10px;
}

.social {
  position: relative;
  width: 40px;
  height: 40px;
  display: block;
  padding: 8px;
}

.sns_box a:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
}
.sns-count {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  padding: 0 4px;
  background-color: #555;
  color: #eee;
  font-size: 9px !important;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

ソーシャルカウントを取得するJavaScript

「ソーシャルカウントの取得方法まとめ(全9サイト)」を参考に作成。Google+とPocketのカウント数の取得方法は「jQueryでシェア数を取得し表示を高速化！Wordpressに自作バルーンボタンを作成する全手順まとめ」を参考にさせてもらった。

「</body>」に貼り付け、Ajaxを使うことでページの読み込みが完了してからカウント数を取得するのでページの表示を妨げない。

<script>
<?php $url_encode   = urlencode(get_permalink()); ?>

//Twitter
$.ajax({

  url:"http://urls.api.twitter.com/1/urls/count.json?url=<?php echo $url_encode; ?>",
  dataType:"jsonp",

  success:function(obj){
    $(".twitter-count").html(obj.count);
  },

  error:function(){
    $(".twitter-count").html('0');
  },

  complete:function(){
    return false;
  }

});

//Facebook
$.ajax({

  url:"http://graph.facebook.com/?id=<?php echo $url_encode; ?>",
  dataType:"jsonp",

  success:function(obj){

    if(typeof(obj.shares) == 'undefined'){
      count = 0;
    }else{
      count = obj.shares;
    }
    $(".facebook-count").html(count);
  },

  error:function(){
    $(".facebook-count").html("0");
  },

  complete:function(){
    return false;
  }

});

//Google+
$.ajax({
  type: "get", dataType: "xml",
  url: "http://query.yahooapis.com/v1/public/yql",
  data: {
    q: "SELECT content FROM data.headers WHERE url='https://plusone.google.com/_/+1/fastbutton?hl=ja&url=<?php echo $url_encode; ?>' and ua='#Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36'",
    format: "xml",
    env: "http://datatables.org/alltables.env"
  },
  success: function (data) {
    var content = jQuery(data).find("content").text();
    var match = content.match(/window\.__SSR[\s*]=[\s*]{c:[\s*](\d+)/i);
    var count = (match != null) ? match[1] : 0;

    $(".googleplus-count").html(count);
  },

  error:function(){
    $(".googleplus-count").html("0");
  },

  complete:function(){
    return false;
  }

});

//Hatena
$.ajax({

  url:"http://api.b.st-hatena.com/entry.count?url=<?php echo $url_encode; ?>",
  dataType:"jsonp",

  success:function(count){
    if(typeof(count) == 'undefined'){
      count = 0;
    }

    $(".hatena-count").html(count);
  },

  error:function(){
    $(".hatena-count").html("0");
  },

  complete:function(){
    return false;
  }
});

//Pocket
$.ajax({
  type: "get", dataType: "xml",
  url: "http://query.yahooapis.com/v1/public/yql",
  data: {
    q: "SELECT content FROM data.headers WHERE url='https://widgets.getpocket.com/v1/button?label=pocket&count=vertical&v=1&url=<?php echo $url_encode; ?>' and ua='#Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36'",
    format: "xml",
    env: "http://datatables.org/alltables.env"
  },

  success: function (data) {
    var content = $(data).find("content").text();
    var match = content.match(/<em id="cnt">(\d+)<\/em>/i);
    var count = (match != null) ? match[1] : 0;

    $(".pocket-count").text(count);
  },

  error:function(){
    $(".pocket-count").html("0");
  },

  complete:function(){
    return false;
  }

});
</script>

jQueryの読み込み

jQueryを読み込んでいない場合は読み込む必要がある。

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

以上でカウント数を表示させた軽量のソーシャルボタンが作成できた。

おわりに

なるべくページの読み込みを早くするためにいろいろ試行錯誤しました。最終的には自分が納得できるものができました。

デフォルトのデザインから変わることでクリック率が下がるような気もしますが、ページが読み込まれてからしばらくしてソーシャルボタンが表示されるのは見ていてイラッとするので思い切って変えました。

軽量のソーシャルボタンを作成する方法

Webフォントの準備

マークアップ

解説

CSS

ソーシャルカウントを取得するJavaScript

jQueryの読み込み

おわりに

プロフィール

ブログ内検索

特選カテゴリー

最近投稿した記事

軽量のソーシャルボタンを作成する方法

Webフォントの準備

マークアップ

解説

CSS

ソーシャルカウントを取得するJavaScript

jQueryの読み込み

おわりに

プロフィール

ブログ内検索

特選カテゴリー

最近投稿した記事

AI

お金の知識

趣味・事業

WEB制作

アウトドア

健康に生きる

ブログ旅