Adding Share links to your thank you email is fairly easy, if you're willing to tackle a little bit of HTML.
This is an example of what it could look like.
1. Inserting the HTML "snippet"
- Open your action on the "Emails" step (https://your.impactstack.org/node/123/wizard/emails)
- Scroll down to the WYSIWYG editor and click on the "Source" view. Don't panic! The scrambled view is normal! ;-)
- To make it easier for you, here is a bit of HTML for the share links you can copy and paste and then modify:
<h2>Share this action!</h2>
<div class="content"><ul class="share-light">
<li><a href="https://LINK HERE" target="_blank" title="Share this via E-Mail!">E-Mail</a></li>
<li><a href="mailto:?subject=Subject%20line&body=Email%20body">Share with email client</a></li>
<li><a href="https://www.facebook.com/sharer.php?u=https%3A//LINK HERE" target="_blank" title="Share this via Facebook!">Facebook</a></li>
<li><a href="http://twitter.com/share?url=https%3A//LINK HERE&via=YOUR ACCOUNT NAME&hashtags=tag1,tag2&text=tweet%20text%20here" target="_blank" title="Share this via Twitter!">Twitter</a></li>
</ul></div>
Now, let's look at the individual elements in this snippet
2. <h2>Share this action!</h2>
This is the headline of your links
3. <div> and <ul>
This simply defines that the next lines will be a unnumbered list. The bullet points of the list are then shown as <li> (list)
4. Share via Email
<li><a href="https://LINK HERE" target="_blank" title="Share this via E-Mail!">E-Mail</a></li>
Replace the blue href="https://LINK HERE" with the URL you want to share (usually the URL to your action. You might want to add URL parameters and add tracking).
Replace the orange E-Mail with the text you want the Hyperlink to show.
<li><a href="mailto:?subject=Subject%20line&body=Email%20body">Share with email client</a></li>
A 'mailto' link like this will open your supporter's device's default email client. This might be Apple Mail on an iOS or Mac or Outlook on a Windows PC, for example. This will vary by device. It might be surprising for people to find out that Outlook is opening even though they always use Gmail in a browser.
There are lots of services that help you to easily create these 'mailto' link such as Mailto link generator. You probably only want to add a subject line and a body to the link for a share page like this.
5. via Facebook
<li><a href="https://www.facebook.com/sharer.php?u=https%3A//LINK HERE" target="_blank" title="Share this via Facebook!">Facebook></a></li>
Replace the blue href="https://www.facebook.com/sharer.php?u=https%3A//LINK HERE" with the URL you want to share (usually the URL to your action. Again, you might want to add URL parameters and add tracking). The "%3A" replaces the colon in the URL, this is called "encoding".
Replace the orange Facebook with the text you want the Hyperlink to show.
6. Share via Twitter
<li><a href="http://twitter.com/share?url=https%3A//LINK HERE&via=YOUR ACCOUNT NAME&hashtags=tag1,tag2&text=tweet%20text%20here" target="_blank" title="Share this via Twitter!">Twitter</a></li>
Here you have a few more elements than in the two options before. You can always leave a factor out (like the account or the hashtags) by deleting everything between two "&" plus one of the "&" themselves.
Replace the blue href="http://twitter.com/share?text=&url=https%3A//LINK HERE" with the URL you want to share (usually the URL to your action. Again, you might want to add URL parameters and add tracking). The "%3A" replaces the colon in the URL, this is called "encoding".
Replace the pink via=YOUR ACCOUNT NAME with your account name (eg more_onion) if you want to automatically have your account mentioned.
Replace the green hashtags=tag1,tag2 with the keywords you'd like to have as hashtags. No need to insert the "#".
Replace the red text=tweet%20text%20here with the text you'd like to have as tweet. This text needs to be encoded. An easy way to encode text is by using little helpers such as this site.
Replace the orange Twitter with the text you want the Hyperlink to show.
Test your tweet by copying the following url and replacing the shared url with what you've written.
URL for testing
Example for replacement
7. And now what?
In your WYSIWYG editor deactivate the "source" view. Your email should now look something like this:
Remember: always test your actions with the relevant emails and share links before launching! ;-)
Comments