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