Share URL via Webshare

 Last week was a little different than what I am used to... I took notes at our previous meeting and forgot to get finished with providing the user a way to share their pet information when they are on the pet details page. I did some research on this but I ended up letting time go by and then I let other tasks take the majority of my attention. I nearly ended the week with nothing to show for the progress of the share mechanism. So, yesterday I got home and started working on the share functionality and found some articles that allow the user to share via Facebook after they click an icon. 

Facebook share with reactjs - Stack Overflow.

 Share Button - Social Plugins (facebook.com)

Then I found a way to make an email icon and allow the user to share a link via email by using their preferred email client. How to share current URL in ReactJS - Stack Overflow

I scrolled down some more and found something called react web share. This is a package that will allow the user to have more than one way to share and also provides a way for them to copy the URL and paste wherever they wish. I followed this guide and implemented it into the pet details page.

Installation and Setup : npm i react-web-share

How to activate web share using react-web-share in ReactJS ? - GeeksforGeeks

I now have a button that is clicked then it displays a menu for the user and give them a lot more options to choose from when they want to share the url to a social media.


In the pictured example, we have the browser after the web share button is clicked and to the right of the window, we have the email button clicked and the preferred client comes forth then, finally, the Facebook link is clicked and the browser opens a small window.

Note - Since we are looking for a hosting site, Facebook gives an error : Parameter 'href' should represent a valid URL because facebook does not allow local host url to be shared on facebook.

I like the web share button at this time but I do understand why the individual buttons would work as well. It's just a matter of time so we can find out what works best for our website.

Comments

Post a Comment

Popular posts from this blog

Authentication token and refraining from using Cron

Image
This week, i spent a few days figuring out what I can do to refresh our authentication token from the Petfinder API. I had been looking through various scripts and one that caught my was Cron. A CRON script is a list of one or more commands to a computer operating system or application server that are to be executed at a specified time. As mentioned in an earlier blog post, i referred to this link  react-js-cron - npm (npmjs.com)  and read more about cron script for React JS. As i started to implement some of the steps, I found myself dealing with errors concerning deprecated scripts and possibly needing to download more software from the host repository. The terminal command for npm install -n led me down researching errors on updating our libraries but these updates didn't seem like the right way to handle the solution to the authentication token problem.  I didn't want to add more memory usage to the overall files. I decided to search the internet for a solution t...
Read more

Long week of Detailing

Image
 As our project is approaching the last few weeks of development, I find my schedule a little fuller. As our meeting highlighted for me, I have been researching many different ways of getting the marketing aspect of the Pethub brand completed. Here is a link to my current work using PowToon and hosted on YouTube.   https://www.youtube.com/watch?v=fjm5UlFCUiA&t=56s I most wanted to use the infomercial formula in a comedic way. I used some of the ideas highlighted in this guide to create my advertisement. These 3 Methods Will Help You Create a Product Offer - Guaranteed - DIYMarketers Choose a target customer or persona. Be as specific as you can because the target customer sets the context for your offer. Think about “soccer moms” – you immediately get a visual that sets the context for their life from what they drive, how they spend their time, and the challenges they have. Identify a specific problem they are dealing with. Now that you have this very specific persona with...
Read more