Whatsapp button

[leandroruel]

please, would be great a whatsapp button too!

[QWp6t]

:laughing:

[leandroruel]

???...

[canerkoroglu]

i've added how can i share with this project?

[leandroruel]

make a push maybe

[andrewicarlson]

@canerkoroglu You can fork the project and then submit a pull request with the changes that you've made.

[MorrisDa]

Svg for whatsapp icon:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="90px" height="90px" viewBox="0 0 90 90" enable-background="new 0 0 90 90;" xml:space="preserve">
 <path d="M90,43.841c0,24.213-19.779,43.841-44.182,43.841c-7.747,0-15.025-1.98-21.357-5.455L0,90l7.975-23.522
  c-4.023-6.606-6.34-14.354-6.34-22.637C1.635,19.628,21.416,0,45.818,0C70.223,0,90,19.628,90,43.841z M45.818,6.982
  c-20.484,0-37.146,16.535-37.146,36.859c0,8.065,2.629,15.534,7.076,21.61L11.107,79.14l14.275-4.537
  c5.865,3.851,12.891,6.097,20.437,6.097c20.481,0,37.146-16.533,37.146-36.857S66.301,6.982,45.818,6.982z M68.129,53.938
  c-0.273-0.447-0.994-0.717-2.076-1.254c-1.084-0.537-6.41-3.138-7.4-3.495c-0.993-0.358-1.717-0.538-2.438,0.537
  c-0.721,1.076-2.797,3.495-3.43,4.212c-0.632,0.719-1.263,0.809-2.347,0.271c-1.082-0.537-4.571-1.673-8.708-5.333
  c-3.219-2.848-5.393-6.364-6.025-7.441c-0.631-1.075-0.066-1.656,0.475-2.191c0.488-0.482,1.084-1.255,1.625-1.882
  c0.543-0.628,0.723-1.075,1.082-1.793c0.363-0.717,0.182-1.344-0.09-1.883c-0.27-0.537-2.438-5.825-3.34-7.977
  c-0.902-2.15-1.803-1.792-2.436-1.792c-0.631,0-1.354-0.09-2.076-0.09c-0.722,0-1.896,0.269-2.889,1.344
  c-0.992,1.076-3.789,3.676-3.789,8.963c0,5.288,3.879,10.397,4.422,11.113c0.541,0.716,7.49,11.92,18.5,16.223
  C58.2,65.771,58.2,64.336,60.186,64.156c1.984-0.179,6.406-2.599,7.312-5.107C68.398,56.537,68.398,54.386,68.129,53.938z"/>
</svg>

The color for the <a> tag could be background: rgb(100,212,72), and when hovered could be something like: background: rgb(81,170,58)

The following version is quite hardcoded, but could be useful to implement the whatsapp button in rssb:

<style>

                    .rrssb-whatsapp a {
                      background: rgb(100,212,72) !important;
                    }

                    .rrssb-whatsapp a:hover {
                      background: rgb(81,170,58) !important;
                    }
                    </style>

                    <li class="rrssb-whatsapp">
                        <!-- Replace href with your Meta and URL information  -->
                        <a href="" class="popup">
                            <span class="rrssb-icon">
                              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                               width="90px" height="90px" viewBox="0 0 90 90" enable-background="new 0 0 90 90;" xml:space="preserve">
                               <path d="M90,43.841c0,24.213-19.779,43.841-44.182,43.841c-7.747,0-15.025-1.98-21.357-5.455L0,90l7.975-23.522
                                c-4.023-6.606-6.34-14.354-6.34-22.637C1.635,19.628,21.416,0,45.818,0C70.223,0,90,19.628,90,43.841z M45.818,6.982
                                c-20.484,0-37.146,16.535-37.146,36.859c0,8.065,2.629,15.534,7.076,21.61L11.107,79.14l14.275-4.537
                                c5.865,3.851,12.891,6.097,20.437,6.097c20.481,0,37.146-16.533,37.146-36.857S66.301,6.982,45.818,6.982z M68.129,53.938
                                c-0.273-0.447-0.994-0.717-2.076-1.254c-1.084-0.537-6.41-3.138-7.4-3.495c-0.993-0.358-1.717-0.538-2.438,0.537
                                c-0.721,1.076-2.797,3.495-3.43,4.212c-0.632,0.719-1.263,0.809-2.347,0.271c-1.082-0.537-4.571-1.673-8.708-5.333
                                c-3.219-2.848-5.393-6.364-6.025-7.441c-0.631-1.075-0.066-1.656,0.475-2.191c0.488-0.482,1.084-1.255,1.625-1.882
                                c0.543-0.628,0.723-1.075,1.082-1.793c0.363-0.717,0.182-1.344-0.09-1.883c-0.27-0.537-2.438-5.825-3.34-7.977
                                c-0.902-2.15-1.803-1.792-2.436-1.792c-0.631,0-1.354-0.09-2.076-0.09c-0.722,0-1.896,0.269-2.889,1.344
                                c-0.992,1.076-3.789,3.676-3.789,8.963c0,5.288,3.879,10.397,4.422,11.113c0.541,0.716,7.49,11.92,18.5,16.223
                                C58.2,65.771,58.2,64.336,60.186,64.156c1.984-0.179,6.406-2.599,7.312-5.107C68.398,56.537,68.398,54.386,68.129,53.938z"/>
                              </svg>
                           </span>
                           <span class="rrssb-text">Whatsapp</span>
                        </a>
                    </li>

preview:

Sorry for not sending pull request

[dbox]

I've never seen Whatsapp grouped with other sharing buttons. Is it a common thing to share content to what's app? Is there even a sharing url associated with the service? Or is it all app-based?

[MorrisDa]

From some mobile devices (Android for sure) you can do something like this (from browser obviously):

<a href="whatsapp://send?text=Hello%20World!">Share 'Hello World!'</a>

If you have whatsapp installed it should open the application and ask you the contact you want to share the resource with.

It seems someone wondered it before: Stack overflow's question

p.s. tell me if you prefer a pull request, and i will send it as soon as possible.

[andrewicarlson]

Looks like if you utilize the data attribute data-action="share/whatsapp/share" it gets relatively good cross-device support with iOS and Android.

The only issue I see with this is that it won't do anything on desktop and in my opinion we shouldn't be trying to sniff the User-Agent to determine what buttons to show/not show.

Edit:: I should clarify, in Chrome the browser won't do anything. In Firefox it'll take you to the 'The address wasn't understood' error page.

[MorrisDa]

@aicarlson that's up onto owners of the repo i think. I personally think that the button is useful as per se, it could be included for completeness specifying that it's developer's task to show or not show it in their website!

[dbox]

I guess i'm failing to see what the intended action is.

Would this be a typical workflow?

1. Implement RRSSB on a content page (lets say a blog.)
2. User clicks whats app button.
3. button links to a specific app (and does nothing on desktop)?

If that's the intended flow, I'm not sure it currently falls into the scope of this project, nor do I think there is currently the demand to include it.

[reezom]

:+1: I already picked up @MorrisDa ' s svg. (Thanks!) Regarding demand: http://qz.com/179261/people-are-already-sharing-more-buzzfeed-stories-to-whatsapp-than-to-twitter/

[andrewicarlson]

FWIW, Buzzfeed appears to be sniffing the User Agent. The WhatsApp button doesn't appear on desktop and their site isn't responsive so it's not showing on desktop unless you switch your UA to a mobile device, or just open it up on a phone/tablet. If clicked on desktop, it either doesn't do anything or goes to an error page as I mentioned above.

If it was included in master users should probably be made aware that it won't work on desktop at all.

[dbox]

Ah. Much clearer now. Thanks.

If it's truly one of the most clicked sharing buttons, part of me thinks it's okay to include it. But, since the main goal is to be "ridiculously responsive", I'm not sure having one that doesn't work on desktop at all fits the premise.

Not sure..

[andrewicarlson]

On one hand, I think the argument could be made that it should be up to whoever is implementing the plugin to decide whether to include a button that doesn't work on desktop.

On the other hand, one of leading point of responsive design is to provide a usable, friendly design across all devices and UA sniffing isn't generally recommended in the responsive design process.

I don't know.

[dbox]

This thread will be searchable and anyone who wants to add it, can easily do so.

Not adding for now.