Add whatsapp sharing to my Dynamic Views template

The Dynamic Views template uses a different rendering engine than other templates, handled on the client. For people using Contempo, Soho, Emporio or Notable, you can follow the instructions for the new templates - this article covers Dynamic Views.

Adding whatsapp for Dynamic views involves overriding the template used for sharing.

  1. Head to Theme -> Edit HTML
  2. Go to the very bottom of the page
  3. Copy and add the following script, above the existing one.
  4. Update the existing initialization script to include compliation of the sharing script's template contents.

Sharing template override

<script id='sharing' type='text/json'>
  {template:Sharing}
    <div class='share-controls {block:defer}defer{/block:defer} {block:delay}delay{/block:delay}' data-defer='{defer}' data-delay='{delay}'>
      {block:IfNotdisable-plusone}{SharePlusOne}{/block:IfNotdisable-plusone}
      {block:IfNotdisable-twitter}{ShareTwitter}{/block:IfNotdisable-twitter}
      {block:IfNotdisable-facebook}{ShareFacebook}{/block:IfNotdisable-facebook}
    </div>
    {block:IfMobile}{ShareWhatsapp}{/block:IfMobile}
  {/template:Sharing}
  {template:ShareWhatsapp}
    <a style='display:block' data-action='share/whatsapp/share' href='whatsapp://send?text={url}'>
    <span aria-label='Share to Whatsapp' class='sharing-platform-button sharing-element-whatsapp' role='menuitem' tabindex='-1' title='Share to Whatsapp'>
        <svg style='vertical-align:middle' class='svg-icon-24 sharing-whatsapp' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'>
          <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>
  {/template:ShareWhatsapp}
</script>

As mentioned in step 4 above, we also need add a hook to override/compile the sharing template. We do so by replacing the default script at the tail of the body with one that includes the compilation call.

Initialization script

<script language='javascript' type='text/javascript'>
  window.onload = function() {
    blogger.templates().compile(document.getElementById('sharing').innerHTML);
    blogger.ui().configure().view();
  };
</script>

Once both scripts are included in your template's HTML, you should see Whatsapp sharing when ?m=1 is present.

Happy whatsapp'ing!

Comments

Post a Comment

Popular posts from this blog

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

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

Add snippets to the Emporio theme

Image
A lot of people love the image-focused look of the newer Emporio template. This article explains how to tweak your template's XML to add a short snippet to the Emporio posts - unfortunately, there's no easy way to add in snippets for Emporio, without customizing the markup. But, if you're feeling brave, head to: Theme -> Edit HTML -> Jump to Widget -> Blog 1 If you search for 'snippet-container', you'll come across: <div class='snippet-container r-snippet-container'> <div class='r-snippetized'> <data:post.title /> </div> <b:if cond='data:post.title != ""'> <div class='snippet-fade r-snippet-fade hidden'></div> </b:if> </div> Notice that it's just got the title. You could change it to add something like: <div class='snippet-container r-snippet-container'> <div class='r-snippetized'> <data:post.
Read more