将文字设置为谷歌+分享按钮 [英] set text to google+ share button

问题描述

我正在创建一个包含g + share按钮的页面，但我想动态更改要共享的内容的描述。自定义共享按钮我正在使用带有Open Graph协议的代码段。

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?

我在按钮twitte遇到了同样的问题，但设法解决了这个问题：

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

推荐答案

您网页的代码段由服务器生成 - 侧面提取您的页面。页面提取程序不执行JavaScript。这就是为什么您对该元素所做的更改未在您的共享中表达的原因。

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.

您可以使用get参数并指定目标来解决此问题。

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

1. 将您的页面配置为接受GET参数的描述。例如， http://exmaple.com?desc=foobar 会导致您的Open Graph标记看起来像什么像这样：< meta property =og：descriptioncontent =foobar/>


2. 当你渲染你的分享时链接，共享按钮或+1按钮，使用GET参数指定具有所需描述的页面。对于共享按钮，您的标记可能如下所示：< div class =g-plusdata-action =sharedata-href =http://example.com/?desc = foobar>< / div>

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>

然而，这将影响计数。如果您将此技术与+1按钮一起使用，则每个描述将被视为不同的页面，并且计数将单独累积。

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.

这篇关于将文字设置为谷歌+分享按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！