JQuery Mobile 使用 AJAX 和 Facebook Like、Twitter Tweet、G+答案

【问题标题】：JQuery Mobile using AJAX and Facebook Like, Twitter Tweet, G+JQuery Mobile 使用 AJAX 和 Facebook Like、Twitter Tweet、G+
【发布时间】：2012-09-12 18:19:41
【问题描述】：

我希望在使用 JQuery Mobile 构建的网站的每个页面上都有类似 fb 的按钮、twitter 的推文按钮和 G+ 等价物，并且不放弃 AJAX 转换。

我可以让它适用于多页（将 example0.html#1 链接到 example0.html#2 并返回）

我可以使用自定义的基本 javascript（如 alert('*');）以正确运行（在每个页面显示一次，example1.html example2.html）。使用 jquery .off 和 .on。

我可以关闭 ajax 来完成它。工作正常 example1.html example2.html

但是，对于带有 ajax 和更多单页的社交按钮来说，它不能很好地实现。按钮应显示在每一页上，例如示例 1.html 示例 2.html

任何社交按钮的工作示例？

（类似的问题，但也没有工作示例：Integrating jQuery Mobile with Facebook Like and Twitter Tweet）

完整示例，适用于第一个（已加载）页面，不适用于其他页面。

<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>

【问题讨论】：

您还没有发布任何代码，我们如何在不知道要修复什么的情况下提出修复建议？

标签： ajax jquery-mobile twitter facebook-like google-plus-one

【解决方案1】：

在推文按钮嵌入代码中，有一个 if 语句检查 id 为“twitter-wjs”的元素。在页面加载之前删除此元素会使推文按钮起作用。

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

这里修复了 Facebook 的“赞”按钮。我不会假装理解它，我只是发现了这个谷歌搜索，它似乎使它工作。

$(document).bind('pageshow', function() {
    try{
        FB.XFBML.parse();
    } catch(err){}
});

【讨论】：

【解决方案2】：

Garyv已经给了你Facebook的正确答案：

FB.XFBML.parse();

要动态地重新加载推文按钮，您正在寻找的功能是：

twttr.widgets.load();

您应该在通过 ajax 加载内容后应用这两个函数。

更新：

根据 Google+ 按钮，答案是：

gapi.plusone.go();

（在这里找到它：Google plus-one button on a page that is refreshed with AJAX

【讨论】：

gapi.plusone.go(); 现在是gapi.plus.go();