Dynamic social share buttons in Oxygen using icon elements

As amazing as Oxygen Builder is, it does lack some features which are standard in most other competing builders and themes - one of which is a useful dynamic social share button...well here's how I did it!

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.

Want to be notified of new posts like this?

Sign up to be notified of new posts using the form below. Email addresses are used for the sole purpose of sending once-in-a-while email notifications and nothing else. I promise I don't spam!