Google Share 按钮动态设置 data-prefilltext答案

【问题标题】：Google Share button set data-prefilltext dynamicallyGoogle Share 按钮动态设置 data-prefilltext
【发布时间】：2014-04-03 15:00:51
【问题描述】：

我目前有一个网站，在我正在创建的社交网络小部件上包含 Google 分享按钮（以及 Facebook 和 Twitter）。我想做的是能够在 textarea 字段中输入一些文本，并在按下“发送”按钮后，将文本共享到 Google+ 用户的墙上（我已经有 Facebook 和 Twitter 帖子工作）。现在我知道 Google+ 的共享按钮有一个名为“data-prefilltext”的字段，这是我尝试使用来自 textarea 的消息设置的字段。当我按下“发送”按钮时，我可以看到“数据预填充文本”字段值发生变化，但在弹出窗口中，我看不到文本变化。下面是代码：

HTML：

<div id="googleplus-selector" title="App is what's new! Share it with your circles in Google+"
    class="social-networking-icons g-interactivepost"
    data-contenturl="http://plus.google.com/pages/"
    data-contentdeeplinkid="/pages"
    data-clientid="clientid.apps.googleusercontent.com"
    data-scope="https://www.googleapis.com/auth/youtube.readonly"
    data-cookiepolicy="single_host_origin"
    data-prefilltext="Share App with your circle of friends now!"
    data-calltoactionlabel="TRY_IT"
    data-calltoactionurl="http://plus.google.com/pages/"
    data-calltoactiondeeplinkid="/pages/create"
    data-href="http://mysiteurl">
        <div class="widget-mask"></div>
</div>

Javascript/jQuery：

var textElement = $('#social-message-text');
var text = textElement.val();
$('#google-plus-share-button').attr('data-prefilltext', text);

就像我说的，在 Firebug 或 Google 的开发者控制台中检查元素时，我可以看到属性值的变化，但是当打开 Google Share 弹出窗口时，文本的变化不会反映出来。

任何帮助将不胜感激，因为我现在有点难过。提前感谢大家。

【问题讨论】：

标签： javascript jquery google-plus google-plus-one share-button

【解决方案1】：

我也面临同样的问题。经过长期的努力，我找到了解决方案。我正在与你分享答案。

<html>
  <head>
    <title>Share Demo: Deferred execution with language code</title>
    <link rel="canonical" href="http://www.example.com" />
  </head>
  <body>
  <script>
  window.___gcfg = {
            lang: 'en-US',
            parsetags: 'explicit'
          };
  </script>
  <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
    <div id ="sharePost">Share</div>
 <script>
     (function() {
           var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
           po.src = 'http://apis.google.com/js/client:plusone.js';
           var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
         })();
     var options = {
                contenturl: 'http://www.google.com',
                contentdeeplinkid: '/pages',
                clientid: 'xxxxxxxxxxxxx.apps.googleusercontent.com',
                cookiepolicy: 'single_host_origin',
                prefilltext: 'Hai happy friday',
                calltoactionlabel: 'INVITE',
                calltoactionurl: 'http://www.google.com'
              };
              // Call the render method when appropriate within your app to display
              // the button.
              gapi.interactivepost.render('sharePost', options);

      </script>
  </body>
</html>

当您收到来自 ajax 的响应时，您必须在 ajax 响应后再次调用 google plus 共享 js 文件。

【讨论】：

【解决方案2】：

您可以使用 javascript 渲染按钮，使用下面的代码示例：

var options = {
                contenturl: 'https://dev.diesocialisten.at/google+/?v=5',
                clientid: 'YOUR CLIENT ID',
                cookiepolicy: 'single_host_origin',
                prefilltext: 'Developers, you should check this out!',
                calltoactionlabel: 'LEARN_MORE',
                calltoactionurl: 'https://dev.diesocialisten.at/google+/?v=5'
};
gapi.interactivepost.render('share-button', options); //button with the ID share-button

【讨论】：