Lightweight Social Share Buttons

in #stemgeekslast month

Did you know you can create Twitter and Facebook share links using regular HTML?

Both Twitter and Facebook have URLs that you can use to generate a share. The trick is your "Payload" has to be URL encoded so that any special characters don't break the browser link:

https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fretrogamecoders.com%2Fc64-emulator%2F
https://twitter.com/intent/tweet/?text=Check%20it%20out%20-%20%23c64%20emulator%20right%20in%20your%20web%20browser!%20via%20%40retrogamecoders&url=https%3A%2F%2Fretrogamecoders.com%2Fc64-emulator%2F

Notice the https:// becomes https%3A%2F%2F

JavaScript has an EncodeURI function built right in, or you can obviously generate the link at development time :)

One thing to make it even more useful is to ensure you capture any querystring parameters. You know, things like ?page= or #thispart

You can grab those using window.location.search or individually with

const params = new URLSearchParams(window.location.search);
Sort:  

Its a really simple but interesting tutorial on creating share buttons using simple html tricks. Thanks for this