Social links/buttons
Dispatch offers three ways to embed social links or buttons in your email messages and then track that activity. To make embedding social buttons or link easy, you can use three custom tags to Tweet a message, Share or Like a message on Facebook, or forward the email to a friend.
Tweet
Embed a link or button that takes a user to X (aka Twitter) to tweet about the message they've received. When a user clicks on the link or button, Dispatch will track the link click as a "share".
Tag Attributes:
| Attribute | Required | Description |
|---|---|---|
| output | Required | How you want the link to be output. Options are link or button. If you choose link, only the URL will be outputted.
You will need to wrap the URL in the appropriate HTML. If you use button, the button is completely self-contained and you can customize using the following tags. |
| bkgcolor | Optional | The background color of the button. The default is grey (#999999. |
| color | Optional | The foreground color of the text of the button. The default is white. At this time, this setting does not change the color of the Twitter logo. |
| style | Optional | If you want to add in a custom inline CSS style, you can use this attribute. |
| cssclass | Optional | If you want to add in a custom CSS class, you can use this attribute. Please note that not all email clients respect referencing CSS classes for styling. |
Example 1: Embed a Tweet button with all the defaults
<@sharetweet output="button"/>
Would render as:
Example 2: Embed a Tweet button with some customization
<@sharetweet output="button" bkgcolor="#663333" style="font-size: 1.1em;" />
Would render as:
Example 3: Get a link and customize it yourself
<a href="<@sharetweet output="link" />" class="btn btn-primary">Tweet</a> this message to show your Hawkeye pride.
Would render as:
Facebook Share/Like
Embed a link or button that takes pops up a dialog box for the user to Like or Share the message on Facebook. When the user clicks the Share or Like button, they will be taken to Dispatch to view the message and presented with a popup box to do the actual sharing or liking. The link click will be recorded as a share rather than a link click for analytics.
Tag Attributes:
| Attribute | Required | Description |
|---|---|---|
| output | Required | How you want the link to be output. Options are link or button. If you choose link, only the URL will be outputted.
You will need to wrap the URL in the appropriate HTML. If you use button, the button is completely self-contained and you can customize using the following tags. |
| action | Required | You can choose if you want the user to Like or Share your message. Options are "fblike" or "fbshare". The default is "fblike". |
| url | Optional | You can choose to have the user Like/Share either your message or another URL. If you want them to "Like" the University of Iowa instead of your specific message about some upcoming event, you could include the URL "http://www.uiowa.edu". The default is to like/share the message. |
| bkgcolor | Optional | The background color of the button. The default is grey (#999999. |
| color | Optional | The foreground color of the text of the button. The default is white. At this time, this setting does not change the color of the Twitter logo. |
| style | Optional | If you want to add in a custom inline CSS style, you can use this attribute. |
| cssclass | Optional | If you want to add in a custom CSS class, you can use this attribute. Please note that not all email clients respect referencing CSS classes for styling. |
Example 1: Embed a Facebook like button with all the defaults
<@sharefacebook output="button" action="fblike" />
Would render as:
Example 2: Embed a Facebook share button with all the defaults
<@sharefacebook output="button" action="fbshare" />
Would render as:
Example 3: Embed a Facebook like button to like a different URL.
<@sharefacebook output="button" action="fblike" url="http://www.uiowa.edu" />
Would render as:
Example 4: Get a link and customize if yourself.
<a href="<@sharefacebook output="link" action="fblike" />" class="btn btn-primary">Like</a> this message on Facebook to show your Hawkeye pride.
Would render as:
Email Forward
Embed a link or button that directs the user into a Dispatch to fill out a form to forward the message to a friend. They will have the option to provide a message that will accompany the email. The link click will be recorded as a share rather than a link click for analytics.
The user can provide the name and email address of who they want to forward the message to. They can also change who the message is coming from (in case it is a forward of a forward) as well as customize the message that accompanies the email.
Tag Attributes:
| Attribute | Required | Description |
|---|---|---|
| output | Required | How you want the link to be output. Options are link or button. If you choose link, only the URL will be outputted.
You will need to wrap the URL in the appropriate HTML. If you use button, the button is completely self-contained and you can customize using the following tags. |
| bkgcolor | Optional | The background color of the button. The default is grey (#999999. |
| color | Optional | The foreground color of the text of the button. The default is white. At this time, this setting does not change the color of the Twitter logo. |
| style | Optional | If you want to add in a custom inline CSS style, you can use this attribute. |
| cssclass | Optional | If you want to add in a custom CSS class, you can use this attribute. Please note that not all email clients respect referencing CSS classes for styling. |
Example 1: Embed a Forward button with all the defaults
<@shareforward output="button"/>
Would render as:
Example 2: Embed a Forward button with some customization
<@shareforward output="button" bkgcolor="#3333CC" style="font-size: .8em;" />
Would render as:
Example 3: Get a link and customize it yourself
<a href="<@shareforward output="link" />" class="btn btn-primary">Forward</a> this message to a friend.
Would render as:
Hacks for Outlook
If you are using an output of button, then for the buttons to render properly in Outlook, you need to make a couple small adjustment to your template. See this Litmus article for more explanation.
Adjust the html namespace at the top of your template. This tells the renderer for Outlook to use the VML and Office xml namespaces.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
Add an Office directive in the HEAD to tell the Office renderer to scale VML properly for HiDPI devices.
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
</head>