Take control of your follow-up pages in Salsa

Chilli peppers

A petition page is only as good as its follow-up. Not giving petition signers the tools to easily share the action they took is like leaving money on the table. 

Thankfully most petition sites use their "Thank You!" pages to push the signer to spread the word and recruit their friends using Facebook and Twitter. Unfortunately, in most cases the pages are barely customizable, if at all. Since I like to fine-tune everything down to the pixel — and I like to A/B test — I've been trying to get a good handle on the social share options that Salsa uses.

Unfortunately, their follow-up share functionality is in beta, and I've found it both unreliable and not nearly as customizable as I need. However, their regular social sharing setup is delightfully straightforward. What I needed to do is take the standard share links Salsa puts in the upper right hand corner of the petition page and move it down to the Thank You section that people see after they sign. That's not the easiest thing in the world, as Salsa wraps all your share information into a custom JavaScript function, which looks something like shareFBLink20763();.

Thanks to a bit of custom JavaScript of our own, we can capture those function calls and roll them into our own custom follow-up.

Step 1

First, we've got to add our code to whichever Salsa template we'll be wrapping our petition in, to pull in the custom number that Salsa created. Put this at the bottom of your template page, before the closing </body> tag:

<!-- Pulls in the unique ID for Salsa's automated Twitter and Facebook share icons -->
<script type="text/javascript">
var shareClass = document.getElementById("socialButtons").className;
var shareClassCleanup = shareClass.replace(" size-32", "");
var shareNumber = shareClassCleanup.replace("s", "");
function twitterClick() {
window["loginTwitter" + shareNumber](); return false;
}
function facebookClick() {
window["shareFBLink" + shareNumber](); return false;
}</script>

Step 2

Now we add the code that calls our new functions to the Follow-up section of our petition:

Salsa Thank You Text

Here's the code I inserted. The <div> wrapper is optional, but recommended if you want to apply CSS to this section. Here is where you can make your follow-up section really shine. Customize your text, change up your share buttons to see which work better, add a cute photo of baby seals asking the user to send out a tweet — the sky is the limit.

<div id="thankscontainer"><a name="thanks" ></a><h2>Thanks for adding your voice! <br/>Now double your impact by telling your friends on Facebook and Twitter:</h2>

<p><a href="#thanks" onclick="facebookClick();"><img src="http://salsa.wiredforchange.com/o/6041/images/salsa-facebook.png" width="256" height="223" alt="Share on Facebook" /></a> <a href="#thanks" onclick="twitterClick();"><img src="http://salsa.wiredforchange.com/o/6041/images/salsa-twitter.png" width="256" height="223" alt="Tweet this!" /></a></p></div>

Step 3

Now we just have to ensure that your petition has social sharing enabled. Click on the "Show Publishing Tools" button on the upper right of the page, and click the "Configure Sharing" link. Then make sure the first checkbox is checked, as shown below. If it's not checked, the share links won't work. This is also where, under "advanced options," you can add customized share language and graphics. I highly recommend taking a few minutes to do this, but if you leave it empty it's not the end of the world — it will just pull default language from your page's title and content. Make sure to hit Save at the bottom!

Salsa Edit Sharing Preferences

And there you have it. After adding just some rudimentary CSS the template, here's an example of what it looks like immediately after a user signs a petition:

Salsa Petition Thank-You

Hopefully you found this useful! Let me know if you have any questions in the comments.