Social Share Buttons - JavaScript Tutorial

👉 Source code: openjavascript...
⚡ Looking for high-performance, afforable web hosting? We use HostWithLove: bit.ly/3V2RM9Q ❤️
This tutorial shows you how to create social share buttons for several social media platforms (Facebook, Twitter, Linkedin, Reddit) using vanilla JavaScript to set content to be shared.
#javascript #socialshare #webdevelopment #fontawesome #frontend #javascript_tutorial
🔔 Subscribe for more tutorials just like this: / @openjavascript
openjavascript...
⚡ NEW: Web development courses from Meta Inc. ⚡
Front-End Developer Professional Certificate: imp.i384100.ne...
Back-End Developer Professional Certificate: imp.i384100.ne...
iOS Developer Professional Certificate: imp.i384100.ne...
Meta Android Developer Professional Certificate: imp.i384100.ne...
Meta Database Engineer Professional Certificate: imp.i384100.ne...
Website: openjavascript...
Twitter: / openjavascript

[@OpenJavaScript]

Thanks for watching!
🔗 Source code: openjavascript.info/2022/12/17/social-media-share-buttons-with-vanilla-javascript/

[@ahmadbenchakhtir5787]

IMPORTANT: The web page that u got the url from should have a tag with tags to defined the thumbnail pic.

[@Ro_V_oR]

good point

[@dannybribiesca]

Thank you! You're a lifesaver!!

[@getoverhere1225]

This is the best tutorial I've seen so far. Thank you for keeping it simple and actually talking step-by-step through the tutorial. Can you give links in your description to find the proper resources to make sure the social Links are up-to-date.

[@OpenJavaScript]

Thank you for the feedback.
And as for the links, I'm trying to keep them up to date on this blog post (includes a live example you can try out): openjavascript.info/2022/12/17/social-media-share-buttons-with-vanilla-javascript/
Whatsapp and Telegram link are also included there.

[@mazvydasgaigalas9359]

Smooth and easy ! Thanks

[@dalskiBo]

Nice detail - thanks

[@michaelzahgar7773]

You are the Best ,, thank you so much

[@OpenJavaScript]

Not sure I'm the best but you're welcome and glad you liked the vid :)

[@ShivaGurung-kl5jj]

thank you for the helpful video

[@ucthainguyen289]

Thank u so much!!

[@OpenJavaScript]

No problem, you're welcome! Thanks for watching!

[@A_SaimaChowdhury]

Thanks...😊

[@yossiyun]

Awesome. I am trying to implement this in a React project. Does Linkedin not support the title parameter?

[@OpenJavaScript]

When researching for this video, I looked but it does not seem the LinkedIn API supports a title parameter.
Good luck!

[@yossiyun]

@@OpenJavaScript Alright.. Thanks

[@Ro_V_oR]

@@yossiyun LinkedIn supports a title parameter in 2024

[@yossiyun]

@@Ro_V_oR Thanks

[@mohamed404eg]

thanks

[@seca021]

Great video! Thanks. What are the href's for WhatsApp or Viber?

[@OpenJavaScript]

Not sure about Viber but I posted the WhatsApp one on the related blog post for this video:
openjavascript.info/2022/12/17/social-media-share-buttons-with-vanilla-javascript/

[@Dinesh29293]

I am not able to find the accepting query string for whatsapp! Can anybody help me out??

[@Nasir127sb]

best explain

[@OpenJavaScript]

Glad you found it useful :)

[@alexandremorey8993]

Hi There, do you know how I can share the score for a game like wordle? (the black, green, and yellow squares)

[@OpenJavaScript]

First, you'd need the score you want to share somehow (I'm assuming you have a game running the browser yourself).
Then, you 'dprobably would want to share the score as an image to various social media platforms. You could do this using the HTML5 Canvas API to create a new image featuring the score and then sending the image as part of a query string to the platform you want to share one.

[@alexandremorey8993]

@@OpenJavaScript THank you very much, this helps a lot :)

[@damircicic]

This does not seem to work anymore. The link that is shared is always the homepage link. Does anyone else has the same problem, and does anyone have a solution?

[@Ro_V_oR]

I advice grabbing the base share link from a social share link generator as alot tend to have the most recent links. The one he used would have gotten outdated as updates continue to roll

[@shobhitkumar_shorts]

From where I can get all platforms url?

[@OpenJavaScript]

I don't know if there is one. But I am trying to keep the major ones up to date on this page:
openjavascript.info/2022/12/17/social-media-share-buttons-with-vanilla-javascript/
Let me know if there are any missing that you think I should add.

[@Ro_V_oR]

I advice making use of the links from social share generators. These are usually up-to-date since his blog was last updated in 2022

[@user-uw7wn3wc8c]

how to do in multiple share in multiple article same page?

[@Ro_V_oR]

You will have to develop that solution by yourself.
I can't honestly understand your comment but if you mean multiple links in the same page then you can make multiple buttons for diff shares

[@Voterite]

How to create whatsapp share button ? Thanks

[@OpenJavaScript]

That's an interesting question!
I'll try to do a tutorial on it soon as others may find it interesting.
For now, this should help you out, using the same method as in the video:
api.whatsapp.com/send?phone=44XXXXXXXXXX&text=url
Don't forget that the value for text should be a url-encoded string!

[@unLinuxeroMas]

how i can do others bottuns for telegram whatsapp y messenger

[@OpenJavaScript]

All here: openjavascript.info/2022/12/17/social-media-share-buttons-with-vanilla-javascript/
I'm trying to keep this page up to date for the future (as updating the video is not so easy!)
BTW: For messenger, that's an option that you would select after choosing to share on FB.

[@unLinuxeroMas]

@@OpenJavaScript thanks so much ñaño

[@OpenJavaScript]

@@unLinuxeroMas You're welcome :)