How to Create a Twitter Follow Campaign using Canvas

Canvas allows you to create fully customized Campaigns, in this documentation we’ll create a Twitter Follow Campaign 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 campaign by adding a background image and re-styling the close link.

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

  1. Generate the Twitter Follow Button
  2. Paste the Twitter Embed Code
  3. Style the Campaign 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 Campaign 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 campaign something like the image below.

Twitter Custom Canvas HTML

Step 3 – Style the Campaign 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 Campaign 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 Campaign.

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 want to 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 Campaign, 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 Campaign (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 Campaign */
html div#om-v80vwvtnexzl2kls .twitter-follow-button {
    float: right;
    margin: 0 !important;
}

/* Add a border around the Campaign 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 Campaign Builder’s Optin Panel.

Twitter Campaign Custom CSS

Step 4 – Adjust the Canvas Dimensions

Finally, let’s adjust the dimensions for our Canvas Campaign, also in the Optin Panel of the Campaign Builder. For this demo campaign I’ve set the width to 600px. This accounts for the 20px border of the Canvas Campaign 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 campaign preview.

Twitter Campaign Dimensions

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

Frequently Asked Questions

Q: Can I track conversions when visitors select the Follow button in my campaign?

A: 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.

There is a possibility of having a Conversion Intent that you can track if you are following our guide on How to Track Conversion Events in an iFrame.


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