Kookaburra sharing button question

Hi all,

I’m so happy after this great update!
I have a question regarding the implementation of sharing buttons.
Only sharing by email and whatsapp I used the following code which is generated by sharingbuttons.io/:

<!-- Sharingbutton E-Mail -->
<a class="resp-sharing-button__link" href="mailto:?subject=Super%20fast%20and%20easy%20Social%20Media%20Sharing%20Buttons.%20No%20JavaScript.%20No%20tracking.&amp;body=http%3A%2F%2Fsharingbuttons.io" target="_self" rel="noopener" aria-label="Share by E-Mail">
  <div class="resp-sharing-button resp-sharing-button--email resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7.25 14.43l-3.5 2c-.08.05-.17.07-.25.07-.17 0-.34-.1-.43-.25-.14-.24-.06-.55.18-.68l3.5-2c.24-.14.55-.06.68.18.14.24.06.55-.18.68zm4.75.07c-.1 0-.2-.03-.27-.08l-8.5-5.5c-.23-.15-.3-.46-.15-.7.15-.22.46-.3.7-.14L12 13.4l8.23-5.32c.23-.15.54-.08.7.15.14.23.07.54-.16.7l-8.5 5.5c-.08.04-.17.07-.27.07zm8.93 1.75c-.1.16-.26.25-.43.25-.08 0-.17-.02-.25-.07l-3.5-2c-.24-.13-.32-.44-.18-.68s.44-.32.68-.18l3.5 2c.24.13.32.44.18.68z"/></svg></div>Share by E-Mail</div>
</a>

<!-- Sharingbutton WhatsApp -->
<a class="resp-sharing-button__link" href="whatsapp://send?text=Super%20fast%20and%20easy%20Social%20Media%20Sharing%20Buttons.%20No%20JavaScript.%20No%20tracking.%20http%3A%2F%2Fsharingbuttons.io" target="_blank" rel="noopener" aria-label="Share on WhatsApp">
  <div class="resp-sharing-button resp-sharing-button--whatsapp resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.1 3.9C17.9 1.7 15 .5 12 .5 5.8.5.7 5.6.7 11.9c0 2 .5 3.9 1.5 5.6L.6 23.4l6-1.6c1.6.9 3.5 1.3 5.4 1.3 6.3 0 11.4-5.1 11.4-11.4-.1-2.8-1.2-5.7-3.3-7.8zM12 21.4c-1.7 0-3.3-.5-4.8-1.3l-.4-.2-3.5 1 1-3.4L4 17c-1-1.5-1.4-3.2-1.4-5.1 0-5.2 4.2-9.4 9.4-9.4 2.5 0 4.9 1 6.7 2.8 1.8 1.8 2.8 4.2 2.8 6.7-.1 5.2-4.3 9.4-9.5 9.4zm5.1-7.1c-.3-.1-1.7-.9-1.9-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.1-.2.2-.3.2-.6.1s-1.2-.5-2.3-1.4c-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6s.3-.3.4-.5c.2-.1.3-.3.4-.5.1-.2 0-.4 0-.5C10 9 9.3 7.6 9 7c-.1-.4-.4-.3-.5-.3h-.6s-.4.1-.7.3c-.3.3-1 1-1 2.4s1 2.8 1.1 3c.1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.3.2-.7.2-1.2.2-1.3-.1-.3-.3-.4-.6-.5z"/></svg>
    </div>Share on WhatsApp</div>
</a>

it works fine but the svg’s not showing.

Why is that and how to solve it?

Best regards,
Oliver

What a coincidence… Last night, I was playing with SVGs and discovered the fill attribute.

If you add fill="white" fill-opacity="1" stroke-opacity="1", it will show up. I added width and height attributes as well. I’m on a dark background. If you’re on a light backgrounds, then you want to use a dark color for the svg symbols:

<!-- Sharingbutton E-Mail -->
<a class="resp-sharing-button__link" href="mailto:?subject=Super%20fast%20and%20easy%20Social%20Media%20Sharing%20Buttons.%20No%20JavaScript.%20No%20tracking.&amp;body=http%3A%2F%2Fsharingbuttons.io" target="_self" rel="noopener" aria-label="Share by E-Mail">
  <div class="resp-sharing-button resp-sharing-button--email resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
  <svg width="32" height="32" fill="white" fill-opacity="1" stroke-opacity="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7.25 14.43l-3.5 2c-.08.05-.17.07-.25.07-.17 0-.34-.1-.43-.25-.14-.24-.06-.55.18-.68l3.5-2c.24-.14.55-.06.68.18.14.24.06.55-.18.68zm4.75.07c-.1 0-.2-.03-.27-.08l-8.5-5.5c-.23-.15-.3-.46-.15-.7.15-.22.46-.3.7-.14L12 13.4l8.23-5.32c.23-.15.54-.08.7.15.14.23.07.54-.16.7l-8.5 5.5c-.08.04-.17.07-.27.07zm8.93 1.75c-.1.16-.26.25-.43.25-.08 0-.17-.02-.25-.07l-3.5-2c-.24-.13-.32-.44-.18-.68s.44-.32.68-.18l3.5 2c.24.13.32.44.18.68z"/></svg></div>Share by E-Mail</div>
</a>

<!-- Sharingbutton WhatsApp -->
<a class="resp-sharing-button__link" href="whatsapp://send?text=Super%20fast%20and%20easy%20Social%20Media%20Sharing%20Buttons.%20No%20JavaScript.%20No%20tracking.%20http%3A%2F%2Fsharingbuttons.io" target="_blank" rel="noopener" aria-label="Share on WhatsApp">
  <div class="resp-sharing-button resp-sharing-button--whatsapp resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> 
 <svg width="32" height="32" fill="white" fill-opacity="1" stroke-opacity="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.1 3.9C17.9 1.7 15 .5 12 .5 5.8.5.7 5.6.7 11.9c0 2 .5 3.9 1.5 5.6L.6 23.4l6-1.6c1.6.9 3.5 1.3 5.4 1.3 6.3 0 11.4-5.1 11.4-11.4-.1-2.8-1.2-5.7-3.3-7.8zM12 21.4c-1.7 0-3.3-.5-4.8-1.3l-.4-.2-3.5 1 1-3.4L4 17c-1-1.5-1.4-3.2-1.4-5.1 0-5.2 4.2-9.4 9.4-9.4 2.5 0 4.9 1 6.7 2.8 1.8 1.8 2.8 4.2 2.8 6.7-.1 5.2-4.3 9.4-9.5 9.4zm5.1-7.1c-.3-.1-1.7-.9-1.9-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.1-.2.2-.3.2-.6.1s-1.2-.5-2.3-1.4c-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6s.3-.3.4-.5c.2-.1.3-.3.4-.5.1-.2 0-.4 0-.5C10 9 9.3 7.6 9 7c-.1-.4-.4-.3-.5-.3h-.6s-.4.1-.7.3c-.3.3-1 1-1 2.4s1 2.8 1.1 3c.1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.3.2-.7.2-1.2.2-1.3-.1-.3-.3-.4-.6-.5z"/></svg>
    </div>Share on WhatsApp</div>
</a>

Hi Daniel, that was promt, thank you :slight_smile:
but the problem still persists :thinking:

see: BARCELONA PHOTO TOURS & WORKSHOPS - Barcelona Fototouren

Your custom.css more or less hides the svg. Try this:

.resp-sharing-button__icon svg {
    width: auto;
    height: auto;
    vertical-align: middle;
    padding-right: 10px;
}

Ach kuckmal :sweat_smile:

Thank you so much, Daniel!

1 Like

is there probably a more easy solution to implement share buttons?

what do you mean by easy? How are you adding them now? It they are only in albums, adding the code to the album template is probably the easiest way.
If you need them on all pages, then using phplugins is probably the way to go.

It doesn’t look like they are working as you need them to. The What’sApp button goes to an error page. The email button just opens an email with a link to sharingbuttons.io

At some point, I’ll need to add share-button support to Kookaburra. I’ve never actually written code for sharing to WhatsApp. I’ll need to look into that.

Hi Rod, hi Matt, hi Ben, hi Daniel,
i would like to bundle three topics into one idea:

  • menu behavior
  • tabs
  • sharing button

Since subsub menus are too much clicking, I came up with the idea to work with tabs. I found it on Daniels website, who has already implemented it. But it was also important to me to be able to assign a link to every single tab. I was able to set this up with the help of “https://codepen.io/vadimkor/pen/eVRQGL” on my test page.
Another need is to make these tabs also accessible, I found an example for this here: Demo: Accessible CSS-driven Tabs | dfkaye.com (but not linkable)

another thing is that a visitor of my website should have the possibility to share a certain information - e.g. a tab - to share with someone else through share buttons like email and whatsapp.

Just an idea for the roadmap :wink:

Hi Matt,

I found the following share buttons thing. Might be interesting for you (and us) :slight_smile:

Best regards,
Oliver

Interesting project. Not useful to us as is, due to it’s dependencies on jQuery and Font Awesome, but I can’t probably use it as reference material as some point.

Hi,
In Kookaburra page template, I have included a CSS stylesheet with the codes above mentioned in this post (in advance setpup), but without success. Could you explained in more details for someone who is not familiar with web coding? Thanks in advance .

The html posted above needs to go into the page content. That can be done either through phplugins or in the page or album template.
Are you doing that?

If you can include a link to a page where things aren’t working of as expected, that always helps with troubleshooting.

Yes i created a css with the following code: (.resp-sharing-button__icon svg {
width: auto;
height: auto;
vertical-align: middle;
padding-right: 10px;
}
and put the code in the page content of an album …???

??? thank’s

This css that @Daniel posted:

.resp-sharing-button__icon svg {
    width: auto;
    height: auto;
    vertical-align: middle;
    padding-right: 10px;
}

belongs in your custom css file. The rest of what you have there now isn’t css.

CSS provides styling for existing page elements. So you also need to add the sharing button code (posted by Oliver (@volvoxturbo) at the beginning of this topic) to the page itself, not through the custom css file.

There are a couple different ways to do this. If this sharing button is to go only in albums, you could add the html to the album template copy. This would put the button in the copy area of the album page.
If you need the button elsewhere on the page, that might be done with phplugins, depending on where you want to put it. The Kookaburra phplugins hooks are not yet as numerous as those for Pangolin.

If you want the share button on every page, then phplugins is the best way to go. Probably using the footer_top hook. Or maybe add it in the scripts hook and then add css positioning.

Another option is to wait for @Matthew to add the functionality to Kookaburra.

OK thank’s . I have find here html codes seem working well. Share Buttons Code for Any Website - AddToAny, as you can see here

Have a good day

Nice. Looks good.