Add Whatsapp sharing to the new templates

Blogger's sharing options include Facebook, Twitter, and Pinterest - some of the more popular platforms - but Whatsapp is missing from the list.

This article describes how you can customize the markup of your Blog gadget, to include Whatsapp in the sharing buttons list to include Whatsapp.

Note: Though the concepts in this article are re-usable elsewhere, it is written assuming that you are using one of the new Themes - Contempo, Soho, Emporio or Notable. For Dynamic views, visit the Dynamic views whatsapp instructions.

Head to Theme => Edit HTML, and use the Jump to gadget helper to jump to Blog1.

Update the sharingButtonsMenu includable

The sharing buttons for a post are defined in the sharingButtonsMenu includable, which is called as part of the stack from the postShareButtons includable, which can be toggled on and off in the Blog Posts settings (under the 'Share Buttons' byline).

To add Whatsapp in the mix, we want an extra line item (<li>) underneath the </b:loop> tag.

...
      </b:loop>
      <li><b:include name='whatsappShareButton' /></li>
    </ul>
...

Or, more explicitly, here is the full markup needed.

<b:includable id='sharingButtonsMenu'>
  <div class='share-buttons-container'>
    <ul expr:id='"sharing-popup-" + data:sharingId'
        class='share-buttons hidden'
        aria-hidden='true'
        expr:aria-label='data:messages.share.escaped'
        role='menu'>
      <b:loop values='(data:platforms ?: data:blog.sharing.platforms) filter (p => p.key not in {"blogThis"})' var='platform'>
        <li>
          <b:include name='sharingButton' />
        </li>
      </b:loop>

      <b:comment>This is the new code.</b:comment>
      <li><b:include name='whatsappShareButton'
                     cond='data:blog.isMobileRequest' /></li>

    </ul>
  </div>
</b:includable>

The sharingButtonsMenu includable needs to go directly inside the <b:widget id='Blog1'> tag.

Add a whatsappShareButton includable

The Whatsapp share button, and the needed svg, can be defined in their own snippets.

<b:includable id='whatsappShareButton'>
  <a expr:href='"whatsapp://send" params { text: data:post.url.canonical }'
     data-action='share/whatsapp/share'>
  <span class='sharing-platform-button sharing-element-whatsapp'
     title='Share to Whatsapp'
     aria-label='Share to Whatsapp'
     role='menuitem'
     tabindex='-1'>
      <svg class='svg-icon-24 sharing-whatsapp' xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z" />
      </svg>
    <span class='platform-sharing-text'>Whatsapp</span>
  </span>
  </a>
</b:includable>

Which, when included, will look something like this.

Overriding the link color

Because the share to Whatsapp uses an anchor, it'll have a different color than the other items in the list. To correct this, you can add the following Custom CSS to your skin, by heading to

Theme => Customize => Advanced => Add CSS and adding:

.share-buttons a {
  color: #000;
  color: $(sharing.text.color);
}

So, full step-by-step for how to add the Whatsapp sharing:

1. Head to Theme => Edit HTML
2. Use the 'Jump to gadget' to jump to Blog1
3. Find the Blog1 widget's closing </b:widget> tag
4. Add the full sharingButtonsMenu includable from above, just inside the close tag.
5. Add the full whatsappShareButton includable from above, again, just inside the close tag.
6. Save.

Happy Whatsapp-ing!