Your Achievements
Level 1
0% to
Level 2
Next /
to gain points, level up, and earn exciting badges like the new Applaud 5 BadgeLearn more!
View All BadgesSign in to view all badges
Open Alert Bar

How to Update Social Media Logos (Twitter & TikTok) in Marketo Email Assets?

rross1CY
Level 2
Level 2
a week ago
a week ago

How to Update Social Media Logos (Twitter & TikTok) in Marketo Email Assets?

Hi everyone,

I'm looking for guidance on updating the social media icons in my Marketo email assets. Specifically, I want to:

  1. Replace the old Twitter logo with the updated one.
  2. Add a TikTok logo with a hyperlink to our TikTok profile.

Does anyone have experience with this? Are there specific steps or best practices for customizing the HTML in Marketo to make these changes? Any tips on sizing, linking, or avoiding rendering issues across email clients would also be appreciated!

Thanks in advance for your help!

Ronnie Ross, M.Ed
0 Likes
139
Reply
4 REPLIES 4
Miray
Level 4 - Champion Level 4 - Champion
Level 4 - Champion
a week ago
a week ago

Re: How to Update Social Media Logos (Twitter & TikTok) in Marketo Email Assets?

Hi @rross1CY Are you using a snippet for the social footer? I highly recommend using a snippet as it makes management and updates much easier. For changing the images, you can grab the social icons from anywhere, resize them as needed, and then add them to the Marketo asset library. Once they're in the library, you can use the images in Marketo emails, snippets, or landing pages.

112
Reply
Disha_Goyal6
Level 5
Level 5
Wednesday
Wednesday

Re: How to Update Social Media Logos (Twitter & TikTok) in Marketo Email Assets?

Hi @rross1CY., please share the HTML and after that we will guide you. Otherwise here is the best practices

1. Update the existing icon with new icon but make sure they are in same size

2. If you are using td structure in icons then you have to add new td otherwise it will be same as that of others.

 

Let me know if you need help with coding.

100
Reply
rross1CY
Level 2
Level 2
yesterday
yesterday

Re: How to Update Social Media Logos (Twitter & TikTok) in Marketo Email Assets?

Hey Disha find the HTML below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" style="width: 100%;" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<meta class="mktoColor" id="emailBackgroundColor" mktoname="Email Background Color" default="#eeeeee" />
<meta class="mktoColor" id="prehead3BackgroundColor" mktoname="Module Background" default="#ffffff" />
<meta class="mktoList" id="freetextbackground" mktoname="Module Background" default="#EF3E33" values="#ef3e33,#00a4b3,#f9a12d,#0b6672,#fed51e,#4f3a6b,#a92020" mktomodulescope="true" />
<meta class="mktoNumber" id="prehead3Spacer" mktoname="Top Spacer" default="15" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="prehead3Spacer2" mktoname="Spacer Below Right Image" default="10" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="prehead3Spacer3" mktoname="Bottom Spacer" default="15" min="1" max="300" units="px" step="1" />
<meta class="mktoColor" id="header3BackgroundColor" mktoname="Module Background" default="#ffffff" />
<meta class="mktoNumber" id="header3Spacer" mktoname="Top Spacer" default="40" min="1" max="300" units="px" step="1" />
<meta class="mktoColor" id="header3ButtonBackgroundColor" mktoname="Right Button Background Color" default="#ef3e33" />
<meta class="mktoColor" id="header3BorderColor" mktoname="Right Button Border Color" default="#ef3e33" />
<meta class="mktoNumber" id="header3BorderSize" mktoname="Right Button Border Width" default="1" min="0" max="20" units="px" step="1" />
<meta class="mktoNumber" id="header3Spacer2" mktoname="Bottom Spacer" default="40" min="1" max="300" units="px" step="1" />
<meta class="mktoString" id="header3LinkText" mktoname="Right Button Text" default="READ MORE" />
<meta class="mktoString" id="header3Link" mktoname="Right Button Link" default="https://www.cityyear.org" />
<meta class="mktoNumber" id="TwoArticlesTopSpacer" mktoname="Top Spacer" default="10" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="twoArticles3Spacer2" mktoname="Spacer Below Left Image" default="30" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="TwoArticlesSpacerBelowImage" mktoname="Spacer Below Images" default="10" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="TwoArticlesSpacerBelowText" mktoname="Spacer Below" default="15" min="0" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="VideoSpacerTop" mktoname="Top Spacer" default="30" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="VideoSpacerBottom" mktoname="Bottom Spacer" default="30" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoColor" id="textimagePostBackgroundColor" mktoname="Module Background" default="#ffffff" />
<meta class="mktoNumber" id="textimagePostSpacer" mktoname="Top Spacer" default="60" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="textimagePostSpacer2" mktoname="Spacer Below Image" default="30" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="textimagePostSpacer3" mktoname="Spacer Below Title" default="30" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="textimagePostSpacer4" mktoname="Spacer Below Text" default="30" min="1" max="300" units="px" step="1" />
<meta class="mktoColor" id="textimagePostButtonBackgroundColor" mktoname="Button Background Color" default="#ef3e33" />
<meta class="mktoColor" id="textimagePostBorderColor" mktoname="Button Border Color" default="#ef3e33" />
<meta class="mktoNumber" id="textimagePostBorderSize" mktoname="Button Border Width" default="3" min="0" max="20" units="px" step="1" />
<meta class="mktoNumber" id="textimagePostSpacer5" mktoname="Bottom Spacer" default="40" min="1" max="300" units="px" step="1" />
<meta class="mktoString" id="textimagePostLinkText" mktoname="Button Text" default="READ MORE" />
<meta class="mktoString" id="textimagePostLink" mktoname="Button Link" default="www.cityyear.org" />
<meta class="mktoNumber" id="FreeImageSpacerTop" mktoname="Top Spacer" default="0" min="0" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="FreeImageSpacerBottom" mktoname="Bottom Spacer" default="15" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="SectionHeaderSpacerTop" mktoname="Top Spacer" default="5" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="SectionHeaderSpacerBottom" mktoname="Bottom Spacer" default="10" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="SubSectionHeaderSpacerTop" mktoname="Top Spacer" default="1" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="SubSectionHeaderSpacerBottom" mktoname="Bottom Spacer" default="1" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="FreeTextSpacerTop" mktoname="Top Spacer" default="10" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="FreeTextSpacerBottom" mktoname="Bottom Spacer" default="10" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoColor" id="SeparatorColor" mktoname="Separator Color" default="#a1a1a1" mktomodulescope="true" />
<meta class="mktoNumber" id="SeparatorSizeHeight" mktoname="Separator Height" default="2" min="0" max="10" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="SeparatorSpacerTop" mktoname="Top Spacer" default="10" min="1" max="30" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="SeparatorSpacerBottom" mktoname="Bottom Spacer" default="10" min="1" max="30" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="threeArticlesSpacer" mktoname="Top Spacer" default="15" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="ThreeArticlesSpacerBelowImages" mktoname="Spacer Below Images" default="15" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="threeArticlesSpacer11" mktoname="Bottom Spacer" default="15" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoColor" id="contacts3BackgroundColor" mktoname="Module Background" default="#ffffff" />
<meta class="mktoNumber" id="contacts3Spacer" mktoname="Top Spacer" default="40" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="contacts3Spacer2" mktoname="Bottom Spacer" default="40" min="1" max="300" units="px" step="1" />
<meta class="mktoString" id="contacts3LinkText" mktoname="Right Link Text" default="" />
<meta class="mktoString" id="contacts3Link" mktoname="Right Link" default="mailto:" />
<meta class="mktoString" id="contacts3LinkText2" mktoname="Right Link Text" default="" />
<meta class="mktoString" id="contacts3Link2" mktoname="Right Link" default="mailto:" />
<meta class="mktoList" id="SectionHeaderColor" mktoname="Section Header Color" default="#ef3e33" values="#ef3e33,#00a4b3,#f9a12d,#0b6672,#fed51e,#4f3a6b,#a92020" mktomodulescope="true" />
<meta class="mktoList" id="linkcolor" mktoname="Link Color" default="#ef3e33" values="#ef3e33,#00a4b3,#f9a12d,#0b6672,#fed51e,#4f3a6b,#a92020" mktomodulescope="true" />
<meta class="mktoNumber" id="CallToActionSpacerTop" mktoname="Spacer Above CTA" default="15" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="CallToActionSpacerBottom" mktoname="Spacer Below CTA" default="15" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoString" id="CallToActionLinkText" mktoname="CTA Text" default="READ MORE" mktomodulescope="true" />
<meta class="mktoString" id="CallToActionLink" mktoname="CTA Link" default="www.cityyear.org" mktomodulescope="true" />
<meta class="mktoList" id="CallToActionBackgroundColor" mktoname="CTA Color" default="#ef3e33" values="#ef3e33,#00a4b3,#f9a12d,#0b6672,#fed51e,#4f3a6b,#a92020" mktomodulescope="true" />
<meta class="mktoNumber" id="BlankSpaceSpacerBottom" mktoname="Spacer Height" default="25" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="ArticleSpacerTop" mktoname="Top Spacer" default="15" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="ArticleSpacerBottom" mktoname="Bottom Spacer" default="15" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="EventSpacerTop" mktoname="Top Spacer" default="15" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="EventSpacerBottom" mktoname="Bottom Spacer" default="15" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoColor" id="footerBackgroundColor" mktoname="Module Background" default="#ffffff" />
<meta class="mktoString" id="SocialLinkWebsite" mktoname="Website Link" default="https://www.cityyear.org/" mktomodulescope="true" />
<meta class="mktoString" id="SocialLinkFacebook" mktoname="Facebook Link" default="https://www.facebook.com/cityyear" mktomodulescope="true" />
<meta class="mktoString" id="SocialLinkInstagram" mktoname="Instagram Link" default="https://www.instagram.com/cityyear/?hl=en" mktomodulescope="true" />
<meta class="mktoString" id="SocialLinkTwitter" mktoname="Twitter Link" default="https://twitter.com/cityyear" mktomodulescope="true" />
<meta class="mktoString" id="unsubLink" mktoname="Unsubscribe Link" default="https://pages.cityyear.org/Change-Email-Preferences.html" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<meta name="robots" content="noindex,nofollow" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>/* Some resets and issue fixes */
#outlook a { padding:0; }
body{ width:100% !important; -webkit-text; size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; }
.ReadMsgBody { width: 100%; }
.ExternalClass {width:100%;}
.backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
table td {border-collapse: collapse;}
.ExternalClass * {line-height: 115%;}
/* End reset */</style>
<style> @media only screen and (max-width: 800px) {table.m_boxing { width: 100% !important } } </style>
<style media="all"> @-ms-viewport { width: device-width; } </style>
<style media="all">
@media only screen and (max-width: 640px) {.m_video .mktoVideo tr:first-child img { width: 100% !important; height: auto !important; max-height: auto !important; min-height: auto !important } body { width: auto !important } table[class="table600"] { width: 450px !important }
table[class="table-inner"] { width: 86% !important } table[class="table1-2"] { width: 47% !important; clear: both } table[class="table1-3"] { width: 29.4% !important } table[class="table1-4"] { width: 100% !important; text-align: left !important } table[class="table2-3"] { width: 64% !important;
text-align: left !important } table[class="table3-3"] { width: 100% !important; text-align: left !important; clear: both } table[class="footer-logo"] { width: 10% !important; text-align: right !important } td[class="outer"] { min-width: 0 !important } td[class="stack"] { padding-bottom: 40px
!important } .stack-tablet { padding-bottom: 20px !important; overflow: visible !important; float: none !important; mso-hide: none !important; display: block !important } img[class="mobile-img"] { width: 100% !important; height: auto !important } td[class="center-tablet"] { text-align: left
!important } td[class="hide-tablet"] { display: none !important } table[class="footer-column"] { width: 47% !important; text-align: left !important } tr[class="stack-tablet"] { padding-bottom: 0px !important; display: block !important } .m_hr .table-inner { width: 100% !important } .respimage {
width: 100% !important; height: auto } .m_prehead .cta table { float: none; padding-top: 0; padding-right: auto; padding-bottom: 0; padding-left: auto } .m_prehead2 .menu { text-align: left !important } .m_prehead2 tr[class="stack-tablet"] { padding-bottom: 0 !important; display: block !important }
.m_prehead3 .head { text-align: left !important } .m_prehead3 tr[class="stack-tablet"] { padding-bottom: 0 !important; display: block !important } .m_header td.center-tablet, .m_header2 td.center-tablet, .m_header3 td.center-tablet { text-align: left !important } .m_header td a, .m_header2 td
a, .m_header3 td a { padding-top: 0px !important } .m_header .cta table, .m_header2 .cta table, .m_header3 .cta table { float: none !important; padding-top: 0 !important; padding-right: auto !important; padding-bottom: 0 !important; padding-left: auto !important } .m_header .social, .m_header2 .social,
.m_header3 .social { text-align: left !important } .m_photo-l .table1-3, .m_photo-r .table1-3, .m_photo-l2 .table1-3, .m_photo-r2 .table1-3 { width: 100% !important } .m_photo-l .table2-3, .m_photo-r .table2-3, .m_photo-l2 .table2-3, .m_photo-r2 .table2-3 { width: 100% !important } .m_photo-l
.table2-3 .legenda, .m_photo-r .table2-3 .legenda, .m_photo-l2 .table2-3 .legenda, .m_photo-r2 .table2-3 .legenda { display: none } .m_photo-l .table2-3 .hide-tablet, .m_photo-r .table2-3 .hide-tablet, .m_photo-l2 .table2-3 .hide-tablet, .m_photo-r2 .table2-3 .hide-tablet { display: none }
.m_photo-l .image-title, .m_photo-r .image-title, .m_photo-l2 .image-title, .m_photo-r2 .image-title { text-align: left !important } .m_two-articles .table1-2, .m_two-articles2 .table1-2, .m_two-articles3 .table1-2 { width: 100% !important } .m_two-articles img, .m_two-articles2 img,
.m_two-articles3 img { width: 100% !important; height: auto } .m_two-articles .stack-tablet, .m_two-articles2 .stack-tablet, .m_two-articles3 .stack-tablet { height: 15px } .m_contacts .table1-2 { width: 100% !important } .m_contacts .table1-2 .contents { width: 100% !important } .m_contacts
.table1-2 .contents td { text-align: left !important } .m_contacts img { width: 100% !important } .m_contacts2 .col, .m_contacts3 .col { border-top-style: none !important; border-right-style: none !important; border-bottom-style: none !important; border-left-style: none !important; padding-left:
0 !important } .m_contacts2 .table1-3, .m_contacts3 .table1-3 { width: 100% !important } .m_contacts2 .table1-3 .contents, .m_contacts3 .table1-3 .contents { width: 100% !important } .m_contacts2 .table1-3 .contents td, .m_contacts3 .table1-3 .contents td { text-align: left !important }
.m_social2 .table3-3 { width: 100% !important } .m_social2 .social { text-align: left !important } .m_team .spacer, .m_three-articles .spacer { width: 28px !important } .m_footer .text, .m_footer .unsub { text-align: center !important;
} } @media only screen and (max-width: 479px) {body { width: auto !important } table[class="table600"] { width: 305px !important
} table[class="table-inner"] { width: 80% !important; float: none !important } table[class="table1-2"] { width: 100% !important; clear: both } table[class="table1-3"] { width: 100% !important; clear: both } table[class="table1-4"] { width: 100% !important; text-align: left !important }
table[class="table2-3"] { width: 100% !important; text-align: left !important } table[class="table3-3"] { width: 100% !important; text-align: left !important; clear: both } table[class="footer-logo"] { width: 60% !important; text-align: left !important } td[class="outer"] { min-width: 0
!important } td[class="td3-1"] { width: 60% !important; text-align: left !important } .stack-smartphone { padding-bottom: 10px !important; overflow: visible !important; float: none !important; display: block !important; mso-hide: none !important } td[class="center-smartphone"] { text-align:
center !important } img[class="mobile-img"] { width: 100% !important } td[class="center-tablet"] { text-align: left !important } td[class="hide-smartphone"] { display: none !important } table[class="footer-column"] { width: 100% !important; text-align: left !important } .respimage { width:
305px !important; height: auto } .m_hr .table-inner { width: 100% !important } }
</style>
</head>
<body style="margin-bottom: 0;-webkit-text-size-adjust: 100%;padding-bottom: 0;min-width: 100%;margin-top: 0;margin-right: 0;-ms-text-size-adjust: 100%;margin-left: 0;padding-top: 0;padding-right: 0;padding-left: 0;width: 100%;-webkit-text: ;size-adjust: 100%;margin: 0;padding: 0;">
<!-- Marketo Variable Definitions -->
<!-- Other Meta Tags -->
<!--[if mso]>
<style type='text/css'>
.primary-font {
font-family: Arial, serif !important;
}
</style>
<![endif]-->
<!--[if mso]>
<style type='text/css'>
.secondary-font {
font-family: Arial, sans-serif !important;
}
</style>
<![endif]-->
<div style="display:none; white-space:nowrap; font:15px arial; line-height:0;">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</div>
<!-- Outer table START -->
<table width="100%" cellpadding="0" cellspacing="0" style="min-width:100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;">
<tbody>
<tr>
<td class="outer" valign="top" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; min-width: 600px; border-collapse: collapse; background-color: ${emailBackgroundColor};">
<table width="650" align="center" id="boxing" border="0" cellpadding="0" cellspacing="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" class="m_boxing">
<tbody>
<tr>
<td class="mktoContainer boxedbackground" id="template-wrapper" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse; padding-top:30px;">
<table id="free-image" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; background-color:#ffffff;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="mktoModule m_free-image" mktoname="Free Image">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse; background-color:#eeeeee;" valign="top">
<table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right:auto; margin-bottom: 0; margin-left:auto; background-color:white;" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${FreeImageSpacerTop};font-size:${FreeImageSpacerTop};" height="${FreeImageSpacerTop}">&nbsp;</td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<center>
<div style="display:inline-block" class="mktoImg respimage" mktoname="Photo" id="photo4" mktolockimgsize="true">
<a><img class="respimage" src="https://pages.cityyear.org/rs/458-ZZA-943/images/MarketoHeaders_FY20_Strength.jpg" style="-ms-interpolation-mode: bicubic; outline: none; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; text-decoration: none; border-top-width: 0; width: auto; height: auto; max-width: 100%; display: block; line-height: 100%;" height="auto" width="600" /></a>
</div>
</center> </td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${FreeImageSpacerBottom};font-size:${FreeImageSpacerBottom};" height="${FreeImageSpacerBottom}">&nbsp;</td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table id="free-text" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; background-color:#ffffff;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="mktoModule m_free-text" mktoname="Free Text">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:#eeeeee;" valign="top">
<center>
<table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; background-color:#ffffff;" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${FreeTextSpacerTop};font-size:${FreeTextSpacerTop};" height="${FreeTextSpacerTop}">&nbsp;</td>
</tr>
<tr>
<td class="secondary-font text" style="-webkit-hyphens:none; -webkit-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; word-break:break-word; -ms-text-size-adjust:100%; -moz-hyphens:none; hyphens:none; font-family:Helvetica, Arial, sans-serif; font-size:16px; line-height:128%; color:#000000; border-collapse:collapse; padding-left:30px; padding-right:30px;">
<div class="mktoText" mktoname="Text" id="text4">
<p>Hi {{lead.First Name:default=edit me}}, <br /><br />Ready to take your interest in City Year to the next level? We're excited to invite you to our upcoming monthly info session tailored for individuals exploring City Year as part of their career journey.<br /><br />Here's what's in store:<br /></p>
<ul>
<li><strong>Explore</strong> the unique opportunities available within City Year and how they align with your goals.</li>
<li><strong>Hear</strong> personal stories and experiences from current AmeriCorps members and/or Alums, giving you a firsthand look at life in the field.</li>
<li><strong>Learn</strong> about the resources and support systems in place to help you thrive in your service.</li>
</ul>
<p>Whether you're nearing the application process or already envisioning yourself as part of our dedicated team, this session is designed to empower you with the knowledge and inspiration you need to make an informed decision.<br /><br />Don't miss out on this chance to deepen your connection with City Year and discover where your passion for service can take you. <br /><br />We can't wait to see you there!<br /><br />{{lead.Lead Owner First Name:default=edit me}} {{lead.Lead Owner Last Name:default=edit me}}<br /></p>
</div> </td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${FreeTextSpacerBottom};font-size:${FreeTextSpacerBottom};" height="${FreeTextSpacerBottom}">&nbsp;</td>
</tr>
</tbody>
</table>
</center> </td>
</tr>
</tbody>
</table>
<table id="callToAction" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; background-color:#ffffff;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="mktoModule m_callToAction" mktoname="Call To Action">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: Helvetica, Arial, sans-serif;border-collapse: collapse; background-color:#eeeeee;" valign="top">
<table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; background-color:#ffffff;" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: helvetica, Arial, sans-serif;border-collapse: collapse;line-height:${CallToActionSpacerTop};font-size:${CallToActionSpacerTop};" height="${CallToActionSpacerTop}">&nbsp;</td>
</tr>
<tr>
<td class="cta" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; font-family: Helvetica, Arial, sans-serif; border-collapse: collapse;">
<center>
<table style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100: none; -moz-hyphens: none; hyphens: none; font-family: Helvetica, Arial, sans-serif; border-collapse: collapse;" align="center" bgcolor="${CallToActionBackgroundColor}"> <a href="${CallToActionLink}" target="_blank" class="primary-font button" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;display:
inline-block;font-size: 14px;font-family:Helvetica, Arial, sans-serif;color: #ffffff;padding-top: 10px;padding-right: 20px;padding-bottom:10px; padding-left:20px;background-color:${CallToActionBackgroundColor};text-decoration: none; text-transform:uppercase; letter-spacing:1px; font-weight:bold;">${CallToActionLinkText}</a> </td>
</tr>
</tbody>
</table>
</center> </td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: Helvetica, Arial, sans-serif;border-collapse: collapse;line-height:${CallToActionSpacerBottom};font-size:${CallToActionSpacerBottom};" height="${CallToActionSpacerBottom}">&nbsp;</td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table id="blankSpace2d6c13d47-747e-4cc7-a5f1-a6463662bcfb" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="mktoModule m_blankSpace" mktoname="Blank Spacer">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: Helvetica, Arial, sans-serif;border-collapse: collapse;background-color:#eeeeee;" valign="top">
<table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom:0; margin-left:auto; background-color:#ffffff;" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: Helvetica, Arial, sans-serif;border-collapse: collapse;line-height:${BlankSpaceSpacerBottom};font-size:${BlankSpaceSpacerBottom};" height="${BlankSpaceSpacerBottom}">&nbsp;</td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="mktoModule m_footer" id="footer" mktoname="Footer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" width="100%">
<tbody>
<tr>
<td bgcolor="#ededed;" class="background" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;background-color: #ededed;border-top-width: 0px;border-style: none;border-collapse: collapse;" valign="top">
<!-- start wrapper -->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" width="600">
<tbody>
<tr>
<td class="padding-y" style="-webkit-hyphens: none; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -ms-text-size-adjust: 100%; -moz-hyphens: none; hyphens: none; padding-top: 35px; padding-bottom: 40px; border-collapse: collapse;">
<!-- NSP start -->
<table border="0" cellpadding="0" cellspacing="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" width="100%">
<tbody>
<tr>
<td class="secondary-font text" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;color: #333333;font-size: 11px;font-family:Helvetica, Arial, sans-serif;text-align: left;border-collapse: collapse;"> <span class="secondary-font" style="display:inline;font-family:Helvetica, Arial, sans-serif;"></span>
<div class="mktoText" id="NSPblock" mktoname="NSP" style="display:inline-block;">
<span class="secondary-font" style="display:inline;font-family:Helvetica, Arial, sans-serif;"></span>
<p style="margin-top: 0px; margin-bottom: 25px;"><span class="secondary-font" style="display:inline;font-family:Helvetica, Arial, sans-serif;"><img alt="National Strategic Partners" border="none" constrain="true" height="auto" imagepreview="false" src="https://pages.cityyear.org/rs/458-ZZA-943/images/NLShrzntlLft_black_AmeriCorps20th-bain.png" width="100%" /></span> </p>
</div> </td>
</tr>
</tbody>
</table>
<!-- NSP end -->
<!-- line start -->
<table border="0" cellpadding="0" cellspacing="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" width="100%">
<tbody>
<tr>
<td class="secondary-font text" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none; color:#333333; font-size:11px;font-family:Helvetica, Arial, sans-serif;text-align: left; border-collapse: collapse; border-top:solid; border-width:1px; padding-bottom:20px;
line-height:1px; font-size:1px;" height="1">
<div style="display:inline-block;">
</div> </td>
</tr>
</tbody>
</table>
<!-- line end -->
<!-- start left side module: 350px -->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="table1-2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" width="350">
<tbody>
<tr>
<td class="secondary-font text" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace:0pt; word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;color: #333333;font-size:11px; line-height:13px; font-family:Helvetica, Arial, sans-serif;text-align: left;border-collapse: collapse;">
<div class="mktoText" id="footerText" mktoname="Footer – Legal" style="margin-bottom:10px;padding-bottom:3px">
<p style="margin:0px;">City Year, Inc. © $date.get('yyyy') <br /> 287 Columbus Ave., Boston, MA 02116</p>
</div> </td>
</tr>
</tbody>
</table>
<!-- end left side module start: 350px -->
<!-- start right side module: 230px -->
<table align="right" border="0" cellpadding="0" cellspacing="0" class="table1-2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" width="230">
<tbody>
<tr>
<td class="secondary-font text" style="-moz-hyphens: none; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -ms-text-size-adjust: 100%; hyphens: none; color: #333333; font-size: 11px; font-family: Helvetica, Arial, sans-serif; text-align: right; border-collapse: collapse; padding-bottom:10px;">
<div id="footerText3" style="display:inline-block">
<p style="margin-top:0px; margin-bottom:10px;"> <a class="secondary-font" href="${SocialLinkWebsite}" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none; color: #000000; font-family: Helvetica, Arial, sans-serif; padding-right:0px;" target="_blank" title="City Year Website"> <img alt="Website" constrain="true" width="27" height="21" imagepreview="false" src="https://pages.cityyear.org/rs/458-ZZA-943/images/footer_icon_website_fy20.png" /></a> <a class="secondary-font" href="${SocialLinkFacebook}" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none; color: #000000; font-family: Helvetica, Arial, sans-serif; padding-right:0px;" target="_blank" title="Facebook"> <img alt="Facebook" constrain="true" width="30" height="21" imagepreview="false" src="https://pages.cityyear.org/rs/458-ZZA-943/images/footer_icon_facebook_fy20.png" /></a> <a class="secondary-font" href="${SocialLinkInstagram}" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none; color: #000000; font-family: Helvetica, Arial, sans-serif; padding-right:0px;" target="_blank" title="Instagram"> <img alt="Instagram" constrain="true" width="29" height="21" imagepreview="false" src="https://pages.cityyear.org/rs/458-ZZA-943/images/footer_icon_instagram_fy20.png" /></a> <a class="secondary-font" href="${SocialLinkTwitter}" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none; color: #000000; font-family: Helvetica, Arial, sans-serif; padding-right:0px;" target="_blank" title="Twitter"> <img alt="Twitter" constrain="true" width="29" height="21" imagepreview="false" src="https://pages.cityyear.org/rs/458-ZZA-943/images/footer_icon_twitter_fy19.png" /></a> <br /> </p>
</div> </td>
</tr>
</tbody>
</table>
<!-- end right side module: 230px -->
<!-- line start -->
<table border="0" cellpadding="0" cellspacing="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" width="100%">
<tbody>
<tr>
<td class="secondary-font text" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;color: #333333;font-size: 11px;font-family:Helvetica, Arial, sans-serif;text-align: left; border-collapse: collapse; border-top:solid; border-width:1px; padding-bottom:15px;">
<div style="display:inline-block;">
</div> </td>
</tr>
</tbody>
</table>
<!-- line end -->
<!-- start whole width text -->
<table width="100%" cellpadding="0" cellspacing="0" style="min-width:100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;">
<tbody>
<tr>
<td class="unsub" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;color: #333333;font-size: 11px;font-family:Helvetica, Arial, sans-serif;text-align: left;border-collapse: collapse;"> <span class="secondary-font" style="display:inline;font-family:Helvetica,
Arial, sans-serif;"></span>
<div id="footerText2" style="display:inline-block;">
<span class="secondary-font" style="display:inline;font-family:Helvetica, Arial, sans-serif;">To stop receiving these emails, you can</span>
</div> <span class="secondary-font" style="display:inline;font-family:Helvetica, Arial, sans-serif;"></span> <a class="secondary-font" href="${unsubLink}" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;text-decoration: none; color:#333333; font-family:Helvetica, Arial, sans-serif; text-decoration:underline;">manage your email preferences</a>. </td>
</tr>
</tbody>
</table>
<!-- end whole width text --> </td>
</tr>
</tbody>
</table>
<!-- end wrapper --> </td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<!-- Outer Table END -->
</body>
</html>

Ronnie Ross, M.Ed
0 Likes
23
Reply
michellechopin
Level 7 - Community Advisor Level 7 - Community Advisor
Level 7 - Community Advisor
Thursday
Thursday

Re: How to Update Social Media Logos (Twitter & TikTok) in Marketo Email Assets?

In addition to the guidance provided by others, once you make the change to either your snippet or template, you have to do one of two things (depending on what you change):

 

  • Snippet: You will have to go through the emails that need to have the updated snippet and replace the prior/old module in your emails with the new version
    • This is how ours have to be done - not sure if that's standard or a template setup
  • Template: You have to re-approve all emails that you want to use that template
    • When we have updates for these, we will only update current emails and leave older/previously sent ones either in draft format or we discard the draft so future humans can see what things looked like/how they changed

One final note, if you've migrated your Marketo instance to IMS*, you will have a new email editor shortly (I believe the last update said it's being launched next week) - snippets will only work in the old editor/format; they're called "fragments" in the new editor and are only applicable to the new editor. So, if you're eligible for the new editor, you might want to hold off making any changes/edits until that's in place so you only have to do them once 😊

 

*If you haven't migrated to IMS yet and you want to know more/have questions, RSVP to the AMA session on Feb 11 and Community leaders will be ready to guide you through all that you need to know.

89
Reply
Home