Dynamic social share buttons in Oxygen using icon elements

Intro

There are many blog posts you can find for this topic but most of them seemed complicated imo. Fortunately, I came up with a simple method which uses Oxygen’s icon element to be the trigger and a few lines of code to put it together.

To better understand the steps, I will show you how I created a dynamic Facebook share button. But you can see more social media options below in the appendix.

Note: I am going to skip the styling portion of this tutorial and jump straight to making an icon a dynamic share trigger/button.

The steps

CSS

Once you have selected and styled the icon element, you need to add the following class to the icon element:

share-button-facebook

JavaScript

Now copy and paste the corresponding JavaScript code below either in a code block element or a custom-code plugin.

Want to have your own plugin to store your custom code in?
Then use this post to download a barebones Oxygen plugin to help you get started.

//Facebook
document.querySelector(".share-button-facebook").onclick = function() {
    return window.open("https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(document.URL) + "&t=" + encodeURIComponent(document.URL)), !1
};

That’s it! Now repeat the above steps as required for your other social icons using the appendix below.

Appendix

Classes:

share-button-facebook
  
share-button-twitter
  
share-button-linkedin
  
share-button-reddit
  
share-button-whatsapp
  
share-button-googleplus
  
share-button-pinterest
  
share-button-tumblr
  
share-button-email

Javascript:

//Facebook:
document.querySelector(".share-button-facebook").onclick = function() {
    return window.open("https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(document.URL) + "&t=" + encodeURIComponent(document.URL)), !1
};

//Twitter:
document.querySelector(".share-button-twitter").onclick = function() {
    return window.open("https://twitter.com/intent/tweet?text=%20Check%20up%20this%20awesome%20content" + encodeURIComponent(document.title) + ":%20 " + encodeURIComponent(document.URL)), !1
};

//Linkedin:
document.querySelector(".share-button-linkedin").onclick = function() {
    return window.open('http://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)), !1
};

//Reddit:
document.querySelector(".share-button-reddit").onclick = function() {
    return window.open("http://www.reddit.com/submit?url=" + encodeURIComponent(document.URL) + "&title=" + encodeURIComponent(document.title)), !1
};

//Whatsapp:
document.querySelector(".share-button-whatsapp").onclick = function() {
    return window.open("whatsapp://send?text=" + encodeURIComponent(document.title) + "%20 " + encodeURIComponent(document.URL)), !1
};

//Google+:
document.querySelector(".share-button-googleplus").onclick = function() {
    return window.open("https://plus.google.com/share?url=" + encodeURIComponent(document.URL)), !1
};

//Pinterest:
document.querySelector(".share-button-pinterest").onclick = function() {
    return window.open("http://pinterest.com/pin/create/button/?url=" + encodeURIComponent(document.URL) + "&description=" + encodeURIComponent(document.title)), !1
};

//Tumblr:
document.querySelector(".share-button-tumblr").onclick = function() {
    return window.open("http://www.tumblr.com/share?v=3&u=" + encodeURIComponent(document.URL) + "&t=" + encodeURIComponent(document.title)), !1
};

//e-Mail:
document.querySelector(".share-button-email").onclick = function() {
    return window.open("mailto:?subject=" + encodeURIComponent(document.title) + "&body=" + encodeURIComponent(document.URL)), !1
};

Credit to Milad Sayad for providing the JavaScript code in the Official Oxygen User Group which I adapted.