Sample HTML code to add Share and Like Buttons to an email

Frequent Participant

Sample HTML code to add Share and Like Buttons to an email

Hi all,


We recently released a feature that lets you add Share and Like Buttons to the top of your emails when creating an email in Constant Contact's Enhanced Email Editor. I thought I would share with you all some sample code for getting these buttons into your custom HTML emails as well!


 


1) Create a custom HTML email in Constant Contact.


 


2) Go to the Schedule Email page for the email you just created and click the Tweet this email checkbox.


 


3) Connect with Twitter if needed by clicking the "Allow" link and then look in the default Tweet text shown for your email's social webpage URL. The Social webpage URL is a short URL (http://conta.cc/SOMETHING) that currently only be found by checking the "Tweet this email" checkbox.


 


4) Copy this link from #3 above! If you don't want to Tweet the email on send, just uncheck the "Tweet this email" box after you copy the link. We know that this social webpage URL would be useful to make available via our developer API and we hope to make it available for developers as soon as possible.


 


5) Save your draft email and return to the edit screen for the SAME email.


 


6) Copy the HTML below into your custom email and replace every instance of {MYEMAILURL} with the social webpage URL you have copied.




<!--- SHARE AND LIKE BUTTONS CODE: REPLACE {MYEMAILURL} WITH YOUR EMAIL'S SOCIAL WEBPAGE URL! -->


<table cellspacing="0" cellpadding="0" border="0">

 <tbody><tr>

 <td style="padding: 0in;">

  <p class="MsoNormal"><img border="0" src="http://img.constantcontact.com/ui/images1/shr_drw_left.png"/></p>

  </td>

  <td style="padding: 0in;">

  <p class="MsoNormal"><a target="_blank" title="Share with Facebook" href="http://www.facebook.com/sharer.php?u={MYEMAILURL}"><span style="text-decoration: none;"><img border="0" src="http://img.constantcontact.com/ui/images1/shr_drw_fb.png"/></span></a></p>

  </td>

  <td style="padding: 0in;">

  <p class="MsoNormal"><a target="_blank" title="Share with Twitter" href="http://twitter.com/home?status={MYEMAILURL}"><span style="text-decoration: none;"><img border="0" src="http://img.constantcontact.com/ui/images1/shr_drw_twit.png"/></span></a></p>

  </td>

  <td style="padding: 0in;">

  <p class="MsoNormal"><a target="_blank" title="Share with LinkedIn" href="http://www.linkedin.com/shareArticle?url={MYEMAILURL}"><span style="text-decoration: none;"><img border="0" src="http://img.constantcontact.com/ui/images1/shr_drw_linked.png"/></span></a></p>

  </td>

  <td style="padding: 0in;">

  <p class="MsoNormal"><img border="0" src="http://img.constantcontact.com/ui/images1/shr_drw_divider.png"/></p>

  </td>

  <td style="padding: 0in;">

  <p class="MsoNormal"><a target="_blank" title="More Share Options" href="http://www.addthis.com/bookmark.php?v=250&pub=ctctproductstrategy&url={MYEMAILURL}"><span style="text-decoration: none;"><img border="0" src="http://img.constantcontact.com/ui/images1/shr_drw_more.png"/></span></a></p>

  </td>

  <td style="padding: 0in;">

  <p class="MsoNormal"><img border="0" src="http://img.constantcontact.com/ui/images1/shr_drw_right.png"/></p>

  </td>

  <td style="padding: 0in 0in 0in 3.75pt;">

  <p class="MsoNormal"><a target="_blank" title="Like This" href="{MYEMAILURL}#fblike"><span style="text-decoration: none;"><img border="0" src="http://img.constantcontact.com/ui/images1/shr_btn_like_sm.png"/></span></a></p>

  </td>

 </tr>

</tbody></table>


<!--- END SHARE AND LIKE BUTTONS CODE -->




7) Preview your email. You should see your Share and Like Buttons! Note that the social webpage URL for an email will not be active until the email has been sent, and this URL is unique for every email.


Enjoy!




-Aaron Severs

 Product Manager, Social Media

Tom M
Group Product Manager – Content Editing
Constant Contact
2 REPLIES 2
Participant

Nice, Aaron!


Thanks for the example(s).


Is there a way to associate a description and image to the share2social buttons? Or... what image/description shows up if a user shares an email to their Facebook wall, etc ?


 


Thanks again,


-Carl

Frequent Participant

After receiving some questions on XHTML campaigns, I updated the example above so that it should work with XHTML campaigns (the src tags needed an end src '/' added).


Thanks,


Tom Mignosa, Product Manager

Tom M
Group Product Manager – Content Editing
Constant Contact
Developer Portal

View API documentation, code samples, get your API key.

Visit Page