002: How to Add Social Media Links to Your Convertkit Email Template

ConvertKit's unique selling proposition is that their emails are simple, to the point and focus on the message. This style of clean emails also makes ConvertKit the email marketing platform of choice for many successful entrepreneurs as it is more likely to make it into your subscribers' inboxes rather than ending up in the spam folder. (Emails with lots of design and images are more likely to be looked upon as spam).

Having said that, you may still want to add a bit of design, especially when it comes to adding quick links to your social media presence. So how do you do that? Well, follow these quick steps to create those quick links! It involves a bit of code but if you can copy and paste, you can do this! :-)

Adding Social Media Links into your ConvertKit Emails

So here are all the steps in summary:

1. Create a custom template
2. Copy and paste the basic code for styling text.
3. Copy and paste the social media code into your custom template.
4. Paste the code from Step 3 right above the unsubscribe link code.
5. Add the closing bit of code for the unsubscribe link code.
6 Add your specific social media urls.
7. Hit Preview and Voila, you are done!

Watch the Video Tutorial

 

 

Watch the video tutorial here or go below to follow the step by step description.


Step 1: Create A Custom Template

You go into your Account. Click Email Template. Then click the blue button on the upper right hand that says, "New Email Template".

Step 2: Copy and Paste the Basic Code for Text Styling

This piece of code instructs Convertkit on the look of your email as in font size, margin width and so on. You cannot save a custom template without this piece of code. So this is muy importante!

Grab the code from your within the "Text Only Template" of Convertkit. I have already done this for you here, so just copy the following code.

<style>
  .message-content { max-width: 600px; }
  .message-content div { padding-bottom: 10px; }
  .message-content img { max-width: 100%; height: auto; }
  p {
    margin-bottom: 1em;
  }
</style>
<div class='message-content'>
  {{ message_content }}
  <br>
  <br>
  <small>
    {{ unsubscribe_link }} | {{ address }}
    <br>
  </small>
</div>

Step 3. Copy and paste the following social media code into your custom template.

Copy the following piece of code. In Step 4, I will show you exactly where to paste it.

<div class="social-links"> 

<a href="http://www.facebook.com/"> <img src="http://convertkit.com/images/social-icons/facebook.png" alt="Facebook" width="48" style="text-decoration: none; width: 48px;"></a> 

<a href="https://twitter.com/"> <img src="http://convertkit.com/images/social-icons/twitter.png" alt="Twitter" width="48" style="text-decoration: none; width: 48px;"></a>

<a href="https://instagram.com/"> <img src="http://convertkit.com/images/social-icons/instagram.png" alt="Instagram" width="48" style="text-decoration: none; width: 48px;"></a>

<a href="https://www.pinterest.com/"> <img src="http://convertkit.com/images/social-icons/pinterest.png" alt="Pinterest" width="48" style="text-decoration: none; width: 48px;"></a>

<a href="https://plus.google.com/"> <img src="http://convertkit.com/images/social-icons/google-plus.png" alt="Google Plus" width="48" style="text-decoration: none; width: 48px;"></a>

<a href="http://youtube.com"> <img src="http://convertkit.com/images/social-icons/youtube_alt.png" alt="YouTube" width="48" style="text-decoration: none; width: 48px;"></a>

<a href="http://convertkit.com"> <img src="http://convertkit.com/images/social-icons/website.png" alt="Website" width="48" style="text-decoration: none; width: 48px;"> </a>

</div>

Step 4. Paste the code from Step 3 right above the unsubscribe link code.

So you see the code in Step 2, right? Well, the final section is all about the unsubscribe link that is mandatory in all emails so that subscribers have a chance to unsubscribe if they like.

Right above that bit of code is where you would paste the social media link code that you see in Step 3. (Watch the video for more clarity).

So that's right above this bit:

<small>
    {{ unsubscribe_link }} | {{ address }}
    <br>
  </small>

Step 5. Add the closing bit of code

Now you must add this bit before and after the unsubscribe code.

Before:

<div>

After:

</div>

So this is how it should look like in the end:

<div>
 <small>
    {{ unsubscribe_link }} | {{ address }}
    <br>
  </small>
</div>

 

Step 6: Add your specific social media url

You now must grab all your social media urls and place them in their respective spots.

So let's take an example. My social media link for facebook is: https://www.facebook.com/EmailMarketingSpecialistSophia/

Where I see the facebook url, I shall now add my specific url.

So instead of this:

<a href="http://www.facebook.com/"> <img src="http://convertkit.com/images/social-icons/facebook.png" alt="Facebook" width="48" style="text-decoration: none; width: 48px;"></a> 

It should say: 

<a href="https://www.facebook.com/EmailMarketingSpecialistSophia/"> <img src="http://convertkit.com/images/social-icons/facebook.png" alt="Facebook" width="48" style="text-decoration: none; width: 48px;"></a> 

Basically, I am adding my Facebook link between the quotes right after <a href=

Go on and do this for all your social media links. Remove any platforms you are not using or don't want to add.

 

Step 7. Hit Preview and Voila, you are done!

That's it. You are done.
 

Let me know in the comments if this was useful and if you need anything else to get your social media links implanted within ConvertKit.

Let's make it happen!

Sophia with love

Sophia Ojha

Web Design Services + ConvertKit Services + Biz Coaching for Web Designers + Weekly Blog & Video Tutorials

I (Sophia Ojha) am web designer and coach to web designers based in the Blue Ridge Mountains of North Carolina. I love to design websites for my clients via my Website-In-A-Day package or my Website-In-Two-Weeks package. I publish a weekly free newsletter called the Abundant Creative which includes blog articles and video tutorials on using Squarespace, ConvertKit and other online tools for online businesses. Also, I love teaching these platforms one-to-one to clients who can hire me for an hour for a quick crash-course on Squarespace or ConvertKit. I am also the founder of Millionaire Web Designer, a 12-month group coaching program that helps web designers build a successful and spacious web design business.

To ask me about any of these, drop me a line via: Contact page.
Receive invites to events and new content: Abundant Creative Newsletter
Find a web designer for your next project: Millionaire Web Designer Directory

www.millionairewebdesigner.com | www.sophiaojha.com

Previous
Previous

003: How to change colors of your links in your emails on ConvertKit?

Next
Next

001: What Are Link Triggers in ConvertKit?