All about Social Share Buttons

Social Share Buttons encourage supporters to share your campaign with their networks after they've taken action. You can customize them to fit your campaign and even embed them outside of your action.

Finding Social Share Buttons

Enabling and setting up Social Share Buttons

Customizing Social Share Buttons

Embedding Social Share Buttons

Removing Social Share Buttons

Finding Social Share Buttons

You'll first encounter Social Share Buttons in the Content page of the Edit tab, towards the end of the 'Thank You Email Message' and the 'Thank You Page Message' fields:

They appear as three tokens:

  • [node:sp_facebook_page_button] for the Facebook button
  • [node:sp_twitter_page_button] for the Twitter button
  • [node:sp_email_page_button] for the email buttons

And all those tokens appear as actual buttons on the thank you email and the thank you page after you enable the buttons on the Social page:

Enabling and setting up Social Share Buttons

1. Open the Social page on the Edit tab:

You'll see three sections to configure each one of the buttons, with the following fields and options:

  • Enable button: check this box to activate the specific button mentioned
  • Action Page URL: enter the URL of the webpage where your action is embedded (it can be one of our action pages or a page on your website)
  • A/B testing: leave it as 'Disabled' if you want to use a single version of the button, or take a look at this guide on A/B testing if you want to test 2 or 3 versions of the button
  • Twitter Share Button:
    • Share Text: this is where you enter the tweet that will pre-populate when your supporters click on the button. That {LINK} token will automatically pull the Action Page URL you entered earlier, so feel free to move it around but make sure you keep it somewhere in the tweet!
  • Facebook Share Button:
    By default, Facebook pulls this information straight from the page your supporters are linking to (in this case, the Action Page URL) but you can overwrite that by manually defining how the link will look:
    • Title: the title of the page where your action is embedded
    • Description: a description of the page where your action is embedded
    • Thumbnail image: the image that will appear in the link preview alongside the title and description you defined above. The size of the image determines the size of the link preview window, so aim for a 1.91:1 ratio and at least 1200 x 630 pixels for the best looking post possible!
  • Email Share Button:
    This is a pretty neat trick where you can pre-populate an email for your supporters to make it easier for them to share a link to your action. If you leave these fields blank your supporters can still share your action by email, but they'll have to compose the entire email themselves.
    • Email subject: what you'd like the subject of the email to be
    • Email body: what you'd like to be in the body of the email. That {LINK} token will automatically pull the Action Page URL you entered earlier, so you can move it around as you compose the email but make sure it's there by the time you're done!

2. Check the enable box for any buttons you want to use, and make sure you fill in the fields to make sharing a link to your action as frictionless as possible for your supporters.

3. Click the 'Save' button to complete the process.

Customizing Social Share Buttons

You can change the text and look of the Social Share Buttons by editing their HTML code, then embedding them using that code instead of the tokens.

The text on our Social Share Buttons is automatically translated to match the language set in your supporter's browser, so no need to translate them yourself!

1. On the Content page, remove the Social Share Button tokens from the 'Thank You Email Message' and the 'Thank You Page Message' fields. You'll be adding the code for the buttons directly, so removing the tokens ensures that you don't have any duplicate buttons.

2. Next, open the Preview tab and open the Embed Code page:

3. Scroll down to the 'Social Buttons Embed Code' section and click on 'Copy to clipboard':

4. Go back to the Edit tab, open the Content page, and click on the 'Source' button to show the email's underlying HTML code:

5. You'll see the HTML version of the email. Find the space where the Social Share Buttons tokens were, which is now likely to be a '&nbsp;' (a sequence of characters which represents a space) nested between a <p> and a </p>. Delete that whole <p>&nbsp;</p> line, and paste the code you copied in step 3 right over it.

6. You'll now see about a dozen lines of code, which are the HTML versions of the three Social Share Buttons (or as many as you enabled on your action).

  • If you're only looking to change the text on a button, find the "Post to Facebook", "Share on Twitter", or "Share by email" and change the text. Be careful not to change anything else!
  • If you're looking to customize the way the buttons look, here's where you can change their size, colour, font, or anything else right in the HTML. You can use the triangle on the bottom right corner to make the field larger, and the 'Source' button to toggle between the HTML view and the graphical one so you can see your changes in action.

7. Once you're happy with the changes, copy all the lines of code with your edits and scroll down to the Thank You Page Message field. Remove the tokens for the Social Share Buttons, click on the Source button, and paste the code where the tokens were, just like you did in steps 4 and 5.

8. Click on the 'Save & Next' button to complete the process.

When you use the HTML code for your Social Share Buttons instead of their tokens, the buttons become fixed. This means that if you customize the Social Share Buttons on an action and then clone the action, the link on the Social Share Buttons for the clone will point to the original Action Page URL rather than the clone's.

You can edit this right in the clone's 'Thank You Email Message' and the 'Thank You Page Message' fields using the 'Source' view, or remove the customized code from those fields and replace it with the tokens.

Embedding Social Share Buttons

1. Open the Preview tab and open the Embed Code page:

2. Scroll down to the 'Social Buttons Embed Code' section and click on 'Copy to clipboard':

3. Paste the code you just copied where you want the Social Share Buttons to appear!

Removing Social Share Buttons

If you don't want to use Social Share Buttons, all you need to do it turn them off!

1. Open the Social page on the Edit tab and uncheck the 'Enable button' box:

2. Click on the 'Save' button to complete the process.

 


Last updated: June 16, 2021