1

I currently have a site that includes the Google Share button (along with Facebook and Twitter) on a social networking widget that I'm creating. What I would like to do is to be able to type some text in a textarea field, and upon pressing a 'Send' button, the text is shared to a Google+ user's wall (I already have Facebook and Twitter posts working). Now I know there is a field for Google+'s share button called 'data-prefilltext', and this is the field that I'm trying to set with the message from the textarea. When I press the 'Send' button, I can see the 'data-prefilltext' field value change, but in the popup window, I do not see the text change. Below is the code:

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

Like I said, I can see the attribute's value change upon inspection the element within Firebug or Google's Developer Console, however that change in text isn't reflected when the Google Share popup window is opened.

Any help would be greatly appreciated as I'm a bit stumped at the moment. Thank everyone in advance.

Hezell
  • 13
  • 3

2 Answers2

1

I also have face the same problem.After long struggle i have found solution.I am sharing answer with u.

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

While you are getting response from ajax you have to call again google plus share js file after ajax response.

Thaya
  • 34
  • 6
-1

You could render the button with javascript, with the next code example:

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
user4093303
  • 1
  • 1