人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

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

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

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

●質問者: gesodegeso
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● a-kuma3
●460ポイント ベストアンサー

いろいろな 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 は、あんまり得意じゃないので、ちょっと怪しいコードがあるかもしれませんが、ご容赦を。


gesodegesoさんのコメント
ありがとうございます。 var urlを var url = '<?PHP $blog_url; ?>';としてみたのですが、 1記事文のツイート数といいね数の繰り返しになってしまいます。 $blog_urlは $blog_url=$data[post_url];という感じです。 1記事(1URL)ごとの表示にするにはどうしたらいいでしょうか?

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

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

2 ● Cherenkov
●20ポイント

5 Simple social - Share site button

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

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


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

3 ● kodairabase
●20ポイント

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


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


gesodegesoさんのコメント
ありがとうございます。 すいません、追記すればよかったのですが、ボタン込みでは考えていません。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ