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.

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.

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

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.

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.

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.

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.

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.

/* 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.

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.

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.