Web Share API Tutorial - Native Sharing is Easy!

Рет қаралды 64,346

4 жыл бұрын

promo.linode.com/designcourse/ - Use code 'DESIGNC19' to get $20 credit on your new Linode account!
-- Hey all! Today, I'm going to show you how to set up native sharing for your sites / apps, along with a fallback solution for those with devices that don't support it. It will involve some HTML, CSS and most importantly: JavaScript! Don't worry though, it's pretty easy stuff!
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!

Пікірлер: 80

@DesignCourse 4 жыл бұрын

Enjoy? Sup up and help me get to half a mill!

@AzlanAziz 3 жыл бұрын

Can I Get The Source Code?

@nomorecensorship2815 3 жыл бұрын

1:58 1st share option - "Is your fridge running?" 😂🤣

@vidadiali4821 Жыл бұрын

Thank you for this video, but I have a problem. I want to share pdf or docx, how to can I do this? You write 'url', I want share pdf. Please help me. Thank you

@mattmccherry9261 4 жыл бұрын

Nice disembodied floating head... Also, great video, I didn't know about this API :)

@ninadvirkar9097 4 жыл бұрын

Thank you . Was looking for something like this api only

@TutorialsHub3 4 жыл бұрын

Thanks, Simon to share like this source. Now I can add a share button in my article😍

@mustafasaseldin9457 Жыл бұрын

thanks for this one i was in need for it

@stevechong65 2 жыл бұрын

Hi Gary! Great stuff! If you develop this into a plugin, I am sure it will sell like hot cakes! I am tired of those online now where it is limited to the network the app sets.

@NatadTech 10 ай бұрын

how can we add a Donate button besides the address bar like Microsoft Edge supports besides the PWA Install?

@VmetTeam 3 жыл бұрын

bro i need image sharing can u make video for web share api lv 2 for image sharing without browse

@frikishaan 4 жыл бұрын

👏 Please do some more on Logo design with Illustrator?🙏

@scottmcmahon7209 3 жыл бұрын

Will this still work if I made an app using ionic or capacitor?

@priscadona8908 Жыл бұрын

Great job!

@alikaalbright1422 Жыл бұрын

Pls I need help on this I'm using while loop Bt only the first button is working how will it work on all the loops

@user-pp4td4hs1t 8 ай бұрын

Why it's not working with files? I mean that i can share text with url, but i can't share text with url and image

@devKazuto 4 жыл бұрын

If const title and url are called the same as the keys of the passing object you don't really need to set them explicity. navigator.share({title, url}) should be sufficient. At least that's what I've experienced in Javascript.

@bobdpa 4 жыл бұрын

Thanks Gary!

@krushnaawate403 10 ай бұрын

Hello I am getting this error - NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

@soumeshkumar14 3 жыл бұрын

Can I get the codepen url for this code !!!

@beticohernandez8039 4 жыл бұрын

Hello, make the template of the online store you made and I look good. Would you make the cart page, an application for that store as you would recommend doing it? Bye.

@Gorr1995 4 жыл бұрын

Did you use safari?

@codebuilders9081 4 жыл бұрын

thumbs up for unique content, enjoying this great way of learning. thanks alot

@ThatIsWhatIThink 2 жыл бұрын

Can you make another video of this topic because this package is expired so please make a new video to shear something from web

@lucasdias2108 Ай бұрын

O meu está compartilhando um texto e eu precisava de compartilhar uma URL, alguém sabe o porque?? O meu está exatamente igual ao dele

@hooriqbal1099 3 жыл бұрын

does the window.doument.url is supposed to be undefined because I'm getting it so. can I replace it with windows.location ?

@Ro_V_oR 2 ай бұрын

yes the most popular way would be using "window.location" object. To grab the url use "window.location.href"

@rommycougar 2 жыл бұрын

Cool 👍, sometimes I read articles and I would like to share on LinkedIn however the post doesn't have (LinkedIn) button, therefore , how can I share please ? Any method please? Thanks 🙏

@Ro_V_oR 2 ай бұрын

I advice simply using a socai share link generator. From there you can grab the base link and customize it how you wish

@jasrioworldtravellerforcra5497 Жыл бұрын

How to give text like multiple lines

@anushkashah9924 3 жыл бұрын

Can we share image through this api ? If not , does anyone know how to share media (eg .JPEG image, etc) on whatsapp through your website ?

@alwaysbeadeveloper1977 2 жыл бұрын

DId you find anything where you can share images from your website into whatsapp?

@farisaimanbinjamaluddin9293 Жыл бұрын

@@alwaysbeadeveloper1977 got anything yet?

@Ro_V_oR 2 ай бұрын

You can share files using the web share api but whatsapp, to my understanding, does not support this feature

@Ro_V_oR 2 ай бұрын

@@alwaysbeadeveloper1977 You can share files using the web share api but whatsapp, to my understanding, does not support this feature

@olegmaz3969 3 жыл бұрын

Chrome has stopped supporting self signed certificates.

@DineshKumar-hd2ex 2 жыл бұрын

How attach image with that url.. When the url is shared automatically the image pops with the url... How it can be achieved

@Ro_V_oR 2 ай бұрын

I don't know

@Purplebread7247 4 жыл бұрын

sup with the lighting?

@GiammaCarioca 4 жыл бұрын

I got a DOMException error in the console. :/

@Ro_V_oR 2 ай бұрын

It may be caused by a lack of support, at the time of your comment, the support was quite limited

@Gentlemanek 4 жыл бұрын

Nice

@YnMillion 4 жыл бұрын

Hey, sick hair you got there dude!

@DesignCourse 4 жыл бұрын

I'm trying to level up to man bun

@webdesign9645 3 жыл бұрын

Subscribed 😍

@Ro_V_oR 2 ай бұрын

nice

@ganeshacharya234 4 жыл бұрын

Hey guys, did anyone try this API inside a Hybrid app? Lets say ionic or something else?

@Ro_V_oR 2 ай бұрын

Not yet, keep trying if you are still interested

@subjectfrank 5 ай бұрын

Hello, does it work both for android and ios?

@SandeepMishra-ch2sx 4 ай бұрын

For ios it was not working as expected

@nikitacontractor4343 2 жыл бұрын

Can u please give me solution for pdf sharing on WhatsApp? I already did but it is getting random PDF file name on WhatsApp. Thanks in advance .

@farisaimanbinjamaluddin9293 Жыл бұрын

Already got the solution?

@_jko 4 жыл бұрын

What extension do you use for the lorem ipsum generator in your VS code?

@user-ks6mu7zh8b 4 жыл бұрын

it's buit-in with emmet (google it), try writing lorem*5 then tap in vscode.

@alikaalbright1422 Жыл бұрын

I want it to share different acticle how do I go about it

@Ro_V_oR 2 ай бұрын

Same Page - diff links Not sure what your question implies but if you're sharing different links on the same page, make different buttons for each one. Diff pages -same link You can get the link of the page dynamically. Ex. let shareLink = window.location.href;

@alikaalbright1422 2 ай бұрын

Wow I have fixed it like since a year ago thanks

@andressalazar9671 3 жыл бұрын

Is posible to share an url image as an instagram story?

@Ro_V_oR 2 ай бұрын

As of 2024, (to the best of my knowledge) there is no official method yet but there maybe some workarounds..

@MAzaaruTheen 4 жыл бұрын

Hi it will work on ssl sites only?

@Ro_V_oR 2 ай бұрын

yes

@tiger23800 4 жыл бұрын

Why almost all streamers now use neon lights?

@DesignCourse 4 жыл бұрын

because they so cooooooooo!

@ryansyd4224 2 жыл бұрын

i'm getting error Notice: Undefined variable: title

@Ro_V_oR 2 ай бұрын

it means you did not correctly define the "title" variable somewhere in your code

@OpenJavaScript Жыл бұрын

Cool API, but DO NOT USE IN PRODUCTION (It only has limited browser support, for now)

@ianthehunter3532 4 жыл бұрын

Leaked phone number?

@DesignCourse 4 жыл бұрын

It's the IRS man. If you call, they might audit you.

@ianthehunter3532 4 жыл бұрын

@@DesignCourse I just wanted to let you know in case you didn't notice

@scottmcmahon7209 2 жыл бұрын

This can only be used in SOME browsers, its good to have set up if the users browser supports it but you'll still need to build your own social sharing method.

@Ro_V_oR 2 ай бұрын

Yes, the best way to share is using your own uniquely developed method. that's why design course uses it as a fallback