Ti trovi qui:
Condivisione di slot di contenuti social in un'email Incolla HTML
Se si crea un messaggio in Email Studio incollando il codice HTML in un'email è possibile avere un notevole controllo su come sarà visualizzata l'email agli abbonati. Questo stesso controllo rende la condivisione di slot di contenuti social tramite codice HTML incollato uno strumento efficace per pubblicare contenuti sui social network. È possibile creare e posizionare slot di contenuti social condivisi e icone con estrema precisione utilizzando le indicazioni fornite di seguito. Inoltre, è possibile creare facilmente più slot di contenuti social condivisi in un solo documento. Se il flusso di lavoro normale prevede l'uso di HTML incollato per creare le email, l'aggiunta di markup Social Forward dovrebbe integrarsi facilmente nel processo.
Con il procedimento descritto di seguito si utilizza un'email Incolla HTML in Email Studio e si identificano le sezioni dell'email da condividere. L'esempio condivide uno slot di contenuti social con Facebook, ma si può scegliere tra vari social network quando si condividono contenuti mediante Social Forward.
Condivisione di un'area di contenuti con l'icona Facebook standard
I tag commento HTML racchiudono le informazioni da condividere nello slot di contenuti social. Il tag seguente segna l'inizio dello slot di contenuti social e gli assegna un nome.
<!-- RegionStart[
socialslot:"FacebookStandardIcon", title:"Facebook Standard Icon", description:"Share to
Facebook with Standard Icon", csskey:"CSS file"] -->
Il parametro csskey consente di associare un file CSS all'area di contenuto social e controlla lo stile del contenuto condiviso.
Il tag seguente segna la fine dello slot di contenuti social con lo stesso nome indicato nel tag di inizio.
<!-- RegionEnd[
socialslot:"FacebookStandardIcon"] -->
Tra questi due tag di commento viene visualizzato il contenuto condiviso, compresi il testo e l'immagine.
Lo slot di contenuto social condiviso include un collegamento ipertestuale sotto forma di immagine che punta al contenuto condiviso.
Questo codice crea il pulsante su cui gli utenti possono fare clic per condividere lo slot di contenuto condiviso:
<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>
È possibile utilizzare AMPscript per specificare l'URL di destinazione nell'attributo href del tag del collegamento:
%%=GetSocialPublishURLByName('Facebook','US','FacebookStandardIcon')=%%
È possibile modificare la funzione AMPScript per condividere slot diversi a seconda del social network semplicemente modificando gli argomenti passati. Il primo argomento passato a GetSocialPublishURLByName indica il social network con cui Social Forward condividerà i contenuti. Utilizzare il nome dell'area per la condivisione nel secondo argomento. In questo caso, viene condivisa la regione FacebookPasteStandardIcon.
L'immagine all'interno dei tag di collegamento condivide la regione, come indicato nel codice riportato sotto:
<img src="http://image.preview.exacttarget.com/lib/ffcf14/m/1/social_default_facebook_icon.jpg" border="0" alt="Facebook" title="Facebook">Il tag source specifica l'immagine predefinita utilizzata per Facebook.
Il blocco di codice finale utilizzato da Social Forward per condividere uno slot di contenuto social ha l'aspetto seguente:
<!-- 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"] -->Condivisione di un'area di contenuti con l'icona Facebook personalizzata
La condivisione dello slot icona personalizzata di Facebook mediante un'icona personalizzata è molto simile all'utilizzo dell'icona standard, con alcune differenze:
- I commenti HTML che definiscono la regione da condividere hanno come titolo FacebookPasteCustomIcon.
- La funzione AMPScript all'interno del collegamento di condivisione fa riferimento all'area FacebookPasteCustomIcon.
- L'immagine contenuta nei tag HTML del collegamento specifica un'origine icona personalizzata nel portafoglio.
Questo codice condivide la regione icona personalizzata:
<!-- 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"] -->
questo esempio mostra l'HTML del messaggio 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>