How to make share button like Facebook's or Twitter's

Question

Some sites like Facebook & Twitter make their own share button (ie tweet button & FB share button ) that could be used in any other site, I want to make my own to help people share links to my site.

I've made the page for the sharing window /sharer , which could be opened using this function:

function openPopup(url){
  var width = 790;
  var height = 570;
  var top = screen.height/2 - height/2;
  var left = screen.width/2 - width/2;
  var windowFeatures = "location=yes, height=" + height + ", width=" + width + ", left=" + left + ", top=" + top;
  var windowUrl = "https://example.com/sharer?url=" + encodeURIComponent(url);
  var win = window.open(windowUrl, "_blank", windowFeatures);
}

and of course I need to host a javascript file to hold my code like the previous function,

but question is, how could I prepare a code that could be used by any other site to show my button properly with its own CSS & Javascript, and not to be affected by the hosting page that contains it?

Answer 1

Facebook and twitter both load the button in an iframe , which totally isolates the CSS and Javascript from the parent page. If that's what you are after, I'd recommend doing the same thing.