ツイート数といいね数をajaxで表示したい


はてなブックマークと同じようなサイトに、
各記事ごとにツイート数といいね数を表示させたいと思ってます。

いま、興味のあるジャンルの多数のブログからRSSを拾って、
記事を一覧で表示させるサイトを作っています。

そこで、コピペしたPHPでツイート数といいね数を表示させたんですが、
ものすごく重いページになってしまいました。

(取得した全部のRSSデータをforeachで回していて、ツイート数といいね数を記事分だけ取得してからのページが表示されるためだと思います)

ページは先に表示されて、ツイート数といいね数だけajaxで順次表示させたいのですが、出来るのでしょうか?

ajaxとか全然わからないのでソース付きで教えてもらえると助かります

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2011/11/10 13:12:36
  • 終了:2011/11/11 20:58:17

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4489ベストアンサー獲得回数18572011/11/10 13:43:41

ポイント460pt

いろいろな API があると思うのですが、一例を。

  var url = ...;    // 対象の URL

  // いいね!
  $.ajax({
      url      : 'https://graph.facebook.com/' + url,
      dataType : 'jsonp',
      success  : function(json){ $('#facebook .count').text( json.shares || 0 ); }
  });

  // ツィート
  $.ajax({
      url      : 'http://urls.api.twitter.com/1/urls/count.json?url=' + url,
      dataType : 'jsonp',
      success  : function(json){ $('#twitter .count').text( json.count || 0 ); }
  });
});

jsFiddle で、お試しコードを書いてみました。
http://jsfiddle.net/ReK6H/



(追記)

1記事(1URL)ごとの表示にするにはどうしたらいいでしょうか?

javascript の変数 url が、グローバルなスコープなので、非同期で動作している処理が完了する前に、次々と書き換えられてしまっているからです。
何度も呼び出すことを想定して、関数にしてみました。
http://jsfiddle.net/nSv38/

PHP のコードに組み込むと、以下のような感じになると思います。

<script>
function get_tweet_count(url, dest) {
  $.ajax({
      url      : 'https://graph.facebook.com/' + url,
      dataType : 'jsonp',
      success  : function(json){ $('#' + dest + ' .facebook .count').text( json.shares || 0 ); }
  });
  $.ajax({
      url      : 'http://urls.api.twitter.com/1/urls/count.json?url=' + url,
      dataType : 'jsonp',
      success  : function(json){ $('#' + dest + ' .twitter .count').text( json.count || 0 ); }
  });
}
</script>

<?php
    while (...):    /* 記事のループ *
?>

<?php
    $id = ...;      /* 記事をユニークに表す ID */
    $url = ...;     /* 記事の URL */
<hr>
<div id="<?php echo $id ?>">     <!-- ひとつの記事を、ユニークな ID の DIV で囲む -->
    ※記事の内容
<div class="facebook">いいね: <span class="count"></span></div>
<div class="twitter">ツィート: <span class="count"></span></div>
</div>                      <!-- 記事の終了 -

<script>
/* 記事の「いいね!」と「Tweet」をカウントして表示する */
$(function() {
    get_tweet_count('<?php echo $url ?>', '<?php echo $id ?>');
});
</script>

<?php
    endwhile;
?>

php は、あんまり得意じゃないので、ちょっと怪しいコードがあるかもしれませんが、ご容赦を。

他1件のコメントを見る
id:a-kuma3

url がグローバルな変数になってるので、非同期で動作している ajax な処理が
完了する前に、次々と書き変わってしまうからです。
処理を見直して、回答に追記しました。

2011/11/10 23:32:08
id:gesodegeso

またまたありがとうございます。
書いてくださったコードを当てはめてなんとかできそうです。
ループもこういう書き方ではさめるんですね。勉強になります。

2011/11/11 20:56:51

その他の回答(2件)

id:a-kuma3 No.1

a-kuma3回答回数4489ベストアンサー獲得回数18572011/11/10 13:43:41ここでベストアンサー

ポイント460pt

いろいろな API があると思うのですが、一例を。

  var url = ...;    // 対象の URL

  // いいね!
  $.ajax({
      url      : 'https://graph.facebook.com/' + url,
      dataType : 'jsonp',
      success  : function(json){ $('#facebook .count').text( json.shares || 0 ); }
  });

  // ツィート
  $.ajax({
      url      : 'http://urls.api.twitter.com/1/urls/count.json?url=' + url,
      dataType : 'jsonp',
      success  : function(json){ $('#twitter .count').text( json.count || 0 ); }
  });
});

jsFiddle で、お試しコードを書いてみました。
http://jsfiddle.net/ReK6H/



(追記)

1記事(1URL)ごとの表示にするにはどうしたらいいでしょうか?

javascript の変数 url が、グローバルなスコープなので、非同期で動作している処理が完了する前に、次々と書き換えられてしまっているからです。
何度も呼び出すことを想定して、関数にしてみました。
http://jsfiddle.net/nSv38/

PHP のコードに組み込むと、以下のような感じになると思います。

<script>
function get_tweet_count(url, dest) {
  $.ajax({
      url      : 'https://graph.facebook.com/' + url,
      dataType : 'jsonp',
      success  : function(json){ $('#' + dest + ' .facebook .count').text( json.shares || 0 ); }
  });
  $.ajax({
      url      : 'http://urls.api.twitter.com/1/urls/count.json?url=' + url,
      dataType : 'jsonp',
      success  : function(json){ $('#' + dest + ' .twitter .count').text( json.count || 0 ); }
  });
}
</script>

<?php
    while (...):    /* 記事のループ *
?>

<?php
    $id = ...;      /* 記事をユニークに表す ID */
    $url = ...;     /* 記事の URL */
<hr>
<div id="<?php echo $id ?>">     <!-- ひとつの記事を、ユニークな ID の DIV で囲む -->
    ※記事の内容
<div class="facebook">いいね: <span class="count"></span></div>
<div class="twitter">ツィート: <span class="count"></span></div>
</div>                      <!-- 記事の終了 -

<script>
/* 記事の「いいね!」と「Tweet」をカウントして表示する */
$(function() {
    get_tweet_count('<?php echo $url ?>', '<?php echo $id ?>');
});
</script>

<?php
    endwhile;
?>

php は、あんまり得意じゃないので、ちょっと怪しいコードがあるかもしれませんが、ご容赦を。

他1件のコメントを見る
id:a-kuma3

url がグローバルな変数になってるので、非同期で動作している ajax な処理が
完了する前に、次々と書き変わってしまうからです。
処理を見直して、回答に追記しました。

2011/11/10 23:32:08
id:gesodegeso

またまたありがとうございます。
書いてくださったコードを当てはめてなんとかできそうです。
ループもこういう書き方ではさめるんですね。勉強になります。

2011/11/11 20:56:51
id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922011/11/10 14:39:38

ポイント20pt

5 Simple social - Share site button

ここにサンプルコードが載っています。

一番下の例を改造すればオリジナルのつぶやきボタンとカウンターを兼ね備えたボタンが作れます。

id:gesodegeso

ありがとうございます。
すいません、追記すればよかったのですが、ボタン込みでは考えていません。
オフィシャルのコピペでも対応できるためです。

2011/11/10 22:10:27
id:kodairabase No.3

kodairabase回答回数661ベストアンサー獲得回数802011/11/10 20:36:11

ポイント20pt

jQueryを使った「いいね!」ボタン
http://indigonote.com/2011/09/14/original-like-button/


jQueryを使った「ツイート」ボタン
http://indigonote.com/2011/05/17/javascript-twitter-button/

id:gesodegeso

ありがとうございます。
すいません、追記すればよかったのですが、ボタン込みでは考えていません。

2011/11/10 22:11:50

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません