Question

如果需要澄清，请告诉我。如果无法完成，请告诉我。我正拼命地试图解决这个问题

我在以下网站上按照Google的“开始”指南分享了“分享”按钮：

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

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

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

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

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

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

我一直在谷歌搜索我能想到的每个搜索词，并搜索这个网站，我还没有找到其他人提出这个问题。经过大约20-30分钟的搜索后我发现我不会通过搜索找到答案，所以如果有人回答，我会道歉。

我的经验只是一些背景知识，让我知道我的位置：我对HTML和CSS的运作有一个很好的把握。但是，Javascript，我理解非常基本的理论，而且就此而言。然而，我绝对打算学习，因为它将证明是一项非常有价值的技能。

非常感谢!!

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

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

我认为这可能会奏效......听起来就像是这样。有什么想法吗？如果是这样，围绕它的任何简单脚本都会这样做吗？

双重感谢!!

- 我终于发现了一些有效的东西，但是它使用的是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

EDIT！在花了几个月学习Javascript之后，我已经构建了一个比下面提供的解决方案更好的解决方案。我会留下原来的答案，但是，我想在顶部放置更好的解决方案。

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

以下是它的全部工作原理（如果有人对JS有更多经验的建议或调整，请告诉我。）

我将变量分配给document.URL和document.title属性。
我编写了一个命名函数（我称之为我的socialShare），它被设置为通过window.onload事件上的匿名函数运行。
socialShare函数将变量分配给HTML中社交按钮的位置。就我而言，我使用ID来定位元素。这些变量的目的纯粹是为了美观（我使用这些变量动态地重写HTML代码，这样当您将鼠标悬停在共享按钮上时，它会显示正确的URL以共享您当前所在的页面）
- var fbShare = document.getElementById("fbShare");
- var gplusShare = document.getElementById("gplusShare");
- twitterShare = document.getElementById("twitterShare");
然后我写了三个独立的匿名函数，每个社交媒体平台一个。每个函数都有两个语句。这些函数的工作方式如下：第一部分是分配给ID为fbShare的HTML元素位置的变量。第二部分告诉它在单击该元素时运行该函数; .onclick。第三部分是单击该元素时将运行的匿名函数。这个函数的第一个语句将打开一个新窗口; window.open;在该新窗口中，它将打开通过提供window.open方法参数指定的URL。参数如下(URL,name,specs)其中URL是您要分享的网址，name是可选的，并留空，如空白引号组所示，最后specs是指定窗口属性的位置（IE：宽度和高度）。第一个参数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; }
最后，我修改了每个社交媒体按钮的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将是社交媒体的共享链接（在示例的情况下，它是谷歌加'共享链接。有一些变量可以被修改或删除。任何对脚本很好的人都可能创建一个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>

作者网站不再存在。这是插件评论附带的信息

/ * * 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>';
?>

Google plus分享按钮，当前网址而不是指定网址？

3 个答案: