Facebook，Google +和Twitter（我没有检查或测试任何其他平台，但如果他们提供“共享网址”，那么他们应该也可以工作）所有提供预先构建的JS按钮，由于许多不同的原因，很多人不想用。是否是因为您想要使用自己的自定义图标，或者您不喜欢它们使用了多少代码，或者您不喜欢它们的运行方式或任何其他原因。
然而，这些社交媒体平台还提供了一个简单的替代方案，允许您使用自己的自定义图标，并且在Web开发人员方面的工作方式非常简单。 （他们的开发者页面上的Facebook文档没有反映我将使用的方法，因为他们不再“支持”旧的“共享URL”。但是，它确实仍然有效，并且原则保持不变如果您想使用他们的新手册“共享网址”）。
它们的工作方式原则上非常简单：它们在末尾提供带有语法的URL，允许您手动键入要共享的URL。此解决方案的问题是您每次都必须手动键入每个页面的URL。如果您使用PHP包含或SSI作为您的共享按钮（我正在做），那么它不仅不可行，而且它是不可能的，因为您只有一个共享按钮实例存在。
那么如何能够制作自己的简单社交媒体共享按钮来自动获取当前页面的URL？
答案 0 :(得分：6)
此解决方案适用于任何社交媒体平台，该平台为您提供自定义共享网址（也就是说，允许您手动输入要共享的地址的网址）。
以下是它的全部工作原理（如果有人对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
我希望这会对某人有所帮助！