谷歌加分享按钮，当前网址而不是指定网址？

Question

如果需要澄清，请告诉我。如果做不到，也请告诉我。我还在拼命想弄清楚这一点

我在以下站点上按照 Google 的“共享”按钮开发指南进行操作：

https://developers.google.com/+/web/share/

而且我似乎无法弄清楚，如果可能的话，如何使用自定义图标并使用当前 URL 而不是必须指定 URL。

我发现他们网站的这个部分指定了一个锚标记地址：

"https://plus.google.com/share?url={URL}"

这将允许我使用自定义图标（据我所知，这是我可以使用自定义图标的唯一方法）以及其他一些自定义参数。但看起来这个方法需要一个指定的 URL，据我所知，它没有提供根据当前页面动态创建链接的方法。

如果我使用顶部的代码生成器，它将使用当前页面，但它会调用 Google 托管的 Java 脚本，此外，它是一个悬停链接，当我将鼠标悬停在图标上时会弹出。当然，我也不能在生成器中使用自定义图标。

我一直在谷歌搜索我能想到的每个搜索词并搜索这个网站，但我还没有找到其他人提出这个问题。经过大约 20 到 30 分钟的搜索后，我发现我无法通过搜索找到答案，因此如果已得到解答，我深表歉意。

只是我的一些经验背景来说明我所处的位置：我对 HTML 和 CSS 的工作原理有相当的了解。然而，Javascript，我了解非常非常基本的理论，仅此而已。不过，我绝对打算学习，因为这将证明是一项非常有价值的技能。

非常感谢！！

我想我知道需要做什么，但是......我不知道该怎么做（或者它是否会起作用）：|

我的共享链接需要链接到一个脚本，该脚本查看当前页面的 URL，然后获取该信息，并从中创建一个动态链接，将用户带到以下链接：https://plus.google.com/share?url={URL from query会在这里}。

我认为这可能会奏效……听起来会。有什么想法吗？如果是这样，任何简单的脚本都可以做到这一点？

再次感谢！！

--我终于找到了一些可行的方法，但它使用了 Javascript，我并不完全理解它，只需要对其进行调整即可。我花了很长时间才找到它，但它适用于 Google Plus、Facebook 或 Twitter！ （而且我确信它可以与任何其他提供需要指定 URL 的共享链接的网站一起使用）

在这里，我仍在寻找更好的解决方案，但这正是我所寻找的：

<a href="javascript:(
function(){
var w=480;var h=380;
var x=Number((window.screen.width-w)/2);
var y=Number((window.screen.height-h)/2);
window.open('https://plus.google.com/share?url='+encodeURIComponent(location.href)+'
  &title='+encodeURIComponent(document.title),'','width='+w+',height='+h+',left='+x+',top='+y    +',
  scrollbars=no');
})();" style="background: url(/wp-content/themes/HTML5/images/googleplus.png) no-repeat  scroll left center transparent;">
Share to Google+</a>

Answer 1

编辑！在花了几个月的时间学习 Javascript 之后，我构建了一个比下面提供的解决方案要好得多的解决方案。我会留下我原来的答案，但是，我想把这个更好的解决方案放在顶部。

此解决方案应该适用于任何为您提供自定义共享 URL（也就是说，允许您手动输入要共享的地址的 URL）的社交媒体平台。

这就是它的工作原理（如果有人对 JS 有更多经验有任何建​​议或调整，请告诉我）。

1. 我将变量分配给document.URL 和document.titleproperties。
2. 我编写了一个命名函数（我叫我的，socialShare），它设置为通过window.onloadevent 上的匿名函数运行。
3. socialShare 函数将变量分配给我的社交按钮在 HTML 中的位置。在我的例子中，我使用 ID 来定位元素。这些变量的目的纯粹是为了美观（我使用这些变量来动态重写 HTML 代码，这样当您将鼠标悬停在分享按钮上时，它会显示正确的 URL，用于分享您所在的当前页面）
   • var fbShare = document.getElementById("fbShare");
   • var gplusShare = document.getElementById("gplusShare");
   • twitterShare = document.getElementById("twitterShare");

4. 然后我编写了三个独立的匿名函数，一个用于每个社交媒体平台。每个函数有两个语句。这些函数的工作方式如下：第一部分是分配给 ID 为 fbShare 的 HTML 元素位置的变量。第二部分告诉它在单击该元素时运行该函数； .onclick。第三部分是单击该元素时将运行的匿名函数。该函数的第一条语句将打开一个新窗口； window.open;在那个新窗口中，它将打开通过提供 window.open 方法参数指定的 URL。参数如下(URL,name,specs) 其中URL 是您要共享的URL，name 是可选的，如空引号所示留空，最后specs 是您指定窗口属性的位置（即：宽度和高度）。第一个参数，URL：("https://www.facebook.com/sharer.php?u="+currentURL,currentURL 是之前分配的全局变量，它将放置当前文档的 URL，而不是 currentURL。第二个参数name："",留空，因为它是可选的。第三个参数，specs："height=368,width=600,left=100,top=100,menubar=0"); 这些是以逗号分隔的项目列表。在我的例子中，我指定了窗口的高度、宽度和位置，并禁用了菜单栏。最后，第二个语句return false; 告诉浏览器不要跟随 HTML 代码中的链接。如果未指定，则浏览器将跟随 HTML 中的 URL，并打开一个新窗口。有关window.open 方法的更多信息，请参阅此新答案底部的链接。

   • fbShare.onclick = function() { window.open("https://www.facebook.com/sharer.php?u="+currentURL,"","height=368,width=600,left=100,top=100,menubar=0"); return false; }

   • gplusShare.onclick = function() { window.open("https://plus.google.com/share?url="+currentURL,"","height=550,width=525,left=100,top=100,menubar=0"); return false; }

   • twitterShare.onclick = function() { window.open("https://twitter.com/share?url="+currentURL+"&text="+currentTitle,"","height=260,width=500,left=100,top=100,menubar=0"); return false; }

5. 最后，我修改了每个社交媒体按钮的 HTML href 元素，以便当用户将鼠标悬停在共享按钮上时，他们会在浏览器状态栏中看到正确的共享 URL。该语句的第一部分获取元素 id，fbShare，第二部分告诉它设置一个属性，.setAttribute。然后我们传入我们想要更改的属性名称，在这种情况下为("href",，然后我们传入我们想要的新属性值，"http://www.facebook.com/sharer.php?u="+currentURL); currentURL 这里和之前一样.它是保存当前页面 URL 值的变量。

   • fbShare.setAttribute("href","http://www.facebook.com/sharer.php?u="+currentURL);

   • gplusShare.setAttribute("href","https://plus.google.com/share?url="+currentURL);

   • twitterShare.setAttribute("href","https://twitter.com/share?url="+currentURL+"&text="+currentTitle);

这就是它的全部内容！我希望我写得很好，我希望它相对容易理解。如果有任何专业人士有任何建议，请随时折腾并提出您的建议！ :)

我的 JS 文件
http://jrltest.host-ed.me/_js/share.js

w3schools.com 上有关 window.open 方法信息的链接
http://www.w3schools.com/jsref/met_win_open.asp

w3schools.com 上有关 .setattribute 方法信息的链接
http://www.w3schools.com/jsref/met_element_setattribute.asp

---

旧答案：我想我会添加这个作为答案。它可以解决问题并解决我遇到的确切问题。 “window.open”之后的 URL 将是社交媒体的共享链接（在本例中，它是 google plus 的共享链接。有一些变量可以修改或删除。任何擅长脚本编写的人都可能创建一个 PHP 版本（我会喜欢）或修改它以更好地满足他们的需求。无论如何，我希望这会帮助别人！

<a href="javascript:(
function(){
var w=480;var h=380;
var x=Number((window.screen.width-w)/2);
var y=Number((window.screen.height-h)/2);
window.open('https://plus.google.com/share?url='+encodeURIComponent(location.href)+'
  &title='+encodeURIComponent(document.title),'','width='+w+',height='+h+',left='+x+',top='+y+',
  scrollbars=no');
  })();" style="background: url(/wp-content/themes/HTML5/images/googleplus.png) no-repeat scroll left center transparent;">
Share to Google+</a>

Answer 2

Native Window Open 功能不是一个好主意，Mozilla 和 Chrome 等浏览器会弹出。我认为最好使用一个插件来打开一个带有共享 url 的新窗口，比如 jquery popup 插件。对我来说工作得很好，浏览器无法阻止它。

将粘贴复制到一个新的 js 文件中，如原始名称：'jquery.popup.js'

jQuery.fn.popup = function(options) {
var defaults = {
    width: screen.width/2,
    height: screen.height/2,
    titlebar: false,
    status: false,
    resizable: true,
    toolbar: false,
    scrollbars: true,
    menubar: false
};
var options = jQuery.extend(defaults, options);

Boolean.prototype.setProperty = function() {
    if (this == true) { return "yes"; } else { return "no"; }
};

jQuery(this).click( function() {
    var target = this.target;
    var href = this.href;
    var posY = (parseInt(screen.height/2)) - (parseInt(options.height/2));
    var posX = (parseInt(screen.width/2)) - (parseInt(options.width/2));
    var win = window.open(href, target, 'titlebar=' + options.titlebar.setProperty() + ', screenX='+ posX +', screenY='+ posY +', left='+ posX +', top='+ posY +', status=' + options.status.setProperty() + ', resizable=' + options.resizable.setProperty() + ', toolbar=' + options.toolbar.setProperty() + ', scrollbars=' + options.scrollbars.setProperty() + ', menubar=' + options.menubar.setProperty() + ', width='+ options.width +', height='+ options.height);
    win.focus();
    return false;
});
return this;
};    

用法：

<script src="jquery.last.js"></script>

<script src="jquery.popup.js"></script>

<script>
jQuery(function(){
 //simple load
 jQuery(".popupLink").popup({ width: 640, height: 480 });
 });
</script>
<a class='popupLink' href="https://www.facebook.com/share.php?u=<?php echo URL;?>">Share Facebook</a>

您还可以传递插件示例选项等选项

<script>
jQuery(".popupLink").popup({ width: 640, height: 480, resizable: false, menubar: true });
</script>

作者网站不存在了。这是插件 cmets 附带的信息

/* * jQuery popup v1 - 一个 jQuery 弹出插件。 * 乔丹·托马斯 - http://labs.wondergroup.com * 许可下做任何你想做的许可。 *如果您愿意，请保持此消息完整，以便 * 其他人可以找到原点。 */

Answer 3

您也可以使用 PHP 来调整窗口大小，但这里是 PHP 版本...玩得开心 :) 另见：PHP - Getting Current URL

<?
echo '<a href="https://plus.google.com/share?url='.$_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI].'" 
target="_blank"><img src="images/google-custom-icon.png"></a>';
?>