Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Social Share doesn't appear on privacy features on #314

Open
3 tasks done
Tkkg1994 opened this issue Nov 30, 2024 · 7 comments
Open
3 tasks done

[Bug]: Social Share doesn't appear on privacy features on #314

Tkkg1994 opened this issue Nov 30, 2024 · 7 comments
Labels
bug Something isn't working

Comments

@Tkkg1994
Copy link

Please take a moment to familiarize yourself with this project scope and standards

Environment

------------------------------
- Operating System: Windows_NT
- Node Version:     v20.15.1
- Nuxt Version:     3.14.1592
- CLI Version:      3.16.0
- Nitro Version:    2.10.4
- Package Manager:  [email protected]
- Builder:          -
- User Config:      default
- Runtime Modules:  @pinia/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], [email protected], [email protected], @nuxtjs/[email protected], @vee-validate/[email protected], @nuxt/[email protected], pinia-plugin-persistedstate/nuxt, @unlok-co/[email protected], @nuxtjs/[email protected], @stefanobartoletti/[email protected]
- Build Modules:    -
------------------------------

Minimal reproduction link

not related

Describe the bug/issue

Hello dear @stefanobartoletti

This is an awesome module. Thank you very much for prodiving it. Really enjoying it a lot 👍

Now let us get into my small but critical problem 😆

Many browsers have protections, adblockers or similar included. That can be an extension or even built into the browser

Example: Braves privacy feature.

if turned on, my sharing looks like this:
image

Without the protection enabled:
image

Same thing goes for adblockers reported by users on any browser.

I can still checkout the html in the devtools and see that's there, just not visible.

Potential solutions

  • Renaming the classes to not include ad sounding titles
  • Not get detected as ad (no idea how)
  • Whitelist options somewhere?
  • If the share buttons can't be displayed give us a false prop which we can use to not display an empty share title

What do you think about this? I'm more then happy to help but yeah, don't know if we find a nice solution for this.

Keep up your awesome work! :

Browsers

Chrome, Firefox, Brave, Safari, Microsoft Edge

Logs

Just to include my config:
  socialShare: {
    baseUrl: baseUrl,
    styled: true,
    label: false
  },

Additional context

<SocialShare v-for="network in ['facebook', 'x', 'linkedin', 'whatsapp', 'telegram']" :key="network" :network="network" class="text-white p-3 rounded-md shadow-sm hover:opacity-80 transition" />

@Tkkg1994 Tkkg1994 added the bug Something isn't working label Nov 30, 2024
@stefanobartoletti
Copy link
Owner

stefanobartoletti commented Nov 30, 2024

Thanks for reporting, but with a quick test on both Brave (my main browser, so I should have noticed already), and Firefox with UBlock Origin, I cannot replicate this issue.

The component is rendered as simple HTML and the share link is just a simple anchor without any external Javsacript.

@Tkkg1994
Copy link
Author

Tkkg1994 commented Nov 30, 2024

Hey @stefanobartoletti
Thanks for the quick response. So how can we try to figure out what the exact problem is? Should I send you the website link for example? If that's the easiest thing for you. Or the rendered HTML code

Let me know what to do 😃
Edit:

the problem starts when using the option to block trackers, maybe you can replicate it with this
image

@stefanobartoletti
Copy link
Owner

You should provide a minimal reproducible demo.

And maybe check if with your settings you can see and use the social share buttons on the main documentation website https://nuxt-social-share.stefanobartoletti.it/

Screenshot_20241202_125300

@Tkkg1994
Copy link
Author

Tkkg1994 commented Dec 2, 2024

Hello dear @stefanobartoletti

On your website, it looks like this on my browser:

image

I can add a reproducible demo, but as it seems it's an issue with the component combined with the browser settings and this is hard to reproduce.

As it will work just fine for you as soon as you allow tracking yourself in browser

@stefanobartoletti
Copy link
Owner

Thanks for the extra info.

I still don't know how to solve or even investigate this, the component renders basically only a link

<a class="social-share-button social-share-button--facebook social-share-button--styled text-white border-none" href="https://www.facebook.com/sharer/sharer.php?u=https://nuxt-social-share.stefanobartoletti.it/" aria-label="Share with Facebook" target="_blank" style="--color-brand: #0866FF;">
    <svg class="social-share-button__icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z"></path></svg>
    <span class="social-share-button__label">Share</span>
</a>

This is all, no extra scripting or anything else.

And unfortunately I can't reproduce it by using both Brave and Firefox with Ublock addon, on both desktop and mobile devices.

@Tkkg1994
Copy link
Author

Tkkg1994 commented Dec 3, 2024

@stefanobartoletti

Thank you for your reply and your commitment.

As I said before, it's not due to the adblocking but to tracking being blocked. You can try this as well on your browser / brave and the sharing icons will disappear 😃

@stefanobartoletti
Copy link
Owner

Yes, I understand what you are saying but the issue is not reproducible. I have the same exact settings and everything works correctly here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants