JavaScript: Bunch of Social Media Sharers without External Libraries

I got this main idea from earlier Facebook developer's tip about opening new window with JavaScript (generating your own share button).
After the share button was deprecated, and before it was reused again.
The script was placed inline on the anchor element. But because it was so long (the inline script), I separated the event (click) trigger and the actual script. Then, I tinkered a bit the concept, so it can be used for multiple buttons and sharing URLs.

I didn't style the buttons here, you can do it yourself.
There are plenty of button generators you can find on the internet, or maybe using your beloved CSS framework. Usually it (the CSS framework) also includes sleek buttons, such as Bootstrap, Pure, jQueryUI, Zurb, etc.

The main purpose of this is to not burden your visitors' browsers by pulling too many resources and the dynamicallamagics from the original social networks.
In another word, making your page lighter than when it wasn't.

---

DEMO
You can click any of these buttons and the sharing window will be shown.

---

CSS
This is the main wrapper styling of the buttons
.share-btn-wrapper { text-align: center; padding: 20px; display: inline-block; background: #fff; box-shadow: 1px 1px 2px #999 inset; border-radius: 6px; } .share-btn-wrapper div button { font-family: inherit; margin: 5px auto; border-radius: 4px; padding:10px 20px; }

---

ELEMENTS
These are the buttons and the wrappers stacking.
<div style="text-align:center;margin:10px auto;"> <div class="share-btn-wrapper"> <div> <button type="button" title="Share to Facebook" onclick="share(0)">Facebook</button> <button type="button" title="Tweet this" onclick="twitter()">Twitter</button> <button type="button" title="Share to Google Plus" onclick="share(1)">Google Plus</button> <button type="button" title="Share to Tumblr" onclick="share(2)">Tumblr</button> <button type="button" title="Share to Reddit" onclick="share(3)">Reddit</button> </div> <div> <button type="button" title="Share to LinkedIn" onclick="share(4)">LinkedIn</button> <button type="button" title="Share to StumbleUpon" onclick="share(5)">StumbleUpon</button> <button type="button" title="Digg this" onclick="share(6)">Digg</button> <button type="button" title="Pin this" onclick="share(7)">Pinterest</button> </div> </div> </div>

---

JAVASCRIPT
The main script to assign the share function to each button. var wSize = "width=600,height=460", loc = encodeURIComponent(window.location.href), title = "share", // Sharer URLs fb = "https://www.facebook.com/sharer/sharer.php?u=", // 0. Facebook tw = "https://twitter.com/share?url=", // Twitter (separate function) gp = "https://plus.google.com/share?url=", // 1. Google+ tb = "http://www.tumblr.com/share?v=3&u=", // 2. Tumblr rd = "http://reddit.com/submit?url=", // 3. Reddit li = "http://www.linkedin.com/shareArticle?mini=true&url=", // 4. LinkedIn su = "http://www.stumbleupon.com/submit?url=", // 5. StumbleUpon digg = "http://www.digg.com/submit?url=", // 6. Digg pt = "http://pinterest.com/pin/create/button/?url=", // 7. Pinterest // Twitter custom texts text = "text=Tweet first phrase thingy", hashtag = "hashtags=thing1,thing2,thing3", via = "via=your_Twitter_user_name", // URLs array url = [fb, gp, tb, rd, li, su, digg, pt]; function share(i) { "use strict"; window.open(url[i] + loc, title, wSize); } function twitter() { "use strict"; window.open(tw + loc + "&" + text + "&" + hashtag + "&" + via, title, wSize); }

---

For Twitter tweet
I separated the function for tweet because Twitter can have hashtags, via (user), and the default text of the URL. You can change them to fit your own stuff.

About changing the value

• The hashtags text won't be needing the # (sharp symbol). Just put regular word(s), separated by comma(s). Such as hashtags=something,anotherthing,lol
• The via user text doesn't need the @. If, for instance, your user is @sumwon, then just put like, user=sumwon.
• The text, well, it can use your server generated page title. I'm using Blogger here, I haven't tinkered that. But, if you want to have a default text for every page, then the value will be text=awesome page, or something similar.

  For Blogger blog, the post's title, you can copy the text of h3 element with the class .post-title.entry-title.

  Example (only for Twitter button):

  var wSize = "width=600,height=460", loc = encodeURIComponent(location.href), title = "share", tw = "https://twitter.com/share?url=", // Twitter sharer URL blogger_post_title = document.querySelector("h3.post-title.entry-title").innerHTML, // Your Blogger post title text = "text=" + encodeURI(blogger_post_title), // Twitter tweet text title hashtag = "hashtags=thing1,thing2,thing3", // Twitter tweet hashtag via = "via=your_Twitter_user_name"; // Twitter tweet via @user // Include the onclick="twitter()" trigger on your own Twitter button. // This is the function to be triggered by that button. function twitter() { "use strict"; window.open(tw + loc + "&" + text + "&" + hashtag + "&" + via, title, wSize); }
• If you do not want to have any of those hashtags, via, and text - just sharing the current URL, you can empty the variable via, hashtag, and text on the JavaScript. Example, text = "".

---

You can add more if you want, like VK, and others. Such as the buttons you saw on YouTube's video page. Add variable(s) on the JavaScript, include that (those) in the array and then add more element(s) and the onclick event for the new button(s).

You can also use <a> (anchor) element, and the <href> will be pointing to those URLs on the JavaScript example above, plus the current page URL. The URL can be manually pasted or captured using JavaScript with the same method above, the encodeURIComponent(location.href).