All Collections
Share Buttons
Creating Auto-Generated Share Buttons
Creating Auto-Generated Share Buttons
Anna Schmitz avatar
Written by Anna Schmitz
Updated over a week ago

If you want to automatically create share buttons with each new webpage, you can use embedded share buttons to embed buttons in your template.

1. Install Your Share Code Snippet

You'll want to include your share code snippet in the <head> section of any page where you use ShareProgress buttons.

2. Add The Share Button Tags

You can include the following tags on any page with the share code snippet to have it automatically generate a ShareProgress share button:

  • Facebook share

<div class="sp_fb_small sp_share_button"></div>
  • Twitter share

<div class="sp_tw_small sp_share_button"></div>
  • Email share

<div class="sp_em_small sp_share_button"></div>

The first time a visitor comes to the page, it will create a new button in the ShareProgress system. You can then go view your buttons in order to make any share text edits and set up any A/B tests you want to run (the name of the button(s) will be the same as the page name).

Optional: Include Meta Tags

Facebook share text will be automatically set based on any Open Graph tags on the page, but if you want to specify Twitter share language, you can do so with the following meta tag:

Facebook share:
(The same meta tags you use for Facebook)
<meta property="og:title" content="FACEBOOK TITLE" />
<meta property="og:description" content="FACEBOOK DESCRIPTION" />
<meta property="og:image" content="URL TO FACEBOOK THUMBNAIL" />

Twitter Share:
<meta name="sp:twitter" content="TWEET_TEXT" />

Email Share:
<meta name="sp:email_subject" content="EMAIL SUBJECT LINE" />
<meta name="sp:email_body" content="Email body goes here {LINK}" />

When a new Twitter share button is created, it will then use that share language by default.

Optional: Specify URL

By default, the share buttons will share the page they are on. If you would like to generate buttons to share a different page, you can set page url by adding page_url="PAGE_URL_TO_SHARE" to your share button.

For example <div class="sp_tw_small sp_share_button" page_url="http://www.twitter.com"></div> will create a Twitter share button sharing a link to Twitter.com.

Did this answer your question?