Você está aqui:
Compartilhamento de slots de conteúdo social em um email Colar HTML
Criar um email no Email Studio colando código HTML em um email permite ter um bom controle sobre a aparência do email para seus assinantes. Esse mesmo controle torna o compartilhamento de slots de conteúdo social por meio de HTML colado uma ferramenta eficaz para obter seu conteúdo para redes sociais. Você pode criar e colocar seus ícones e slots de conteúdo social compartilhados com muita precisão usando as instruções fornecidas abaixo. Você também pode facilmente criar vários slots de conteúdo social compartilhado em um documento. Se seu fluxo de trabalho normal tiver sido incluído usando HTML colado para criar seus emails, a adição da marcação Encaminhamento social deverá se integrar facilmente ao seu processo.
Essa referência usa um email HTML de colagem no Email Studio e identifica as seções do email a ser compartilhado. O exemplo compartilha um slot de conteúdo social com o Facebook, mas você pode escolher entre várias redes sociais diferentes ao compartilhar conteúdo usando o Encaminhamento social.
Compartilhamento de área de conteúdo do ícone do Facebook padrão
As marcações de comentário em HTML circulam as informações a serem compartilhadas no slot do conteúdo social. A marca abaixo inicia o slot de conteúdo social e atribui a ela um nome.
<!-- RegionStart[
socialslot:"FacebookStandardIcon", title:"Facebook Standard Icon", description:"Share to
Facebook with Standard Icon", csskey:"CSS file"] -->
O parâmetro csskey permite que um arquivo CSS seja associado à área de conteúdo social e controla o estilo do conteúdo compartilhado.
A marca abaixo encerra o slot de conteúdo social com o mesmo nome listado na marca inicial.
<!-- RegionEnd[
socialslot:"FacebookStandardIcon"] -->
O conteúdo compartilhado em si, incluindo o texto e a imagem, aparece entre as duas marcas de comentário.
O slot de conteúdo social compartilhado inclui uma imagem com hiperlink que leva ao conteúdo compartilhado.
Esse código cria o botão em que os usuários podem clicar para compartilhar o slot de conteúdo compartilhado:
<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>
Você pode usar o AMPscript para especificar o URL de destino no atributo href da marca do link:
%%=GetSocialPublishURLByName('Facebook','US','FacebookStandardIcon')=%%
Você pode alterar a função AMPScript para compartilhar slots diferentes para diferentes redes sociais simplesmente alterando os argumentos passados. O primeiro argumento passado para GetSocialPublishURLByName indica a rede social com a qual o encaminhamento social compartilhará o conteúdo. Use o nome da região para compartilhar no segundo argumento. Neste caso, você está compartilhando a região FacebookPasteStandardIcon.
A imagem dentro das marcações do link compartilha a região, como mostra o código abaixo:
<img src="http://image.preview.exacttarget.com/lib/ffcf14/m/1/social_default_facebook_icon.jpg" border="0" alt="Facebook" title="Facebook">A marca de origem especifica a imagem padrão usada para o Facebook.
O bloco de código final usado pelo Encaminhamento social para compartilhar um slot de conteúdo social é semelhante a este exemplo:
<!-- 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"] -->Compartilhamento de área de conteúdo do ícone do Facebook personalizado
Compartilhar o slot do ícone do Facebook personalizado usando um ícone personalizado é muito semelhante ao uso do ícone padrão, mas com algumas diferenças:
- Os comentários de HTML definindo a região a ser compartilhada têm o título FacebookPasteCustomIcon.
- A função AMPScript no link de compartilhamento faz referência à área FacebookPasteCustomIcon.
- A imagem contida nas marcações de link HTML especifica a origem do ícone personalizado no Portfólio.
Esse código compartilha a região do ícone personalizado:
<!-- 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"] -->
Este exemplo mostra o HTML para o 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>