lightweight share buttons with vanilla javascript

sharebuttons.html

<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" class="share facebook">Facebook</a>
<a href="https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>&via=twitter" class="share twitter">Twitter</a>
<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" class="share google">Google+</a>
<a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&source=LinkedIn.com&title=<?php the_title(); ?>" class="share linkedin">LinkedIn</a>

sharebuttonsPopup.js

// create social networking pop-ups
(function() {
    // link selector and pop-up window size
    var Config = {
        Link: "a.share",
        Width: 500,
        Height: 500
    };
    // add handler links
    var slink = document.querySelectorAll(Config.Link);
    for (var a = 0; a < slink.length; a++) {
        slink[a].onclick = PopupHandler;
    }
    // create popup
    function PopupHandler(e) {
        e = (e ? e : window.event);
        var t = (e.target ? e.target : e.srcElement);
        // popup position
        var
            px = Math.floor(((screen.availWidth || 1024) - Config.Width) / 2),
            py = Math.floor(((screen.availHeight || 700) - Config.Height) / 2);
        // open popup
        var popup = window.open(t.href, "social", 
            "width="+Config.Width+",height="+Config.Height+
            ",left="+px+",top="+py+
            ",location=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=1");
        if (popup) {
            popup.focus();
            if (e.preventDefault) e.preventDefault();
            e.returnValue = false;
        }
        return !!popup;
    }
}());

Hello, your code works perfectly unless if I put some fontawesome icons in place of the a's text. Do you know why ?

Hello, your code works perfectly unless if I put some fontawesome icons in place of the a's text. Do you know why ?

it must be because fontawesome adds own CSS (including pseudo-elements) so breaks the link element. Try adding the icon within another tag, as <i>

Hi! Your code works, but not if I replace the text inside the tag with an image. Then it opens the pop-up but doesn't do anything else. Do you know why? Thanks!!

Hi! Your code works, but not if I replace the text inside the tag with an image. Then it opens the pop-up but doesn't do anything else. Do you know why? Thanks!!

paste some code to check your HTML please

If I use this, it works perfectly:

<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.mysite.com/blog/test.html" class="facebook share">
            Facebook</a>

But if I use this, the pop-up opens, but the link doesn't load in the new window. It just opens an "about:blank" pop-up window:

<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.mysite.com/blog/test.html" class="facebook share">
            <img src="/static/images/facebook-share.png" width="64px"></a>

Thank you!

Bro, they solved it on SO. Here's the link if you're interested: https://stackoverflow.com/questions/69775905/js-wont-catch-a-link-if-there-is-an-image-in-the-anchor-tag

Thank you for the code!! Keeping the website light =)