Adding share buttons to the auto response email template

We won’t focus too much on styling here because that’s another issue entirely. Instead we’ll focus on the functionality of the buttons.

We will create five different share options, X (Obviously always Twitter really), Facebook, LinkedIn, WhatsApp and email. However these are all optional and we could apply these same principles to different platforms if required.

The basic structure

First things first, let’s set up our basic structure for the links. It consists of an unordered list with some minimal styling, each containing an image icon wrapped in an anchor:

<ul style="padding:0; margin:0; list-style:none;">
    <li style="float:left; margin-right:10px; margin-left:0; height:25px;">
        <a href="">
            <img src="x-icon.png" style="width:25px; height:25px;" title="Share via X"/>
        </a>
    </li>
    <li style="float:left; margin-right:13px; margin-left:0; height:25px;">
        <a href="">
            <img src="facebook-icon.png" style="width:25px; height:25px;" title="Share via Facebook"/>
        </a>
    </li>
    <li style="float:left; margin-right:15px; margin-left:0; height:25px;">
        <a href="">
            <img src="linkedin-icon.png" style="width:25px; height:25px;" title="Share via LinkedIn"/>
        </a>
    </li>
    <li style="float:left; margin-left:0; height:25px;">
        <a href="">
            <img src="whatsapp-icon.png" style="width:25px; height:25px;" title="Share via WhatsApp"/>
         </a>
    </li>
    <li style="float:left; margin-right:20px; margin-left:0; height:25px;">
        <a href="">
            <img src="email-icon.png" style="width:25px; height:25px;" title="Share via email"/>
        </a>
    </li>
</ul>

Because we’re dealing with an email template we have to deal with the archaic, and inconsistent way in which different email clients handle html and css. Inline styling is our best bet for consistency, as inefficient as it is.

We’ve done some basic styling to remove padding, margin and list styling from the <ul> and floated our <li> tags with a bit of margin on the right so the icons sit next to each other.

Inside each <li> is an anchor (href to follow) which contains an icon image for the share method in question. I’ve set the height and width to 25px here, but you may need to adjust that depending on how large you want them to appear and what icon set you use. For what it’s worth I’m a big fan of remixicon.

Now we’ve set up a basic structure we need to do the important bit, i.e. create and and add the share links to each icon’s anchor.

Adding the share links to the anchors

The first thing we need to do here is to establish what piece of content we want to share. This is an autoresponse email, so it will have been received in reference to an action the recipient has taken on the site. For example, let’s imagine they signed a petition on the site, we want these share links to reference that petition page so that it will encourage their audience to also sign the petition. So firstly, we need to get the url of that page.

Luckily this is pretty easy. NationBuilder provides the ‘full_url’  liquid variable that we could use here which, as the name suggests, outputs the full url of the page in question.

Using that as our basis now we can construct hrefs for each platform.

X (Twitter)

The format of an X share url is as follows:

https://twitter.com/share?url=[URL_TO_BE_SHARED]&text=[MESSAGE TO BE SHARED]

So to construct this we need two elements. The url to be shared is easy, we can get this by including the {{ full_url }} variable tag

https://twitter.com/share?url={{ full_url }}&text=[MESSAGE TO BE SHARED]

Next we need to add the tweet message part. Luckily NationBuilder makes this pretty easy as well. Within each page are some social media settings which gives us the facility to add a ‘Default post for Twitter’:

We can then access that message using the ‘page.default_face_tweet_text’ variable. However, before we can use it in our url we need to encode it. We can create a new variable with the encoded message like this:

{% assign shareMessage = page.default_face_tweet_text | url_encode %}

We can then add our shareMessage variable to the href like so:

https://twitter.com/share?url={{ full_url }}&text={{ shareMessage }}

If we add this url to our X share link that should open twitter and populate a tweet with our tweet message and a link to our page already written.

Facebook and LinkedIn

Facebook and LinkedIn are a simpler proposition than X because they don’t allow for a message, just a url. Since we already have the variable for our page url we can include it in our Facebook and LinkedIn hrefs like this:

Facebook: http://www.facebook.com/share.php?u={{ full_url }}

LinkedIn: https://www.linkedin.com/shareArticle?url={{ full_url }}

WhatsApp

WhatsApp, like Twitter allows for a message to accompany the shared url. We have already generated our shareMessage variable for the twitter link so we can reuse that, along with the ‘full_url’ variable. The structure of our WhatsApp href is as follows:

https://api.whatsapp.com/send?text={{ shareMessage }}%0D%0A{{ full_url }}

Email

Our last shareable link is for pre-populating an email. This is the most complicated one because not only do we want to add a message which includes the url for the page we want to share, but we also want to include a subject.

For the email subject we’ll use the headline of the page we’re sharing. Before it’s ready for the href though we need to do two things, url encode it and, just in case, remove any line break tags:

{% assign encodedTitle = page.headline | url_encode | remove: '%3Cbr%3E' %}

Here we’ve created a variable called encodedTitle which consists of the page headline (page.headline). We’ve then run the variable through two filters. First ‘url_encode’ to prepare the text for use in a url. Secondly, we’ve used the ‘remove’ filter and stripped out any instances of ‘%3Cbr%3E’ which is what a line break tag turns into after url encoding.

Now we can start to construct our email url, the format of which is:

mailto:?subject=[EMAIL SUBJECT]&body=[EMAIL CONTENT]

For the email content we’ll use the ‘shareMessage’ variable we already created followed by the ‘full_url’ variable so that the page link is at the bottom.

We’ll create a new variable for our email url as follows:

{% assign emailUrl = ‘mailto:?subject=’ | append: encodedTitle | append:’&body=’ | append:shareMessage | append:’%0D%0A’ | append: full_url %}

Here we’ve created the variable ‘emailUrl’ and appended the syntax for an email url with our variables in the correct places. The ‘%0D%0A’ code simply adds a new line for our share url to sit on.

The final code

All together our share links look like this:

{% assign shareMessage = page.default_face_tweet_text | url_encode %}
{% assign encodedTitle = page.headline | url_encode | remove: '%3Cbr%3E' %}
{% assign emailUrl = 'mailto:?subject=' | append: encodedTitle | append:'&body=' | append:shareMessage | append:'%0D%0A' | append: full_url %}

<ul style="padding:0; margin:0; list-style:none;">
    <li style="float:left; margin-right:10px; margin-left:0; height:25px;">
        <a href="https://twitter.com/share?url={{ full_url }}&amp;text={{ shareMessage }}">
            <img src="x-icon.png" style="width:25px; height:25px;" title="Share via X"/>
        </a>
    </li>
    <li style="float:left; margin-right:13px; margin-left:0; height:25px;">
        <a href="http://www.facebook.com/share.php?u={{ full_url }}">
            <img src="facebook-icon.png" style="width:25px; height:25px;" title="Share via Facebook"/>
        </a>
    </li>
    <li style="float:left; margin-right:15px; margin-left:0; height:25px;">
        <a href="https://www.linkedin.com/shareArticle?url={{ full_url }}">
            <img src="linkedin-icon.png" style="width:25px; height:25px;" title="Share via LinkedIn"/>
        </a>
    </li>
    <li style="float:left; margin-left:0; height:25px;">
        <a href="https://api.whatsapp.com/send?text={{ shareMessage }}%0D%0A{{ full_url }}">
            <img src="whatsapp-icon.png" style="width:25px; height:25px;" title="Share via WhatsApp"/>
        </a>
    </li>
    <li style="float:left; margin-right:20px; margin-left:0; height:25px;">
        <a href="{{ emailUrl }}">
            <img src="email-icon.png" style="width:25px; height:25px;" title="Share via email"/>
        </a>
    </li>
</ul>