CODEWITHSUNDEEP
htmlmailchimpshare-button
mdcrtv
mdcrtv

Reputation: 143

Custom social share icons in Mailchimp campaign

I'm in the process of creating a custom mailchimp template, but I've hit a snag with some social media buttons.

*|TWITTER:TWEET|* *|FACEBOOK:LIKE|*

outputs this:

enter image description here

What I need is this:

enter image description here

Since this is a custom template, I can't drag and drop prefab icons into the design. Here are some of the alternate methods I've tried:

<a href="http://www.facebook.com/sharer.php?s=100&p[url]=*|ARCHIVE|*&p[title]=*|MC:SUBJECT|*"><img src="~fb_icon~"></a>

<a href="http://twitter.com/share?url=*|ARCHIVE|*&text=*|MC:SUBJECT|*"><img src="~tw_icon~"></a>

When sent, the url is stripped from the image or returns nothing between the quotes.

If any mailchimp experts can offer some insight, I'd appreciate it.

Upvotes: 2

Views: 10308

Answers (2)

rwgd
rwgd

Reputation: 11

This worked for me

<!--my sharer-->
<p>
<table width="300" border="0" cellspacing="0" cellpadding="0" align="center">
  <tbody>
    <tr>
      <td width="35" align="left" valign="middle"><a href="*|RSSITEM:TWITTER_TEXT|*" style="font-size:14px; text-decoration:none;"><img height="30" src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-twitter-96.png" width="30" /></a></td>
      <td width="58" align="left" valign="middle"><a href="*|RSSITEM:TWITTER_TEXT|*" style="font-size:15px; font-weight:bold; color: #35ABCD; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;  text-decoration:none;">&nbsp;Tweet</a></td>
      <td width="35" align="left" valign="middle">
<a href="http://www.facebook.com/sharer/sharer.php?u=*|FEEDITEM:URL|*"><img src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-facebook-96.png" width="30" height="30" /></a>      
      </td>
      <td width="80" align="left" valign="middle"><a href="http://www.facebook.com/sharer/sharer.php?u=*|FEEDITEM:URL|*" style="font-size:14px; text-decoration:none; font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:bold; color: #527BBE;">&nbsp;Facebook</a></td>
      <td width="35" align="left" valign="middle"><a href="https://www.linkedin.com/shareArticle?mini=true&amp;url=*|FEEDITEM:URL|*&amp;summary=*|FEEDITEM:CONTENT_TEXT|*&amp;source=GWM"><img height="30" src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-linkedin-96.png" width="30" /></a></td>
      <td width="65" align="left" valign="middle"><a href="https://www.linkedin.com/shareArticle?mini=true&amp;url=*|FEEDITEM:URL|*&amp;summary=*|FEEDITEM:CONTENT_TEXT|*&amp;source=GWM" style="font-size:14px; text-decoration:none; font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:bold; color:#206886;">&nbsp;Linkedin</a></td>
    </tr>
  </tbody>
</table>
</p>
<!--ends my sharer-->

Upvotes: 1

Simone Ferraro
Simone Ferraro

Reputation: 21

I think you should consider using content encoding merge tags, such as |HTML:YOUR_MERGETAG|

Here a useful link

http://dev201.nl/mailchimp-merge-tags-cheatsheet/

Upvotes: 2

Related Questions