Javascript 我如何制作自己的简单社交媒体按钮，自动获取当前URL？

Facebook、Google+和Twitter（我没有检查或测试过任何其他平台，但如果它们提供“共享URL”，那么它们也应该可以工作）都提供了预构建的JS按钮，出于许多不同的原因，很多人不想使用这些按钮。无论是因为您想使用自己的自定义图标，还是您不喜欢它们使用了多少代码，或者您不喜欢它们的工作方式，或者任何其他原因

然而，这些社交媒体平台也提供了一个简单的替代方案，允许您使用自己的自定义图标，并且在web开发人员方面的工作方式非常简单。（他们的开发者页面上的Facebook文档没有反映我将使用的方法，因为他们不再“支持”旧的“共享URL”。但是，它现在仍然有效，如果你想使用他们的新手册“共享URL”，原则保持不变）

原则上，它们的工作方式非常简单：它们提供了一个带有语法的URL，允许您手动键入要共享的URL。此解决方案的问题是，每次都必须手动键入每个页面的URL。如果您使用PHP includes或SSI作为共享按钮（我正在这样做），那么它不仅不可行，而且不可能，因为您只有一个共享按钮实例

---

那么，如何制作自己的简单社交媒体共享按钮，自动获取当前页面的URL呢？

此解决方案应适用于任何提供自定义共享URL（即允许您手动键入共享地址的URL）的社交媒体平台

下面是它的工作原理（如果有人有任何建议或调整，有更多的JS经验，请让我知道）

我将变量分配给

document.URL

和

document.title

属性

我编写了一个命名函数（我调用了我的，

socialShare

），该函数设置为通过

窗口上的匿名函数运行。onload

事件

socialShare

函数将变量分配到HTML中“我的社交”按钮的位置。在我的例子中，我使用id来定位元素。这些变量纯粹是为了美观（我使用这些变量动态地重新编写HTML代码，这样当您将鼠标悬停在“共享”按钮上时，它会显示用于共享当前页面的正确URL）

• var fbShare=document.getElementById（“fbShare”）

• var gplushare=document.getElementById（“gplushare”）

• twitterShare=document.getElementById（“twitterShare”）

然后，我编写了三个独立的匿名函数，每个用于社交媒体平台。每个函数有两条语句。函数的工作方式如下：第一部分是分配给HTML元素位置的变量，ID为

fbShare

。第二部分告诉它在单击该元素时运行函数

.onclick

。第三部分是当单击该元素时将运行的匿名函数。此函数的第一条语句将打开一个新窗口<代码>窗口。打开；在新窗口中，它将打开通过输入

窗口指定的URL。打开
方法参数。参数如下所示
（URL、名称、规格）
其中
URL
是您要共享的URL，
name
是可选的，如空引号集所示为空，最后
specs
是您指定窗口属性（即：宽度和高度）的位置。第一个参数是
URL
：
（“https://www.facebook.com/sharer.php?u=“+currentURL，
currentURL是先前分配的全局变量，它将放置当前文档URL中的任何内容来代替currentURL。第二个参数，
名称：
”，
这是空白的，因为它是可选的。第三个参数，
规格：
“高度=368，宽度=600，左侧=100，顶部=100，菜单栏=0”）这些是以逗号分隔的项目列表。在我的例子中，我指定了窗口的高度、宽度和位置，并禁用了菜单栏。最后，第二条语句，
返回false
告诉浏览器不要跟随HTML代码中的链接。如果没有指定，那么浏览器将跟随HTML中的URL，并打开一个新窗口。有关
窗口的详细信息。打开
方法，请参阅此新答案底部的链接


fbShare.onclick=function（）{
窗口打开（“https://www.facebook.com/sharer.php?u=“+currentURL，”，“高度=368，宽度=600，左侧=100，顶部=100，菜单栏=0”）；
返回false；
}

gplushare.onclick=function（）{
窗口打开（“https://plus.google.com/share?url=“+currentURL，”，“高=550，宽=525，左=100，顶=100，菜单栏=0”）；
返回false；
}

twitterShare.onclick=function（）{
窗口打开（“https://twitter.com/share?url=“+currentURL+”&text=“+currentTitle”，“高度=260，宽度=500，左侧=100，顶部=100，菜单栏=0”）；
返回false；
}

最后，我修改了每个社交媒体按钮的HTML

href

元素，这样当用户将鼠标悬停在共享按钮上时，他们可以在浏览器状态栏中看到正确的共享URL。该语句的第一部分获取元素id，

fbShare

，第二部分告诉它设置一个属性，

.setAttribute

。然后，我们传入要更改的属性名，

（“href”，

，在本例中，然后传入我们希望新属性值是什么，

”http://www.facebook.com/sharer.php?u=“+currentURL）当前URL与前面的相同。信息技术