Funnel Page With Social Sharing Using Squarespace

This Example Code Is Provided For Use With The Video "Funnel Page With Social Sharing Using Squarespace"

Would you like to download the Funnel Page Setup Checklist?

 

Build The Funnel Page Using A Squarespace Cover Page

Page Specific CSS

<style>
/* This defines the custom formatting for */
/* the Form and "Thanks" sections of the Funnel Page */

/* Form Submit Button */
input.button.sqs-system-button.sqs-editable-button {
background-color: #ff9100; /* orange */
}

#funnelthanks { /* entire container */
background-color: #FFDA50; /* yellow */
padding: 30px;
width: 600px;
}
#funnelthanks h1,
#funnelthanks h2 { /* Headings only in this container */
margin: 20px 0px 0px;
color: #2490b7; /* teal */
}
.sharebuttons{ /* Facebook, Twitter, LinkedIn Shares */
width: 160px;
float:left;
margin:10px;
}
.clearfloats { /* forces Shares inside of container */
height:70px;
}
</style>
 

Social Sharing Button Images

To download these images:

  • point your mouse to the image
  • click the "right" mouse button
  • choose "Download Image As ..."

Post-Submit HTML

NOTE:

  1. I created my own sharing button images and uploaded them into my Squarespace account in order for the images to be linked within the HTML. You can download those images from this page (see above).
  2. The Anchor Tags for EACH button must be customized per the requirements of the Social Media Account they represent as indicated in the comments surrounded by <!-- and -->.
<div id="funnelthanks">

<h1>Your Free Book Is On It's Way!
</h1>
<h2>Thank you for signing up, I appreciate you!
</h2>

<p>While you're waiting for it to arrive, why not help a few friends stop working so hard, and start working smarter? Click the buttons below to share this Free Book!
</p>

<!-- IMPORTANT: You MUST customize the HREF value to point to your own URL -->

<div class="sharebuttons"> 
<a href="https://www.facebook.com/sharer/sharer.php?u=http://www.example.com/funnel" target="_blank">
<image src="http://static1.squarespace.com/static/54bede7ee4b024cffc01c915/t/558b0435e4b0d851414b3106/1435173941621/Share_Facebook.png" width="150px">
</image>
</a> 
</div>
<!-- IMPORTANT: You MUST customize the HREF value to contain your own Tweet text and shortened URL. You must encode it properly by using + in place of a space, %3A% in place of : and %2F in place of / in the URL) -->

<div class="sharebuttons">
<a href="https://twitter.com/intent/tweet?text=TEXT+OF+TWEET+GOES+HERE+http%3A%2F%2Fbit.ly%2F1ijGXf" target="_blank">
<image src="http://static1.squarespace.com/static/54bede7ee4b024cffc01c915/t/558b03f5e4b0bab95f43c462/1435173877984/Share_Twitter.png" width="150px">
</image>
</a> 
</div>
<!-- IMPORTANT: You MUST customize the HREF value to contain your own URL and descriptive text. You must encode it properly by using + in place of a space) -->

<div class="sharebuttons">
<a href="https://www.linkedin.com/shareArticle?mini=true&url=http://www.example.com/funnel&title=DESCRIPTIVE+TITLE+GOES+HERE&summary=DESCRIPTIVE+SUMMARY+GOES+HERE&source=YOURNAME" target="_blank">
<image src="http://static1.squarespace.com/static/54bede7ee4b024cffc01c915/t/558b0448e4b050b2d0e0f99d/1435173960258/Share_LinkedIn.png" width="150x">
</image>
</a> 
</div>

<div class="clearfloats">
&nbsp;
</div>
</div>