使用ajax插入标记后显示Google Plus按钮

Question

我正在尝试加载一个页面上的google+ 1按钮，目标是通过ajax将按钮标记插入到页面中，然后调用要呈现的按钮。

第一次加载页面时，该按钮呈现良好。当从/displaycode.php获取标记，然后再次进行呈现调用时，就会出现问题。

<a href="javascript:void(0)" id="btn">REFRESH</a>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {"parsetags": "explicit"}
</script>
<script type="text/javascript">
$(function() {
  $("#btn").click(function() {
        $('#live-preview').empty();
        $("#live-preview").load('/displaycode.php #code');
        gapi.plusone.go();
    return false;
  });
    gapi.plusone.go();
});
</script>
<div id="live-preview"><div id="code"><div class="g-plusone"></div></div></div>
</div>

该问题的演示可在此处http://32px.co/googleplusdemo.php查看。提前感谢您的帮助。

Answer 1

Render方法

使用显式渲染：https://developers.google.com/+/plugins/+1button/#example-explicit-render

gapi.plusone.render('live-preview')

而不是：

gapi.plusone.go();

还需要设置"{"parsetags"："explicit"}“：

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
    {"parsetags": "explicit"}
</script>

编辑

此外，还必须确保在jQuery加载完成后调用render。因此，元素实际上在DOM中。

$(function() {
    $("#btn").click(function(e) {
        e.preventDefault();
        $('#live-preview').empty(); // Not necessary 
        $("#live-preview").load('/displaycode.php #code', function() {
            gapi.plusone.render('live-preview');
        });
    });
    gapi.plusone.render('live-preview');
});