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.
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:
Now we add the code that calls our new functions to the Follow-up section of our petition:
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>
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!
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:
Hopefully you found this useful! Let me know if you have any questions in the comments.