set text to google+ share button

Question

I'm creating a page which has a g+ share button, but I wanted to dynamically change the description of the content to share. to customize the share button I am using the snippet with Open Graph protocol.

The solution I tried was the following, but it did not work correctly:

<meta property="og:title" content="O Fabuloso Gerador De Lero Lero v3" />
<meta property="og:image" content="images/robot.png" />
<meta property="og:description" content="..." />

$('meta[property="og:description"]').attr('content',text);

var shareButtons = $('div:first','section.share-buttons');
shareButtons.html('');
shareButtons
    .prepend('<a href="https://twitter.com/share" class="twitter-share-button" data-text="' + text.trunc(120,true) + '" data-url="http://goo.gl/1KHFM" data-lang="pt">Tweetar</a>')
    .prepend('<div class="g-plus" data-action="share" data-href="http://lerolero.miguelborges.com/t=' + new Date().getTime() + '" data-annotation="bubble"></div>');

try {
    window.twttr.widgets.load();
    window.gapi.plus.go();
} catch(e) {}

but, the content of the description in share button is always the initial.

Anyone know how to make it work?

EDIT:

I had the same problem with the button twitte but managed to solve this:

        shareButtons
            .prepend('<a href="https://twitter.com/share" class="twitter-share-button" data-text="' + text.trunc(120,true) + '" data-url="http://goo.gl/1KHFM" data-lang="pt">Tweetar</a>');

        window.twttr.widgets.load();

Answer 1

The snippet for your page is generated by a server-side fetch of your page. The page fetcher does not execute JavaScript. This is why the changes that you've made to that element are not expressed in your share.

You can work around this issue using a get parameter and by specifying a target.

1. Configure your page to accept the description as a GET paramater. For example, http://exmaple.com?desc=foobar would cause your Open Graph tag to look something like this: <meta property="og:description" content="foobar" />
2. When you render your share link, share button or +1 button, target the page with the desired description specified using the GET parameter. For the share button, your markup may look like this: <div class="g-plus" data-action="share" data-href="http://example.com/?desc=foobar"></div>

This will, however, impact counts. If you use this technique with the +1 button, each description will be considered a different page and the counts will accumulate separately.