javascript - How do I make my own simple social media buttons that grab the current URL automatically? - Stack Overflow

admin管理员组

文章数量:1415119

Facebook, Google+, and Twitter (I've not checked or tested any other platform, but if they provide a "share URL" then they should work as well) all provide pre-built JS buttons that, for many different reasons, a lot of people do not want to use. Whether it's because you want to use your own custom icon, or you don't like how much code they use, or you don't like how they function, or any other reason.

These social media platforms also, however, provide a simple alternative that allows you to use your own custom icon and are very very simple in how they work on the web developer side. (The Facebook documentation on their developer page does not reflect the method that I'll be using, as they no longer "support" the old "share URL". It does, however, still work for now, and the principle remains the same if you wish to use their new manual "share URL").

The way they work are quite simple in principle: They provide a URL with syntax on the end that allows you to manually type the URL that you would like to share. The problem with this solution is that you would have to manually type in the URL of each page every time. And if you are using PHP includes or SSI for your share button (which I am doing), then it's not only not feasible, but it's impossible because you only have one instance of the share button that exists.

So how would one be able to make their own simple social media sharing buttons that will automatically grab the current page's URL?

Facebook, Google+, and Twitter (I've not checked or tested any other platform, but if they provide a "share URL" then they should work as well) all provide pre-built JS buttons that, for many different reasons, a lot of people do not want to use. Whether it's because you want to use your own custom icon, or you don't like how much code they use, or you don't like how they function, or any other reason.

These social media platforms also, however, provide a simple alternative that allows you to use your own custom icon and are very very simple in how they work on the web developer side. (The Facebook documentation on their developer page does not reflect the method that I'll be using, as they no longer "support" the old "share URL". It does, however, still work for now, and the principle remains the same if you wish to use their new manual "share URL").

The way they work are quite simple in principle: They provide a URL with syntax on the end that allows you to manually type the URL that you would like to share. The problem with this solution is that you would have to manually type in the URL of each page every time. And if you are using PHP includes or SSI for your share button (which I am doing), then it's not only not feasible, but it's impossible because you only have one instance of the share button that exists.

So how would one be able to make their own simple social media sharing buttons that will automatically grab the current page's URL?

• javascript
• facebook
• twitter
• google-plus

Share Improve this question Follow edited Oct 13, 2015 at 21:14 Soundfx4 asked Jun 4, 2014 at 20:18 Soundfx4Soundfx4 60522 gold badges99 silver badges2020 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

This solution should work on ANY social media platform that gives you a custom share URL (that is to say, a url that allows you to manually type in an address to share).

Here is how it all works (and if anyone has any suggestions or tweaks that have more experience with JS, please let me know).

1. I assign variables to the document.URL and document.titleproperties.
2. I write a named function (I called mine, socialShare) that is set to run via an anonymous function on the window.onloadevent.
3. The socialShare function assigns variables to the location of my social button's within the HTML. In my case, I used IDs to locate the elements. The purpose of these variables is purely for aesthetics (I use these variables to re-write the the HTML code dynamically, so that when you hover over the share button, it displays the correct URL for sharing the current page you are on)
   • var fbShare = document.getElementById("fbShare");
   • var gplusShare = document.getElementById("gplusShare");
   • twitterShare = document.getElementById("twitterShare");

4. I then write three separate anonymous functions, one for each social media platform. Each function has two statements. The functions work as follows: the first part is the variable assigned to the location of the HTML element with the ID fbShare. The second part tells it to run the function when that element is clicked; .onclick. The third part is the anonymous function that will run when that element is clicked. The first statement of this function will open a new window; window.open; and in that new window, it will open the URL that is specified by feeding the window.open method parameters. The parameters are as follows (URL,name,specs) where URL is the URL you want to share, name is optional and left blank as seen by the empty set of quotes, and finally specs is where you specify attributes of the window (IE: width and height). The first parameter, the URL: ("https://www.facebook./sharer.php?u="+currentURL, currentURL is the global variable that was assigned earlier and will place whatever the current documents URL is, in place of currentURL. The second parameter, the name: "", This is left blank, as it is optional. The third parameter, the specs: "height=368,width=600,left=100,top=100,menubar=0"); These are a ma-seperated list of items. In my case, I've specified a height, width, and the location of the window, as well as disabled the menubar. Finally, the second statement, return false; tells the browser NOT to follow the link inside the HTML code. If this was not specified, then the browswer would follow the URL in the HTML, AND open a new window. For more information on the window.open method, please see the link at the bottom of this new answer.

   • fbShare.onclick = function() { window.open("https://www.facebook./sharer.php?u="+currentURL,"","height=368,width=600,left=100,top=100,menubar=0"); return false; }

   • gplusShare.onclick = function() { window.open("https://plus.google./share?url="+currentURL,"","height=550,width=525,left=100,top=100,menubar=0"); return false; }

   • twitterShare.onclick = function() { window.open("https://twitter./share?url="+currentURL+"&text="+currentTitle,"","height=260,width=500,left=100,top=100,menubar=0"); return false; }

5. And finally, I modify the HTML href elements of each social media button so that when the user hovers over the share buttons, they see the correct Share URL displayed in their browsers status bar. The first part of this statement grabs the element id, fbShare and the second part tells it to set an attribute, .setAttribute. Then we pass in the attribute name that we want to change, ("href", in this case, and then we pass in what we would like the new attribute value to be, "http://www.facebook./sharer.php?u="+currentURL); currentURL is the same here, as earlier. It is the variable that holds the value for whatever the current page's URL is.

   • fbShare.setAttribute("href","http://www.facebook./sharer.php?u="+currentURL);

   • gplusShare.setAttribute("href","https://plus.google./share?url="+currentURL);

   • twitterShare.setAttribute("href","https://twitter./share?url="+currentURL+"&text="+currentTitle);

That's about all there is to it! I hope I wrote this well and I hope it is relatively easy to follow. If any pros out there have any suggestions, please feel free to toss in and give your advice! :)

My JS file
http://jrltest.host-ed.me/_js/share.js

Link to information on the window.open method at w3schools.
http://www.w3schools./jsref/met_win_open.asp

Link to information on the .setattribute method at w3schools.
http://www.w3schools./jsref/met_element_setattribute.asp

I hope that this will help someone!

本文标签：