クラウドファンディング ページを作成中で、現在の進行状況を示すダッシュボードを作成したいと考えています: http://hyve.me/crowdfunder
私が使用するJavaScriptは次のとおりです。
<script type="text/javascript">
// Facebook Likes
$.getJSON("https://graph.facebook.com/?ids=hyve.me", function (response) {
$("#facebooklikes").text(response["hyve.me"].likes);
});
// registered Users
$.ajax({
type: 'GET',
url: 'http://www.hyve.me/usercount',
dataType: 'JSON',
success: function (response) {
$("#usercount").text = response;
}
});
// days left
jQuery(document).ready(function($) {
today = new Date();
deadline = new Date("October 31, 2013");
msPerDay = 24 * 60 * 60 * 1000 ;
timeLeft = (deadline.getTime() - today.getTime());
$("#countdown").text(Math.floor(timeLeft / msPerDay));
});
// progress bar for shares
$.getJSON("https://api-public.addthis.com/url/shares.json?url=http%3A%2F%2Fwww.hyve.me%2Fcrowdfunder%2F", function (response) {
var mentions = response.shares;
document.getElementById("myProgressBar_Success").setAttribute('style', "width: " + (mentions / 6).toString() + "%;");
document.getElementById("myProgressBar_Warning").setAttribute('style', "width: " + ((600 - mentions) / 6).toString() + "%;");
});
</script>
ダッシュボードの HTML は次のとおりです。
<div class="span8 offset2">
<div class="row-fluid statistics">
<div class="span4"><div class="linediv-l"><h3 id="facebooklikes">0</h3><p>FB <i class="icon-thumbs-up"></i></p></div></div>
<div class="span4"><div class="linediv-c"><h3 id="usercount">0</h3><p>Hyve-Users</p></div></div>
<div class="span4"><div class="linediv-r"><h3 id="countdown">0</h3><p>days left</p></div></div>
</div>
</div>
<div class="row-fluid">
<div class="span10 offset1">
<div class="thermometer progress active">
<div class="bar bar-success" style="width: 50%;" id="myProgressBar_Success"></div>
<div class="bar bar-warning" style="width: 50%;" id="myProgressBar_Warning"></div>
</div>
</div>
</div>
今、私はいくつかの質問があります:
- Facebook のいいねの数は、Chrome (v29) と Firefox (v23) では正しく表示されますが、Internet Explorer (v9) では正しく表示されません。このブラウザーを独立させる方法はありますか?
- 登録ユーザー数は、同じドメイン (hyve.me) にいる場合にのみ機能します。したがって、これは本番環境でのみテストできますが、開発 (AWS) またはステージング (heroku.com) ではテストできません。これを修正する方法はありますか?
- addthis.com からのデータに従って進行状況バーが更新されない - なぜ getJSON() は Facebook-Graph で動作し、AddThis の Web サービスでは動作しないのですか?
これは Stackoverflow に関する私の最初の質問であり、過去 2 日間かけて答えを見つけました。たぶん、ここの誰かが私を正しい方向に向けることができます.
前もって感謝します!
-クリストフ