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

[Tkkg1994]

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

• I have read the Documentation and I understand how to correctly use this module.
• I have read the Contributing Guidelines.
• I agree to follow this project's Code of Conduct

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

Link

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:

Without the protection enabled:

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" />

[stefanobartoletti]

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]

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

[stefanobartoletti]

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/

[Tkkg1994]

Hello dear @stefanobartoletti

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

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]

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]

@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]

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

[Tkkg1994]

I am here to help you with anything I can, to provide you with the logs or information you need to resolve this. Because I would really love to get this to work.

I can send you videos, we can even do a teamviewer session. I am up for everything

[stefanobartoletti]

As explained in the issue template, I need a minimal reproducible setup, which is a required and not optional step.

I'm only available to fix issues inherent to the module itself, not implementations on third-party projects, and only here through GitHub.

[Tkkg1994]

@stefanobartoletti

Sorry it took so long, the holidays were quite intense over here.. so I finally created a stackblitz reproduction project:
https://stackblitz.com/edit/github-pp1ixx47?file=app.vue

Same here I see nothing when I enable the tracking projection:

When disabled:

Working fine. I hope this helps now!

Wish you a good rest of the week

[stefanobartoletti]

I'm using the same settings as yours, and the issue is not present.

I tested it by using concurrently Brave privacy settings, "Ublock Origin" and "DuckDuckGo Privacy Essentials", and the buttons are always displayed.

I still cannot reproduce it and to be honest, it does not look like the issue originated from this module.

Try using different combinations of browsers/OS/network/firewall and isolate where the issue originates, then you can understand how to solve it.