*当サイトのリンクにはAmazonアソシエイトやアフィリエイトリンクが含まれております。

プラグインを使わないソーシャルボタン(非同期版)

やっとソーシャルボタンが全部非同期になったのでコードを書いておきます。
僕自身も色々な方を参考にしているので、どなたかのお役に立てれば幸いです。

広告

ソーシャルボタンの非同期バージョン

毎度ながらさくっとコードです。

function social_count(url, postid, jsurl) {
  $.ajax({
      url      : 'https://graph.facebook.com/?id=' + url,
      dataType : 'jsonp',
      success  : function(json){ $('#' + postid + ' .facebook .scount').text( json.shares || 0 ); }
  });
  $.ajax({
      url      : 'http://urls.api.twitter.com/1/urls/count.json?url=' + url,
      dataType : 'jsonp',
      success  : function(json){ $('#' + postid + ' .twitter .scount').text( json.count || 0 ); }
  });
  $.ajax({
      url      : 'http://api.b.st-hatena.com/entry.count?url='+ url,
      dataType : 'jsonp',
      success  : function(json){ $('#' + postid + ' .hatena .scount').text( json || 0 ); }
  });
    var site_url = 'https://apis.google.com/_/+1/fastbutton?url='+ url;
        $.post( jsurl + "/ファイル名.php",
        { url: site_url },
        function(data, textStatus) {
            if( textStatus == 'success') {
                $('.googleplus .scount').html(data['gcount']);
            }
        }
        ,'json'
    );
}

まず、ソーシャルカウント取得の関数をjsで作ります。
参考にさせて頂いたのは、コチラ>>http://www.webantena.net/wordpress/jquery-get-social-count/
上のコードはヘッド内とかjsファイルの中へ。あとjqueryが読み込まれているのが前提。

ajax通信までは本家に直接とりに行きます。
postでやってるのがgoogl+1のカウント。jsonpでカウント取れないので、コチラのphpでデータを取得して再度jqueryに行って出力します。
ajaxで書いても当然大丈夫。ある事ではまってしまって、ウチではpostになりました。

phpのコードは

<?php
$url = $_POST['url'];
$buff=join(@file($url));
$encode = mb_detect_encoding($buff, 'eucjp-win, UTF-8, sjis-win');
$buff = mb_convert_encoding($buff, 'UTF-8', $encode);
preg_match('/[2,([0-9.]+),[/',$buff,$gcount);
$json['gcount'] = print_r($gcount[1],true);
echo json_encode($json);
?>

こんな感じ。
これをカウントphpとかでファイルを製作。

そして発動させるスクリプト。

$(function() {social_count('<?php the_permalink(); ?>', 'sns-<?php the_ID(); ?>', '<?php echo get_template_directory_uri(); ?>');});

これをフッターの下で読み込ませます。
urlとID(上で使わなければ必要ない)とテンプレートのディレクトリを渡します。

実はココでハマていました。
スクリプトにphpのURLを書く時に絶対パスで書きたい。というか相対パスだと条件次第で動かない感じだったんです。相当ドツボだったんですが、パーマリンクと一緒にディレクトリのurlも渡しちゃえば良いじゃん!! と言う事で解決。
これなら汎用性が有るので配布で使えるわけです。
こんな単純な事に随分時間を割いてしまいました・・・

一応これだと大半をjqueryでやりますので、httpだと大丈夫ですがSSLかしてるとダメです。当テーマではSSL化に対応する為に少し仕様を変えていますので、もし常時SSLで使いたい時でも大丈夫です。
ではでは

追記 修正版を書きました。
プラグインを使わないソーシャルボタン(修正版)


おすすめのコンテンツ

広告

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください