Skip to content

Instantly share code, notes, and snippets.

@juanbrujo
Last active December 14, 2021 07:19
Show Gist options
  • Save juanbrujo/111d6f5b95fc6a33236e to your computer and use it in GitHub Desktop.
Save juanbrujo/111d6f5b95fc6a33236e to your computer and use it in GitHub Desktop.
lightweight share buttons with vanilla javascript
<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>
// 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;
}
}());
@MCambie
Copy link

MCambie commented Sep 10, 2021

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

@juanbrujo
Copy link
Author

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>

@originalusername123
Copy link

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!!

@juanbrujo
Copy link
Author

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

@originalusername123
Copy link

originalusername123 commented Oct 29, 2021

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!

@originalusername123
Copy link

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 =)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment