如何创建自己的简单社交媒体按钮以自动获取当前URL？

Question

Facebook,Google +和Twitter(我没有检查或测试任何其他平台,但如果他们提供"共享网址",那么他们也应该工作)所有提供预制的JS按钮,由于许多不同的原因,很多人们不想用.是否是因为你想使用你自己的自定义图标,或者你不喜欢他们使用了多少代码,或者你不喜欢它们如何运作,或者任何其他原因.

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

它们的工作方式原则上非常简单:它们在末尾提供带有语法的URL,允许您手动键入要共享的URL.此解决方案的问题是您每次都必须手动键入每个页面的URL.如果你使用PHP包含或SSI作为你的共享按钮(我正在做),那么它不仅不可行,而且它是不可能的,因为你只有一个存在的共享按钮实例.

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

Answer 1

此解决方案应适用于任何社交媒体平台,该平台为您提供自定义共享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

我希望这会对某人有所帮助!