2

JQuery Mobileを使用して構築され、AJAXトランジションをあきらめないように、Webサイトのすべてのページにfb likeボタン、twitterのツイートボタン、および同等のG+を配置したいと考えています。

マルチページで動作させることができます（example0.html＃1をexample0.html＃2にリンクして元に戻す）

カスタムの基本的なJavaScript（alert（'*'）;など）を正しく実行するように動作させることができます（すべてのページに1回表示、example1.html <-> example2.html）。jquery.offおよび.onを使用します。

ajaxのスイッチを切ることで完了できます。正常に動作しますexample1.html<->example2.html

ただし、ajaxや単一ページの多いソーシャルボタンではうまくいきません。ボタンはすべてのページに表示する必要があります。例：example1.html <-> example2.html

ソーシャルボタンの実例はありますか？

（同様の質問ですが、実際の例はありません：jQueryMobileとFacebookLikeおよびTwitterTweetの統合）

完全な例は、最初の（ロードされた）ページで機能し、他のページでは機能しません。

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>

<div data-role="page" id="page1" data-title="Page 1">
  <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=121542504547391";
      fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>
  <div class="fb-like" data-href="http://localhost" data-send="false" data-layout="button_count" data-width="250" data-show-faces="false"></div>
  <a href="#page2" data-role="button" data-icon="arrow-r" data-iconpos="right">Page 2</a>
</div>

<div data-role="page" id="page2" data-title="Page 2">
  <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=121542504547391";
      fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>
  <div class="fb-like" data-href="http://localhost" data-send="false" data-layout="button_count" data-width="250" data-show-faces="false"></div>
  <a href="#page1" data-role="button" data-icon="arrow-l">Page 1</a>
</div>

</body>
</html>

4

2 に答える 2

4

ツイート ボタンの埋め込みコードには、id 'twitter-wjs' を持つ要素をチェックする if ステートメントがあります。ページが読み込まれる前にこの要素を削除すると、ツイート ボタンが機能します。

$(document).bind('pagebeforeload', function(){
    $('#twitter-wjs').remove();
});

Facebookの「いいね！」ボタンの修正です。私はそれを理解するふりをしません。このグーグルを見つけたばかりで、うまくいくようです。

$(document).bind('pageshow', function() {
    try{
        FB.XFBML.parse();
    } catch(err){}
});
于 2012-11-09T18:17:21.660 に答える
2

GaryvはすでにFacebookの正しい答えをあなたに与えました：

FB.XFBML.parse();

ツイートボタンを動的にリロードするには、探している関数は次のとおりです。

twttr.widgets.load();

ajaxを介してコンテンツをロードした後、両方の機能を適用する必要があります。

アップデート：

Google+ボタンによると、答えは次のとおりです。

gapi.plusone.go();

（ここで見つかりました：AJAXで更新されたページのGoogleプラス1ボタン

于 2012-11-22T21:39:43.220 に答える