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

Utley

Referring to your edit, Google+ does not have a parameter in their API to specify description text. You can view a complete list of their API parameters at this link: developers.google.com/+/plugins/+1button/#script-parameters – Volva

google+ use the snippets for this. developers.google.com/+/plugins/snippet – Utley

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.

Podolsk

thanks for the reply. unfortunately I can not use GET parameters, because the content of the description would be changed by clicking a button, I can not do refresh the page. – Utley

It sounds like I was unclear. You don't actually have to update the current URL in the web browser. Instead delete the current share button and render a new share button that targets the URL with the GET parameter. – Podolsk

I add the attribute data-href, but now the snippet, not work. – Utley

What if your description is longer then one word, with a space. This method breaks. And is therefor useless. – Ress

If there's a character that can't be in a URI, URI encode it. A space would be %20 – Podolsk

Answer 2

I know that Facebook caches information for the description and other meta. It seems according to this link, Google + does as well. It seems like it's cached for an indefinite amount of time... This renders your situation nearly impossible, depending on how often you want to change the content. Either that, or wait a few days, and see if it does change. I'd like to note that Jenny is also correct, but after moving through that, you most likely still won't get desirable results.

Volva

Side Note: setting a GET variable would be recognized as a separate page for each description, so it might not cache... However, be sure to escape any content you pass through the URL. Also, something long like a description should be shortened so as not to exceed any possible browser restrictions https://mcmap.net/q/22562/-what-is-the-maximum-length-of-a-url-in-different-browsers – Volva

thanks for the reply. unfortunately I can not use GET parameters, because the content of the description would be changed by clicking a button, I can not do refresh the page. – Utley

@MiguelBorges In which case, caching of the page's description will make your project pretty much impossible until Google releases a way to flush their cache via their API – Volva