×

オリジナルSNSシェアボタンを設置する方法(twitter・facebook・google+・はてなブックマーク)【プラグインなし】

2016年11月6日 コーディング

SNSシェアボタン

多くのウェブサイトでSNSのシェアボタンが設置されています。

各種SNSではシェアボタンの設置コードが提供されており、コードをコピペすれば容易にシェアボタンを設置できます。

当ブログでも公式提供のコードをそのまま使用していましたが、2つの問題がありました。

  • 1.各種SNSで仕様・デザインが固定されてしまう
  • 2.読み込み時間が長い

2の「読み込み時間が長い」という問題は、公式で提供されているJavaScriptコードを非同期化すれば改善できるようですが、それだけだと1の「各種SNSで仕様・デザインが固定されてしまう」問題が解決できません。

1、2を両方解決するには、オリジナルデザインのボタンを用意して、こちら側で用意したJavaScriptでシェア数を非同期で取得するという方法が考えられます。

当ブログはWordPressで運営しているため、一番楽な方法はプラグイン使用です。…が、今回はajaxを使用した非同期通信の勉強も兼ねてプラグインなしでオリジナルシェアボタンを設置します。

※設置するのは主要なSNS(twitter・facebook・google+・はてなブックマーク)のシェアボタンです。

html、CSSでコーディング

まずは、SNSボタンをhtmlでコーディングします。


twitter、facebook、Google+、はてなブックマークの4種類のシェアボタンを用意しました。

各シェアボタンは下記4つの要素で構成されます。一つずつ詳細を説明します。

  • 1.シェア数(※twitterを除く)
  • 2.シェア用のaタグ(シェア用のURLを設定)
  • 3.SNSのロゴ
  • 4.SNSの文言

1.シェア数(※twitterを除く)

twitterはシェア数を取得するための公式APIが廃止されたので、twitter以外のSNSのシェア数を表示するためのresult_areaクラス、countクラス要素を用意します。

2.シェア用のaタグ(シェア用のURLを設定)

各シェア用URLをhrefに設定します。

【twitter】
https://twitter.com/share?url=【表示されているURL】

【facebook】
https://www.facebook.com/sharer/sharer.php?u=【表示されているURL】

【google+】
https://plus.google.com/share?url=【表示されているURL】

【はてなブックマーク】
http://b.hatena.ne.jp/entry/【表示されているURL】

外部サイトなのでtarget=”_blank”にしておきます。

3.SNSのロゴ

各種SNSのロゴを構成するcommon_iconクラスを用意します。

ロゴの公式画像を使おうとすると、ライセンスとか使用可能範囲がややこしいので、有名Webフォント「Font Awesome」を利用します。

【twitter】
こちらを使用します。検索窓で”twitter”と検索すると使えそうなアイコンがヒットします。

【facebook】
こちらを使用します。検索窓で”facebook”と検索すると使えそうなアイコンがヒットします。

【google+】
こちらを使用します。検索窓で”google”と検索すると使えそうなアイコンがヒットします。

【はてなブックマーク】
ここにアイコンの名前が入ります

Font Awesomeは海外のサービスなので、日本独自のSNSである「はてなブックマーク」のロゴは用意されていません。

CSSを使って公式ぽいロゴを表現します。

.sns_btn_are ul li .fa-hatebu:before {
    content: "B!";
    font-family: Verdana;
    font-weight: bold;
    font-style: normal;
}

fa-hatebuクラスに疑似要素で、はてぶのロゴ「B!」をテキストで設定します。
font-familyを「Verdana」にして太字にすると公式っぽく見えます。

4.SNSの文言

common_txtクラスに各SNSの名前などを記述します。不要なら記述しなくても問題ありません。基本的に運営者の自由です。

CSSのポイント

SNSシェアボタンのデザインは特に決まりはないので、自由にデザインしてOKです。

参考までにMIGOブログのSNSシェアボタンで使用している各SNSのブランドカラー(16進数)を載せておきます。

  • twitter:#55acee
  • facebook:#305097
  • google+:#db4a39
  • はてなブックマーク:#00a4de

JavaScript(ajax、jQuery)で各SNSのシェア数を取得する

JavaScript(ajax、jQuery)を使用して各SNSシェア数(twitterは除く)を取得して、表示させます。



jQueryを読み込みます。

次に実際にシェア数を取得します。ajaxを使って非同期通信で取得します。

facebook

// 取得するURL
var url = "【シェア数を取得するURL】" ;

// facebook
$.ajax({
    // オプションの指定
    url: '//graph.facebook.com/?id=' + encodeURIComponent( url ) ,
    dataType: 'jsonp' ,
    // 取得に成功した時の処理
    success:function( obj ) {
        var count = 0 ;
        //データが存在する場合だけ代入
        if( obj.share ) {
            count = obj.share.share_count ;
        }
        $('.fb_result .count').html( count );
    } ,
    //取得に失敗した時の処理
    error:function() {
        $('.fb_result .count').html(0);
        return false;
    } ,
    //完了した時の処理
    complete:function() {
        return false ;
    }
});

$.ajax()、facebookのAPI「Graph API」を使い、非同期通信でシェア数を取得します。

変数urlにシェア数を取得したいURLを設定します。

シェア数の取得に成功したら、シェア数を.html()で表示させます。もしも取得に失敗した場合は、そのまま0を表示させます。

google+

// 取得するURL
var url = "【シェア数を取得するURL】" ;

$.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=" + url + "' 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(/window\.__SSR[\s*]=[\s*]{c:[\s*](\d+)/i);
        var count = (match != null) ? match[1] : 0;

        $('.gp_result .count').text(count);
    } ,
    //取得に失敗した時の処理
    error:function() {
        $('.gp_result .count').text(0);
        return false;
    } ,
    //完了した時の処理
    complete:function() {
        return false ;
    }
});

google+のシェア数を取得する公式APIが無いので、yahooのAPI経由でシェア数を取得します。

変数urlにシェア数を取得したいURLを設定します。

シェア数の取得に成功したら、シェア数を.html()で表示させます。もしも取得に失敗した場合は、そのまま0を表示させます。

はてなブックマーク

// 取得するURL
var url = "【シェア数を取得するURL】" ;

// はてブ
$.ajax({
    url: 'http://api.b.st-hatena.com/entry.count?url=' + encodeURIComponent( url ) ,
    dataType: 'jsonp' ,
    // 取得に成功した時の処理
    success:function( count )
    {
        //データが存在しない場合は0扱い
        if( typeof( count ) == 'undefined' || !count )
        {
            count = 0 ;
        }
        // シェアカウントをhtmlへ書き出す
        $('.hb_result .count').html( count );
    } ,
    //取得に失敗した時の処理
    error:function()
    {
        $('.hb_result .count').html(0);
        return false;
    } ,
    //完了した時の処理
    complete:function()
    {
        return false ;
    }
}) ;

$.ajax()、はてなブックマーク件数取得APIを使い、非同期通信でシェア数を取得します。

変数urlにシェア数を取得したいURLを設定します。

シェア数の取得に成功したら、シェア数を.html()で表示させます。もしも取得に失敗した場合は、そのまま0を表示させます。

まとめ

SNSごとにAPIの有無や形式の違いによりシェア数取得の方法が異なりますが、一通りオリジナルのシェアボタンを実装することができました。

オリジナルシェアボタンの実装は、各シェアボタンで仕様が異なるため、処理がシェアボタンの分だけ必要になります。

ただ、表示速度改善やデザイン性向上、ajaxの知識向上などメリットも多いので、ぜひ時間を見つけて実装してみてください。

関連記事