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

Question

如果需要澄清,请告诉我.如果无法完成,请告诉我.我拼命地试图弄明白这一点

我在以下网站上关注Google的Dev指南:

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/分享？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

编辑!在花了几个月学习Javascript之后,我已经构建了一个比下面提供的解决方案更好的解决方案.我会留下原来的答案,但是,我想把这个更好的解决方案放在最顶层.

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

以下是它的工作原理(如果有人有任何有JS经验的建议或调整,请告诉我).

1. 我将变量分配给document.URL和document.title属性.
2. 我编写了一个命名函数(我称之为我的函数socialShare),它被设置为通过window.onload事件上的匿名函数运行.
3. 该socialShare函数将变量分配给HTML中社交按钮的位置.就我而言,我使用ID来定位元素.这些变量的目的纯粹是为了美观(我使用这些变量动态地重写HTML代码,这样当您将鼠标悬停在共享按钮上时,它会显示正确的URL以共享您当前所在的页面)
   • var fbShare = document.getElementById("fbShare");
   • var gplusShare = document.getElementById("gplusShare");
   • twitterShare = document.getElementById("twitterShare");

4. 然后我写了三个独立的匿名函数,每个社交媒体平台一个.每个函数都有两个语句.这些函数的工作原理如下:第一部分是分配给带有ID的HTML元素位置的变量fbShare.第二部分告诉它在单击该元素时运行该函数; .onclick.第三部分是单击该元素时将运行的匿名函数.这个函数的第一个语句将打开一个新窗口; window.open; 在新窗口中,它将打开通过提供window.open方法参数指定的URL .参数如下(URL,name,specs),其中URL是您要共享的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; }

5. 最后,我修改了href每个社交媒体按钮的HTML 元素,以便当用户将鼠标悬停在共享按钮上时,他们会在浏览器状态栏中看到正确的共享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

链接到window.open方法在信息W3Schools.com的
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>