stefanobartoletti/nuxt-social-share

The link with spaces didn't work properly when shared

Closed this issue · 5 comments

medaminefh commented

Summary (generated):

Here is a brief summary of the provided text:

Environment details are listed, including operating system, Node version, Nuxt version, CLI version, and more.

A code snippet is shown, featuring the SocialShare component with a v-for loop rendering multiple networks.

The bug is described as an issue with sharing links that have spaces in them, which causes the link to be converted to normal text instead of displaying as a link.

Environment

  • Operating System: Linux
  • Node Version: v20.11.1
  • Nuxt Version: 3.11.2
  • CLI Version: 3.11.1
  • Nitro Version: 2.9.6
  • Package Manager: pnpm@9.1.4
  • Builder: -
  • User Config: devtools, runtimeConfig, image, socialShare, modules, gtag, googleFonts, i18n, colorMode, ui
  • Runtime Modules: @nuxt/ui@2.15.2, @nuxtjs/i18n@8.0.0, @pinia/nuxt@0.5.1, @pinia-plugin-persistedstate/nuxt@1.2.0, @nuxt/image@1.5.0, @nuxtjs/google-fonts@3.2.0, nuxt-gtag@2.0.5, @stefanobartoletti/nuxt-social-share@0.7.0
  • Build Modules: -

Reproduction

<SocialShare
  v-for="network in ['facebook', 'whatsapp', 'instagram']"
  :key="network"
  :network="network"
>
  <template #icon><Icon name="mdi:${network}" /></template>
</SocialShare>

Describe the bug

The issue is with sharing a link that have spaces in it like https://domain.com/Fournitures%20création%20accessoires%20cheveux this will be converted to normal text instead of a link https://domain.com/Fournitures création accessoires cheveux leading to the wrong page

Additional context

No response

Logs

No response

stefanobartoletti commented

Thanks, but I don't understand clearly what is happening here. What does "normal text instead of a link" mean?

What do you expect to get, and what are you getting instead? Could you please better describe the whole situation?

Also, to better understand what is going on, it is always better to include a minimal demo with a reproducible issue. A github repository or a demo on stackblitz would be the optimal way to provide this.

medaminefh commented

I mean when the URL has spaces in it will appear like this at the URL tab https://domain.com/Fournitures%20création%20accessoires%20cheveux but when I share it on Fb for exp it will share it like this https://domain.com/Fournitures création accessoires cheveux.

Have a look at This link and try to share it on FB or any other platform

stefanobartoletti commented

I see, I am also experiencing the issue documented here #177, the right URL is not correctly generated.

I may need to investigate this further, meanwhile can you better document your proposed solution in the draft PR that you opened? And test it if possible?

stefanobartoletti commented

As a side note, you should avoid using whitespaces in your URLs, as it may lead to all sorts of strange behaviors, not just when sharing on social media (think about manually copy-pasting in an email), and even browsers could handle them ambiguously, like i.e. Firefox:

Screenshot_20240609_015238

I can still have a look at this issue and see if the solution you proposed could help mitigate the problem, but it would help only when using those buttons to share, not in every other case.

You should use different characters to separate words in URL, the most common solution is using hypens -, so the URL would be https://domain.com/Fournitures-création-accessoires-cheveux.

Some references:

https://webmasters.stackexchange.com/questions/32867/does-using-spaces-in-a-url-affect-seo
https://stackoverflow.com/questions/497908/is-a-url-allowed-to-contain-a-space

(just the first thing that come out with a quick search, you can delve more if you want)

  • 👍1
stefanobartoletti commented

@medaminefh The latest released version uses a URL constructor to return shared URLs.

I haven't merged your own PR because there were other changes too, but the functionality is there.

This should help to handle your specific URL configuration, but I still suggest you to use a more conventional way to create your paths.

  • 👍1