7

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();
Miguel Borges
  • 7,549
  • 8
  • 39
  • 57
  • 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: https://developers.google.com/+/plugins/+1button/#script-parameters – Kyle Macey Aug 12 '12 at 06:44
  • google+ use the snippets for this. https://developers.google.com/+/plugins/snippet/ – Miguel Borges Aug 14 '12 at 18:38

2 Answers2

2

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.

mimming
  • 13,974
  • 3
  • 45
  • 74
  • 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. – Miguel Borges Aug 11 '12 at 20:31
  • 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. – mimming Aug 13 '12 at 20:11
  • 1
    I add the attribute data-href, but now the snippet, not work. – Miguel Borges Aug 14 '12 at 18:34
  • What if your description is longer then one word, with a space. This method breaks. And is therefor useless. – Dr Upvote May 06 '15 at 19:14
  • If there's a character that can't be in a URI, URI encode it. A space would be %20 – mimming May 06 '15 at 21:29
1

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.

Kyle Macey
  • 8,074
  • 2
  • 38
  • 78
  • 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 http://stackoverflow.com/a/417184/628859 – Kyle Macey Aug 10 '12 at 23:54
  • 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. – Miguel Borges Aug 11 '12 at 20:32
  • @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 – Kyle Macey Aug 11 '12 at 20:56