SOLVED: Bug in the social media sharing buttons > X on mobile devices

Bugs
1

Dear Thomas Ehrig and the rest of the Bricks Builder developers, a few days ago I encountered a problem with the social media sharing buttons in Bricks when sharing the website or post from a mobile device (phone) by opening the X app. An error occurs: the link launched from the front end is interpreted by the X app as a search that returns no results. The problem is that the link included in Bricks Builder for this purpose doesn’t work because it has an error that only occurs on phones; I don’t know if it happens on all phones: I’ve only tested it with Android devices.

By the way, this also happens with the share-content buttons in Bricks Extras (in my video, they are the gray buttons). I also think they should fix this in a future plugin update.

I found a workaround by pasting a JavaScript script into Bricks > Settings > Custom Code > Footer Scripts… But I believe this should be included in the builder itself. Patching bugs is important.

My script:

<script>
document.addEventListener('DOMContentLoaded', function () {
  // DelegaciĂłn de eventos EN FASE DE CAPTURA
  document.addEventListener('click', function (e) {
    // Buscar si han hecho click en un enlace de compartir en Twitter/X
    var link = e.target.closest(
      'a[href*="twitter.com/share"],' +
      'a[href*="x.com/share"],' +
      'a[data-service="twitter"],' +
      'a[data-service="x"]'
    );

    if (!link) {
      return; // no es un botĂłn de X/Twitter
    }

    // Evitamos que se ejecute el JS interno de Bricks
    e.preventDefault();
    e.stopPropagation();
    if (typeof e.stopImmediatePropagation === 'function') {
      e.stopImmediatePropagation();
    }

    // Intentamos obtener tĂ­tulo y URL "correctos"
    var pageUrl  = window.location.href;
    var pageText = document.title;

    // Por si Bricks guarda algo en data-attributes
    if (link.dataset && link.dataset.url) {
      pageUrl = link.dataset.url;
    }
    if (link.dataset && link.dataset.title) {
      pageText = link.dataset.title;
    }

    var url  = encodeURIComponent(pageUrl);
    var text = encodeURIComponent(pageText);

    // URL moderna de Web Intent de X/Twitter
    var shareUrl = 'https://twitter.com/intent/tweet'
      + '?url='  + url
      + '&text=' + text;

    // Abrimos la ventana / app de X
    window.open(shareUrl, '_blank', 'noopener,noreferrer');
  }, true); // <- true = fase de captura, va antes que los handlers de Bricks
});
</script>
2

Hi @MLSaura1,

you mentioned a video. Can you share it - I guess you will show how to replicate the issue, so I can replicate it locally as well.

Best regards,
Matej

1 Like
3

Hi:
Yes, I didn’t end up uploading the video.
In this one, the green buttons are for Bricks Builder and the gray ones correspond to the Bricks Extras share-content, which is also incorrect as it has the same result.

When I click to share on the X, the message “The term you entered returned no results. Please try again” appears, it takes me back to the page, and nothing is shared.

4

Hi @MLSaura1,

can you share a link where I can try this? Because I can’t replicate this locally.

Thank you,
Matej

1 Like
5

Thank you.
This subdomain corresponds to a website for a client that I’m currently working on.

The social media sharing buttons are located immediately before the footer.

It doesn’t have SEO configured yet, so there are no Open Graph meta tags. However, when I clicked the X button on the Android phones where I tested it, X returned the error message: “The term you entered returned no results. Please try again.”

https://icone.artantec.com/

6

Hi @MLSaura1,

I can’t replicate the issue using my iPhone. Do you have a chance to test this on some other phone?

For me, it works, hmm…

Matej

8

Hello
Here’s the screen recording I made from another Android phone. I don’t have an Apple phone.

But it’s strange that the X link allows sharing if the mobile device’s operating system is iOS, but not if it’s Android.

It’s also strange that if I paste the JavaScript script mentioned in my first post into Bricks > Settings > Custom Code > Footer Scripts, the Twitter link redirects perfectly and the problem is solved.

9

Hi @MLSaura1,

My colleague was able to replicate the issue on Android phone. I’ve cadded it to internal bug tracker, and once fixed, we will update this forum topic.

Thank you,
Matej

1 Like
10

Oh, thank you, Matej!!
I’m eagerly awaiting the solution to the error. That way, I can remove the JavaScript script I included in my first post from my Bricks sites, and everything will be cleaner.
Greetings from Spain

1 Like
11

We fixed this issue in Bricks 2.2 beta, which is now available in your account.
Changelog: Bricks 2.2-beta Changelog – Bricks

Please let us know if you are still experiencing issues.

As with any pre-stable release, please do not use it on a production/live website. It is only meant for testing in a local or staging environment. The more feedback we get, the better :v: