How to Create a Twitter Follow Optin using Canvas

Canvas allows you to create fully customized optins, in this documentation we’ll create a Twitter follow optin using Canvas.

REQUIREMENTS: This guide makes use of OptinMonster’s Canvas Technology which requires a Pro subscription.

Twitter provides you with the embed code needed to add a follow button, and you can further customize your optin by adding a background image and re-styling the close link.

Create a customized twitter follow optin using OptinMonster's Canvas Technology.

  1. Generate the Twitter Follow Button
  2. Paste the Twitter Embed Code
  3. Style the Optin with Custom CSS
  4. Adjust the Canvas Dimensions
  5. FAQs
IMPORTANT: This guide assumes you’re already familiar with our Custom CSS tool.

Step 1 – Generate the Twitter Follow Button

The first step is to grab the Twitter follow button code.

You can use the Twitter Follow Button Generator, for this example I’ve created a large button that shows my username.

Twitter provides a generator for creating your Follow button quickly.

Step 2 – Paste Your Twitter Follow Button Code

Navigate to the optin builder, select the Optin tab to view the Optin panel and here you can paste the Twitter Follow Button code into the Canvas Custom HTML field. Your Follow Button will then appear in your optin something like the image below.

Twitter Custom Canvas HTML

Step 3 – Style the Optin with Custom CSS

The first step of our custom CSS is adding a background image. I created my background image by selecting the Follow Button now showing in the optin builder’s preview. This opened a new window with a summary of my Twitter profile.

You can use the Twitter Summary of your profile to display as a background image for your optin.

Next, I took a screenshot of the summary and used my favorite image editing program to remove the “Edit Profile” button and crop the image to show only what I to want display.

You can also resize the image now to optimize it for the web. The background image I’ve created here is 560 pixels wide.

You can edit the screenshot of your Twitter profile summary using an image editing program.

Once you have the image ready, upload it to your web server so you can use it in the CSS style.

The other changes we’ll make with the following CSS are to reposition the Follow button so it appears on the right, add a border to the optin, and re-style the close link.

Important: The following is the CSS used for this demo, if you choose to copy the demo appearance exactly be sure to update the CSS selectors to use those specific for your optin (see our documentation on using the Custom CSS Tool for a walk-through), and change the background-image url to point to the image you’ve created.
/* Move the Twitter Follow Button to the right side of the optin */
html div#om-v80vwvtnexzl2kls .twitter-follow-button {
    float: right;
    margin: 0 !important;
}

/* Add a border around the optin and the background image of our Twitter profile summary */
html div#om-v80vwvtnexzl2kls .charlotte-close {
    top: auto !important;
    bottom: 0 !important;
    right: 0 !important;
    background-image: none !important;
    width: auto !important;
    height: auto !important;
}

/* Reposition the close link */
html div#om-v80vwvtnexzl2kls .charlotte-close:before {
    content: 'no way!';
    display: block;
    background-color: #000;
    color: #fff;
    padding: 10px 5px 5px 10px;
}

/* Restyle the close link to use the text 'no thanks!' */
html div#om-v80vwvtnexzl2kls #charlotte-optin {
    border: 10px solid #000;
    background-image: url('http://www.example.com/image.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

Add the CSS to the Custom CSS field of the optin builder’s Optin panel.

Twitter Optin Custom CSS

Step 4 – Adjust the Canvas Dimensions

Finally, let’s adjust the dimensions for our Canvas optin, also in the Optin panel of the optin builder. For this demo optin I’ve set the width to 600px. This accounts for the 20px border of the Canvas optin and the background image which is 560px wide. You can adjust the width and height to best suit your needs and the background image you’ve created.

Changing either value will show the result immediately in the optin preview.

Twitter Optin Dimensions

And that’s it! You’ve successfully created a Twitter Follow Button optin to display on your site.


FAQs

Can I track conversions when visitors select the Follow button in my optin?
Unfortunately, no. Twitter will replace the code added to the Custom HTML field with their own to generate the appearance and functionality of the Follow button. As a result, you cannot add the required om-trigger-conversion class that OptinMonster uses to track conversions on links and custom forms.


Looking for more social popup ideas? Checkout our guide to create a Facebook Page Widget popup optin using Canvas.