Knowledge Base/ExactTarget Tips and Tricks/User Guides & How To Catalogue

Adding Social Forward to a Custom Template

Josiah Kaiser
posted this on October 28, 2009 05:40 pm

This article offers specific instructions on how to embed a ShareThis Social Forward icon into a custom template.  Understanding of HTML, Social Forward, and AMPScript is advised.

 

Step 1: Declaring a Social Region

The first thing we need to do is define the region that is going to be shared via the Social Forward utility. In this case, we will be defining the entire body of the email, excluding the header and the footer. To do this we need to insert the following code right after the <body> tag in the html code. There are three variables that we will need to define, they are all encased in double quotes(" "):

 

  • RegionName -- This defines the name of the region so that it can be referenced. Something suitable across multiple sends is appropriate for use in a custom template such as "Monthly Newsletter" while a more specific title can be used in Paste HTML emails.
  • Region Title -- This is the title that will be displayed on social networks. Again, if this title is going to be used in multiple sends, this should be non-specific. This is not a required field.
  • Description -- This is a brief description that will be posted on social networks. This is not a required field.

 

The following is the format the code should take:

<body>

<!-- RegionStart[ socialslot:"RegionName", title:"RegionTitle", description:"Brief Description"] -->

 

The code to close a content region is even simpler. The only field that needs defined is RegionName. This content will be inserted right before the closing </body> tag and takes the following form:

<!-- RegionEnd[ socialslot:"RegionName"] -->

 

Step 2: Inserting the Social Icon

 

This require insertion a block of code where the Social Forward link and image should appear. The images used as the individual social icons are located in the "Social" folder in you "Portfolio" with you account. Simply view the properties or double click the needed icon to find its URL.  You will also need to define the social network that is being shared to by number. The following tables shows that available social networks or sharing services and their numerical identifier.

 

Social Network

Numerical Identifier
Facebook 1
Delicious 2
Digg 3
MySpace 4
StumbleUpon 5
Google 6
Microsoft 7
Yahoo 8
LinkedIn 9
ShareThis 10
Twitter 11

 

In the following code, we will be using "10" to indicate we are sharing to the ShareThis network which will then allow the person sharing the content to choose which networks to post across.

 

 

<!-- Creates a link to share this content on ShareThis -->

        <a href="%%=GetSocialPublishURL('10','RegionName')=%%" 

            alias="LinkAlias" 

            title="LinkTitle">

            <img 

                src="Image URL" 

                alt="ShareThis" 

                title="ShareThis" 

                border="0">

         </a>

 

 

That's It

 

Once you complete those two steps, you are finished. That's it.  Of course, before using this feature in the wild, TEST TEST TEST.

 

~Josiah