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!

Comments

  1. kondi6 June 2017 at 04:57

    i don't know how to update the sharing button ..more enlighten on how to put the code in template

    ReplyDelete
    Replies
    1. Luke6 June 2017 at 20:31

      Added some step-by-step instructions at the end - hope that helps!

      Delete
  2. singachu8 June 2017 at 08:55

    otodiy.blogspot.com Whatsapp share ouside the share popup frame.
    what's wrong ?

    ReplyDelete
    Replies
    1. singachu8 June 2017 at 11:25

      fixed the problem

      in your first explaination b:include name='whatsappShareButton' before closing ul tag

      but in your full markup after closing ul tag

      thanks

      Delete
    2. Luke8 June 2017 at 14:24

      Corrected that mistake - thanks for pointing it out!

      Delete

Post a Comment

Popular posts from this blog

Rotate my Blogger images

Image
Blogger-uploaded images can be rotated by modifying the url to include '-r90' (or 180, or 270). Take, for example, the image below. URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWVgBklYsvkxN7xwRlHuU8XWHdJTW7kpjJcEzMo2lD65tV4vwXuwHnPa3eiXZqUfpkdAYJMaTaPXO9RiEl1XY_tEfHWBEmBmnppNqP6_SovKyOe8gLd9-09TimKKdDZpIuMrjiPvg5hrOI/ s200 /IMG_2358.JPG If we switch the s200 to s200-r90 , we get the following image instead. URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcVtM8EBB40qw43B0tA7X6wiErlfRxG3YDKqPPKluXQzFSghY5bjSw312509fa6BHCQjcUDevY4L194LL7n5lImmia7zBVfYohxezEJq1bdxRx_CCOyL06w0rQS9Rb2RkjpLVpIx3PjnGy/ s200-r90 /IMG_2358.JPG Happy rotating!
Read more

Remove the header image for posts in Emporio

The new Emporio template features a large, blurred-out copy of the featured image for a post as the header image. Some like this feature, some don't - here's how to remove it if you're not a fan! Head to Theme => Edit HTML Search for ' data:view.isSingleItem ' The code that you see should look something like this:  <b:if cond='data:view.isSingleItem'> <b:if cond='data:widgets.Blog.first.posts.first.featuredImage'> <b:include data='{ image: data:widgets.Blog.first.posts.first.featuredImage, selector: &quot;.bg-photo&quot; }' name='responsiveImageStyle'/> <div class='bg-photo-container'> <div class='bg-photo'/> </div> </b:if> </b:if> Delete the XML including the <b:if> tag code. Happy Emporio'ing!
Read more

Get nicer thumbnails for my Post snippets

I recently received some feedback that my thumbnails are a bit nicer than the standard thumbnails offered by Blogger. This is because I use a custom snippet in my Blog widget, to produce bigger thumbnails, using the new resizeImage operator . Note: This post leverages the techniques described in the article about  Responsive images for Google photos . A note: The resizing behaviour provided on Blogger requires that the image is hosted on a Google platform to work - provided that you add your images by uploading them in the editor, this technique should work. Creating a responsive, resized Thumbnail The resize operator takes 3 parameters - the URL of the image, the width to resize it to, and an optional ratio for a cropped version of the image. <img expr:src=’resizeImage(data:post.firstImageUrl, 300)’ /> In my Blog widget, I've customized the HTML so that on feed views (homepage, search, etc), I display post snippets instead of the full post. As a part of thes...
Read more