You are here:
Social Content Slot Sharing in a Paste HTML Email
Creating an email in Email Studio by pasting HTML code into an email allows you a great deal of control over how your email appears to your subscribers. That same control makes sharing social content slots via pasted HTML an effective tool in getting your content onto social networks. You can create and place your shared social content slots and icons with great precision using the directions provided below. You can also easily create multiple shared social content slots in one document. If your normal workflow included using pasted HTML to create your emails, adding Social Forward markup should integrate easily into your process.
This reference uses a Paste HTML email in Email Studio and identifies the sections of the email to share. The example shares a social content slot to Facebook, but you can choose from several different social networks when sharing content using Social Forward.
Standard Facebook Icon Content Area Sharing
The HTML comment tags surround the information to be shared in the social content slot. The tag below starts the social content slot and assigns it a name.
<!-- RegionStart[
socialslot:"FacebookStandardIcon", title:"Facebook Standard Icon", description:"Share to
Facebook with Standard Icon", csskey:"CSS file"] -->
The csskey parameter allows a CSS file to be associated to the social content area and controls the styling of that shared content.
The tag below ends the social content slot with the same name listed in the beginning tag.
<!-- RegionEnd[
socialslot:"FacebookStandardIcon"] -->
The shared content itself, including the text and image, appears between these two comment tags.
The shared social content slot includes an hyperlinked image that leads to the shared content.
This code creates the button users can click to share the shared content slot:
<a
href="%%=GetSocialPublishURLByName('Facebook','US','FacebookStandardIcon')=%%" alias="Social
Forward to Facebook - standard icon" title="Publish to Facebook"><img
src="http://image.preview.exacttarget.com/lib/ffcf14/m/1/social_default_facebook_icon.jpg"
border="0" alt="Facebook" title="Facebook"></a>
You can use AMPscript to specify the destination URL in the href attribute of the link tag:
%%=GetSocialPublishURLByName('Facebook','US','FacebookStandardIcon')=%%
You can change the AMPScript function to share different slots to different social networks by simply changing the arguments passed. The first argument passed to GetSocialPublishURLByName indicates the social network with which Social Forward will share the content. Use the name of the region to share in the second argument. In this case, you are sharing the region FacebookPasteStandardIcon.
The image within the link tags shares the region, as shown in the code below:
<img src="http://image.preview.exacttarget.com/lib/ffcf14/m/1/social_default_facebook_icon.jpg" border="0" alt="Facebook" title="Facebook">The source tag specifies the default image used for Facebook.
The final code block used by Social Forward to share a social content slot looks like this example:
<!-- RegionStart[ socialslot:"FacebookStandardIcon", title:"Facebook Standard Icon", description:"Share to Facebook with Standard Icon"] -->
<p>Standard Facebook Icon</p>
<p><table cellspacing="0" cellpadding="0" align="left"><tbody><tr><td align="right">Hi! </td></tr></tbody></table><strong>This content represents the first shared social content slot.</strong></p>
<p><a href="%%=GetSocialPublishURLByName('Facebook','US','FacebookStandardIcon')=%%" alias="Social Forward to Facebook - standard icon" title="Publish to Facebook"><img src="http://image.preview.exacttarget.com/lib/ffcf14/m/1/social_default_facebook_icon.jpg" border="0" alt="Facebook" title="Facebook"></a></p>
<!-- RegionEnd[ socialslot:"FacebookStandardIcon"] -->Custom Facebook Icon Content Area Sharing
Sharing the Custom Facebook Icon slot using a custom icon is very similar to using the standard icon, with a few differences:
- The HTML comments defining the region to share have the title FacebookPasteCustomIcon.
- The AMPScript function within the sharing link references the area FacebookPasteCustomIcon.
- The image contained within the HTML link tags specifies a custom icon source in the Portfolio.
This code shares the custom icon region:
<!-- RegionStart[ socialslot:"FacebookCustomIcon", title:"Facebook with Custom Icon", description:"Facebook with Custom Icon"] -->
<p>Custom Facebook Icon</p>
<p><table cellspacing="0" cellpadding="0" align="left"><tbody><tr><td align="right">Hi! </td></tr></tbody></table><strong>This content represents the second shared social content slot.</strong></p>
<p><a href="%%=GetSocialPublishURLByName('Facebook','US','FacebookCustomIcon')=%%" alias="Social Forward to Facebook - FacebookCustomIcon" title="Publish to Facebook"><img src="http://image.preview.exacttarget.com/lib/ff66157875/m/1/facebook-alt.png" border="0" alt="Facebook" title="Facebook"></a></p>
<!-- RegionEnd[ socialslot:"FacebookCustomIcon"] -->
This example shows the HTML for the email:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Thank you for your interest in ExactTarget Email.</title>
<style type="text/css">
html body { margin: 0; padding: 0; font: 0.76em normal Arial, Verdana, Helvetica, sans-serif; color: #554; }
#cntr { width: 600px; }
#cntr .cnt { margin: 1.0em }
#cntr .cnt span { font-size: 1.5em; color: #000; }
#cntr .cnt strong { font-size: 1.0em }
</style>
</head>
<body bottommargin="0" leftmargin="0" rightmargin="0" marginheight="0" marginwidth="0" topmargin="0">
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" align="left"><font face="verdana" size="1" color="#444444"><p>To view this email as a web page, go <a href="%%view_email_url%%" alias="View as a Web Page"> here.</a></p></font></td>
</tr>
</table>
<div align="center" style="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: #333;">
<div id="cntr" align="left" style="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: _fckstyle="background-color: #FFF;">
<div class="nav" style="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: _fckstyle="height: 50px; width: 600px; background: #222 url('http://image.exct.net/8c953a0c-d.jpg');">
<table width="100%" cellpadding="0" cellspacing="4" border="0">
<tr>
<td valign="left"><strong>This email uses the new Social Forward feature!</strong></td>
</tr>
</table></div>
<div class="cnt" style="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: _fckstyle="border-bottom: 1px solid #CCC; margin: 1.0em">
<!-- RegionStart[ socialslot:"FacebookStandardIcon", title:"Facebook Standard Icon", description:"Share to Facebook with Standard Icon"] -->
<p>Standard Facebook Icon</p>
<p><table cellspacing="0" cellpadding="0" align="left"><tbody><tr><td align="right">Hi! </td></tr></tbody></table><strong>This content represents the first shared social content slot.</strong></p>
<p><a href="%%=GetSocialPublishURLByName('Facebook','US','FacebookStandardIcon')=%%" alias="Social Forward to Facebook - standard icon" title="Publish to Facebook"><img src="http://image.preview.exacttarget.com/lib/ffcf14/m/1/social_default_facebook_icon.jpg" border="0" alt="Facebook" title="Facebook"></a></p>
<!-- RegionEnd[ socialslot:"FacebookStandardIcon"] -->
<!-- RegionStart[ socialslot:"FacebookCustomIcon", title:"Facebook with Custom Icon", description:"Facebook with Custom Icon"] -->
<p>Custom Facebook Icon</p>
<p><table cellspacing="0" cellpadding="0" align="left"><tbody><tr><td align="right">Hi! </td></tr></tbody></table><strong>This content represents the second shared social content slot.</strong></p>
<p><a href="%%=GetSocialPublishURLByName('Facebook','US','FacebookCustomIcon')=%%" alias="Social Forward to Facebook - FacebookCustomIcon" title="Publish to Facebook"><img src="http://image.preview.exacttarget.com/lib/ff66157875/m/1/facebook-alt.png" border="0" alt="Facebook" title="Facebook"></a></p>
<!-- RegionEnd[ socialslot:"FacebookCustomIcon"] -->
</div>
</div>
</div>
<table cellpadding="2" cellspacing="0" width="600" border="0" align="center">
<tr>
<td valign="top" align="left" style="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: _fckstyle="line-height: 16px;">
<p><font face="verdana" size="1" color="#777777">This email was sent to: <b>%%emailaddr%%</b><br />
<a href="%%subscription_center_url%%" alias="Manage Subscriptions">Manage Subscriptions</a> |
<a href="%%profile_center_url%%" alias="Update Profile">Update Profile</a> |
<a href="%%unsub_center_url%%" alias="Unsubscribe">One-Click Unsubscribe</a></p>
<p>This email was sent by: <b>%%Member_Busname%%</b><br />%%Member_Addr%% %%Member_City%%, %%Member_State%% %%Member_PostalCode%% %%Member_Country%%</p>
<p>We respect your right to privacy - <a href="http://email.exacttarget.com/ETWeb/company.aspx?id=80" alias="View Privacy Policy" style="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: _fckstyle="color: #0000ff">view our policy</a></p>
</font>
</td>
<td width="145" align="right" valign="center"><a href="http://www.exacttarget.com" title="This email is Powered By ExactTarget" alias="Powered By"><img src="http://email.exacttarget.com/images/Powered_By_1206.jpg" width="124" height="55" alt="This email is Powered By ExactTarget" border="0" /></a></td>
</tr>
</table>
</body>
<custom name="opencounter" type="tracking">
</html>