How to add a custom “Share” button next to “Add to Favorites” on the listing page?

General HivePress
1

Hi,
I’m trying to add a custom “Share” button with a popup modal next to the “Add to Favorites” button on the single listing page.

I’ve tried several approaches:

  • Using the hivepress/v1/templates/listing_view_page/actions hook → nothing appeared
  • Using topbar and blocks hooks → either didn’t run or broke the layout
  • Created an override file:
    /wp-content/themes/listinghive-child/hivepress/listing/view/page/listing-actions.php
    → but it doesn’t seem to be loaded at all in my current HivePress version

So my question is:

Which is the correct hook or template file to use if I want to inject a custom button into the listing actions section, specifically where the “Add to Favorites” button is shown?

I would like to make this fully compatible and avoid injecting it via JavaScript if possible.

Thanks a lot for your help!

2

Hi, all sorted now — thank you!

3

Hey @mao,

This sounds like a pretty nice idea. Would you mind sharing your code with the community?

Cheers,
Chris :victory_hand:

4

Its a useful feature. But how would you link it to Facebook, Instagram etc ? Or will it just be a link to copy ?

What did you do ?

5

Hi,

I’ve added a custom share button to the listing page using the hivepress/v1/templates/listing_view_page/blocks filter and merge_trees() – everything works perfectly. On click, a modal with social sharing links (Facebook, WhatsApp, etc.) appears.

Now I want to improve the behavior on mobile: I would like the modal to appear only on desktop, and on mobile (≤ 480px), I want the native sharing (navigator.share) to be triggered instead, without showing the modal at all.

Here’s the code I’m using (which works fine on both desktop and mobile with the modal):

add_filter(
  'hivepress/v1/templates/listing_view_page/blocks',
  function( $blocks, $template ) {
    $listing = $template->get_context( 'listing' );

    if ( $listing ) {
      $blocks = hivepress()->helper->merge_trees(
        [ 'blocks' => $blocks ],
        [
          'blocks' => [
            'listing_actions_secondary' => [
              'blocks' => [
                'custom_share_button' => [
                  'type'    => 'content',
                  'content' => '
                    <a class="hp-listing__action hp-listing__action--share hp-link" href="#" onclick="document.getElementById(\'share-modal\').style.display = \'flex\'; return false;">
                      <i class="hp-icon fas fa-share-alt"></i>
                      <span>Condividi</span>
                    </a>
                    <div id="share-modal" class="hp-modal" style="display:none;">
                      <div class="hp-modal__overlay" onclick="document.getElementById(\'share-modal\').style.display = \'none\'"></div>
                      <div class="hp-modal__container">
                        <button class="hp-modal__close" onclick="document.getElementById(\'share-modal\').style.display = \'none\'">×</button>
                        <div class="hp-modal__content">
                          <h3>Condividi l\'annuncio con chi vuoi</h3>
                          <div class="share-options" style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                            <a href="https://www.facebook.com/sharer/sharer.php?u=' . urlencode( get_permalink( $listing ) ) . '" target="_blank">
                              <i class="fab fa-facebook"></i> Facebook
                            </a>
                            <a href="fb-messenger://share/?link=' . urlencode( get_permalink( $listing ) ) . '" target="_blank">
                              <i class="fab fa-facebook-messenger"></i> Messenger
                            </a>
                            <a href="https://api.whatsapp.com/send?text=' . urlencode( get_permalink( $listing ) ) . '" target="_blank">
                              <i class="fab fa-whatsapp"></i> WhatsApp
                            </a>
                            <a href="#" onclick="navigator.clipboard.writeText(window.location.href); alert(\'Link copied!\'); return false;">
                              <i class="fas fa-link"></i> Copy Link
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  ',
                  '_order' => 10,
                ],
              ],
            ],
          ],
        ]
      )['blocks'];
    }

    return $blocks;
  },
  1000,
  2
);

How can I conditionally trigger the modal only on desktop, and use navigator.share on mobile (without showing the modal)?

Thanks a lot!

6

@mao thanks for this.
the copy link is working correctly.
the whatsapp and facebook links are not working properly. please have a look.

7

Hey @mao,

Thanks for sharing your code!

I asked AI to help:

To conditionally trigger the modal only on desktop and use navigator.share on mobile without showing the modal in your provided PHP code, you need to modify the share button’s behavior based on the device type. This can be achieved by adding JavaScript to detect whether the user is on a mobile or desktop device and then either displaying the modal (for desktop) or invoking the native share functionality (for mobile). Below is a complete solution with explanations.

Solution

You’ll need to:

  1. Detect whether the device is mobile or desktop using JavaScript.
  2. Update the share button’s onclick event to conditionally either open the modal or use navigator.share.
  3. Integrate this logic into your existing add_filter function.

Here’s the updated code:

add_filter(
  'hivepress/v1/templates/listing_view_page/blocks',
  function( $blocks, $template ) {
    $listing = $template->get_context( 'listing' );

    if ( $listing ) {
      $blocks = hivepress()->helper->merge_trees(
        [ 'blocks' => $blocks ],
        [
          'blocks' => [
            'listing_actions_secondary' => [
              'blocks' => [
                'custom_share_button' => [
                  'type'    => 'content',
                  'content' => '
                    <a class="hp-listing__action hp-listing__action--share hp-link" href="#" onclick="handleShare(event)">
                      <i class="hp-icon fas fa-share-alt"></i>
                      <span>Condividi</span>
                    </a>
                    <div id="share-modal" class="hp-modal" style="display:none;">
                      <div class="hp-modal__overlay" onclick="document.getElementById(\'share-modal\').style.display = \'none\'"></div>
                      <div class="hp-modal__container">
                        <button class="hp-modal__close" onclick="document.getElementById(\'share-modal\').style.display = \'none\'">×</button>
                        <div class="hp-modal__content">
                          <h3>Condividi l\'annuncio con chi vuoi</h3>
                          <div class="share-options" style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                            <a href="https://www.facebook.com/sharer/sharer.php?u=' . urlencode( get_permalink( $listing ) ) . '" target="_blank">
                              <i class="fab fa-facebook"></i> Facebook
                            </a>
                            <a href="fb-messenger://share/?link=' . urlencode( get_permalink( $listing ) ) . '" target="_blank">
                              <i class="fab fa-facebook-messenger"></i> Messenger
                            </a>
                            <a href="https://api.whatsapp.com/send?text=' . urlencode( get_permalink( $listing ) ) . '" target="_blank">
                              <i class="fab fa-whatsapp"></i> WhatsApp
                            </a>
                            <a href="#" onclick="navigator.clipboard.writeText(window.location.href); alert(\'Link copied!\'); return false;">
                              <i class="fas fa-link"></i> Copy Link
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                    <script>
                      function isMobile() {
                        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
                      }

                      function handleShare(event) {
                        event.preventDefault();
                        if (isMobile() && navigator.share) {
                          navigator.share({
                            title: document.title,
                            url: window.location.href
                          }).catch(console.error);
                        } else {
                          document.getElementById(\'share-modal\').style.display = \'flex\';
                        }
                      }
                    </script>
                  ',
                  '_order' => 10,
                ],
              ],
            ],
          ],
        ]
      )['blocks'];
    }

    return $blocks;
  },
  1000,
  2
);

Explanation

1. Device Detection

The isMobile function uses a regular expression to check the navigator.userAgent string for common mobile device identifiers (e.g., Android, iPhone, iPad). If a match is found, it returns true, indicating the user is on a mobile device; otherwise, it returns false for desktop.

function isMobile() {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

2. Share Button Behavior

The share button’s onclick event now calls the handleShare function instead of directly opening the modal. The handleShare function:

  • Prevents the default link behavior with event.preventDefault().
  • Checks if the device is mobile (isMobile()) and if the navigator.share API is supported (navigator.share).
  • On mobile devices with navigator.share support, it triggers the native share dialog with the page title and URL.
  • On desktop (or mobile devices without navigator.share support), it displays the modal.
function handleShare(event) {
  event.preventDefault();
  if (isMobile() && navigator.share) {
    navigator.share({
      title: document.title,
      url: window.location.href
    }).catch(console.error);
  } else {
    document.getElementById('share-modal').style.display = 'flex';
  }
}

3. Integration

The JavaScript is embedded within the 'content' string of the 'custom_share_button' block, ensuring it loads alongside the HTML for the share button and modal. The existing modal HTML remains unchanged and is still used for desktop users.

How It Works

  • Desktop: Clicking the share button opens the modal with options for Facebook, Messenger, WhatsApp, and copying the link.
  • Mobile: Clicking the share button triggers the native share dialog (e.g., on iOS or Android), bypassing the modal entirely. If navigator.share isn’t supported (e.g., on older mobile browsers), the modal will still appear as a fallback.

Notes

  • Browser Compatibility: The navigator.share API is supported in modern mobile browsers (e.g., Chrome, Safari on iOS 12.2+, Android browsers), but not on desktop browsers. The fallback ensures functionality across all devices.
  • User Experience: This approach enhances the mobile experience by leveraging native sharing, while retaining a custom modal for desktop users who lack navigator.share.

This solution fully addresses your request to conditionally show the modal on desktop and use navigator.share on mobile without displaying the modal.

I hope this helps!

Cheers,
Chris :victory_hand:

8

thanks @ChrisB
did you try this code ?
at my end the copy link works well, but everything else does not share the link to the url.
not sure if there is some small ’ or . missing etc

9

Just to clarify — the code I shared works both on mobile and desktop, and that’s not in question. But my original post wasn’t about “making the links work” everywhere — it was about getting different behavior on mobile vs desktop: modal on desktop, native sharing on mobile.

That was the point of my question.

If the links work partially or you expect deep-linking behavior, that’s fine — but that’s a separate topic and not what I asked for or intended to solve here.

I really appreciate constructive feedback (like the first reply I received), but please let’s stay focused on what’s actually being discussed — otherwise it just derails the conversation.

Thanks.

1 Like
11

This is perfect, Chris — exactly what I was trying to achieve. Clear explanation, working code, fallback support… really appreciated. I’ll test it out and confirm, but it looks spot on. Thanks a lot again!

1 Like
12

does that also work on their free theme or I need a get a paid extension? thanks for understanding, super new here :slight_smile:

13

Hey @mommyei,

This should work with the base HivePress plugin. If you use the ‘Favourites’ extension, this custom code will add a share option next to where it’s located on the listing details page.

I hope this helps!

Cheers,
Chris :victory_hand:

14

Hi @ChrisB
Could you help with the code which will make the links to Facebook, Whatsapp and Messenger work.
For me just the copy link works.
THanks

15

Hi @unitehearts.in,

I haven’t tested this, and I’m not a developer - just asking AI. You should try doing the same sometime! :wink:

Here’s its latest attempt:

add_filter(
  'hivepress/v1/templates/listing_view_page/blocks',
  function( $blocks, $template ) {
    $listing = $template->get_context( 'listing' );

    if ( $listing ) {
      $permalink = esc_js( get_permalink( $listing ) );
      $blocks = hivepress()->helper->merge_trees(
        [ 'blocks' => $blocks ],
        [
          'blocks' => [
            'listing_actions_secondary' => [
              'blocks' => [
                'custom_share_button' => [
                  'type'    => 'content',
                  'content' => '
                    <script>
                      var listingUrl = "' . $permalink . '";
                      function isMobile() {
                        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
                      }
                      function handleShare(event) {
                        event.preventDefault();
                        if (isMobile() && navigator.share) {
                          navigator.share({
                            title: document.title,
                            url: listingUrl
                          }).catch(function(error) { console.error("Native share failed:", error); });
                        } else {
                          document.getElementById("share-modal").style.display = "flex";
                        }
                      }
                      function openShareWindow(url) {
                        console.log("Attempting to open: " + url);
                        var win = window.open(url, "_blank");
                        if (!win) {
                          console.error("Failed to open window. Check pop-up blocker.");
                        }
                      }
                    </script>
                    <a class="hp-listing__action hp-listing__action--share hp-link" href="#" onclick="handleShare(event)">
                      <i class="hp-icon fas fa-share-alt"></i>
                      <span>Condividi</span>
                    </a>
                    <div id="share-modal" class="hp-modal" style="display:none;">
                      <div class="hp-modal__overlay" onclick="document.getElementById(\'share-modal\').style.display = \'none\'"></div>
                      <div class="hp-modal__container">
                        <button class="hp-modal__close" onclick="document.getElementById(\'share-modal\').style.display = \'none\'">×</button>
                        <div class="hp-modal__content">
                          <h3>Condividi l\'annuncio con chi vuoi</h3>
                          <div class="share-options" style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                            <a href="#" onclick="openShareWindow(\'https://www.facebook.com/sharer/sharer.php?u=\' + encodeURIComponent(listingUrl)); return false;">
                              <i class="fab fa-facebook"></i> Facebook
                            </a>
                            <a href="#" onclick="openShareWindow(\'https://api.whatsapp.com/send?text=\' + encodeURIComponent(listingUrl)); return false;">
                              <i class="fab fa-whatsapp"></i> WhatsApp
                            </a>
                            <a href="#" onclick="navigator.clipboard.writeText(listingUrl); alert(\'Link copied!\'); return false;">
                              <i class="fas fa-link"></i> Copy Link
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  ',
                  '_order' => 10,
                ],
              ],
            ],
          ],
        ]
      )['blocks'];
    }

    return $blocks;
  },
  1000,
  2
);

Cheers,
Chris :victory_hand:

16

Hi,

It seems you didn’t really understand what I wrote earlier.

I noticed you keep directing your request for a full implementation to someone else, even though the original post was mine — and the intention behind it was not to build an all-in-one social sharing toolkit.

The fact that you want working links for Facebook, WhatsApp, and Messenger is fair — but it’s not what this thread is about. I do, in fact, have a working solution for those platforms, but that’s beside the point here. Forums work best when we respect the topic and contributors’ intentions, rather than treating threads like code vending machines.

Let’s keep the conversation focused and respectful — we all benefit that way.

Thanks.

2 Likes
17

Hi Mao, great idea. Do you have the final version of this snippet?

18

sorry @mao

19

@kels if you manage this or if mao kindly shares this, do let us know. thanks