Customising a share button results in the share functionality not working

darylknight commented 1 year ago

Describe the bug

So if I use {{ craft.socialShare.renderButton('facebook' }}, it outputs a link which, when clicked, will allow the user to share the current page on Facebook:

<a href="http://pupdates.test/" rel="nofollow noopener noreferrer" aria-label="Facebook" target="_blank" data-social-button="" data-show-icon="" data-shape="rectangle" data-bg="brand" style="--icon-color: #fff; --icon-hover-color: #fff; --bg-color: #3b5997; --bg-hover-color: #3b5997;"><span data-sb-content=""><span data-sb-icon-wrapper=""><svg fill="currentColor" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg></span><span data-sb-label-wrapper=""><span data-sb-label="">Facebook</span></span></span></a>```

However, if I do any of the following, the share functionality stops working and it instead just becomes a link to the entry:

use a theme {{ craft.socialShare.renderButton( 'facebook', { theme: true } )}}
use a theme and add the URL to share {{ craft.socialShare.renderButton( 'facebook', { url: 'https://mywebsite.com', theme: true } )}}
use custom attributes with a url {{craft.socialShare.renderButton('pinterest',{text: '',buttonAttributes: {class: 'inline-block'},iconWrapperAttributes: {class: 'inline-block w-6 bg-pink mr-2 p-2'},labelAttributes: {class: 'sr-only'}})}}
(additionally, if I use custom attributes without passing in a URL, it renders a button with no href at all Outputs this:

<a href="https://mywebsite.com" rel="nofollow noopener noreferrer" aria-label="Facebook" target="_blank" data-social-button="" data-show-icon="" data-shape="rectangle" data-bg="brand" style="--icon-color: #fff; --icon-hover-color: #fff; --bg-color: #3b5997; --bg-hover-color: #3b5997;"><span data-sb-content=""><span data-sb-icon-wrapper=""><svg fill="currentColor" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg></span><span data-sb-label-wrapper=""><span data-sb-label="">Facebook</span></span></span></a>

Steps to reproduce

Render a share button and customise anything, either by using the attributes functionality, or by using theming
The share button becomes a normal link instead of a share button

Craft CMS version

4.3.10

Plugin version

1.0.0

engram-design commented 1 year ago

Just wanted to confirm that share buttons and regular buttons are two different things:

{{ craft.socialShare.renderButton('facebook') }}

// Produces
<a rel="nofollow noopener noreferrer" aria-label="Facebook" target="_blank" style="--brand-color: #3b5997;">
    <span>
        <span>
            <svg ...></svg>
        </span>

        <span>
            <span>Facebook</span>
        </span>
    </span>
</a>

{{ craft.socialShare.renderShareButton('facebook') }}

// Produces
<a href="javascript:void();" aria-label="Facebook" onclick="window.open(this.dataset.url, &quot;ss_share_dialog&quot;, &quot;width=626,height=436&quot;);" data-url="https://www.facebook.com/sharer/sharer.php?u=https%3A//craft.test/my-page" style="--brand-color: #3b5997;">
    <span>
        <span>
            <svg ...></svg>
        </span>

        <span>
            <span>Facebook</span>
        </span>
    </span>
</a>

As you can see, a renderButton is a general-purpose button for you to supply whatever you want as the href value. By default there is no href value. This could be a link to the current page, or more commonly, a link to the client's social media account (think footer/header social media links).

Share links on the other hand will share the current page. Most providers use a modal window to do this for a nicer UX.

For either button render, adding extra config ({ theme: true }) seems to work as expected for me!

<a rel="nofollow noopener noreferrer" aria-label="Facebook" target="_blank" data-social-button data-show-icon data-shape="rectangle" data-bg="brand" style="--icon-color: #fff; --icon-hover-color: #fff; --bg-color: #3b5997; --bg-hover-color: #3b5997;">
    <span data-sb-content>
        <span data-sb-icon-wrapper>
            <svg ...></svg>
        </span>

        <span data-sb-label-wrapper>
            <span data-sb-label>Facebook</span>
        </span>
    </span>
</a>

<a href="javascript:void();" aria-label="Facebook" onclick="window.open(this.dataset.url, &quot;ss_share_dialog&quot;, &quot;width=626,height=436&quot;);" data-url="https://www.facebook.com/sharer/sharer.php?u=https%3A//craft.test/my-page" data-social-button data-show-icon data-shape="rectangle" data-bg="brand" style="--icon-color: #fff; --icon-hover-color: #fff; --bg-color: #3b5997; --bg-hover-color: #3b5997;">
    <span data-sb-content>
        <span data-sb-icon-wrapper>
            <svg ...></svg>
        </span>

        <span data-sb-label-wrapper>
            <span data-sb-label>Facebook</span>
        </span>
    </span>
</a>

darylknight commented 1 year ago

Thanks for this - you're right, it does work as expected. I must have just copied the examples from https://verbb.io/craft-plugins/social-share/docs/template-guides/rendering-buttons and forgotten to change it back to renderShareButton. Sorry! Thank you for taking the time to list this all out.

verbb / social-share