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!


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


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



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.

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.





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

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

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

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

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

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

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

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

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!