Lightweight Social Share Buttons

avatar

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


0
0
0.000
1 comments
avatar

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

0
0
0.000