How to Create a Custom “Follow Us On Twitter” Popup to Get More Followers

Who knew that 280 characters could pack such a marketing wallop? In this article, we’ll teach you how to create a Follow Us on Twitter popup which is the best way to grow your Twitter presence by using the traffic already coming to your site.

Twitter started out almost as a stream of consciousness, microblogging site but it has grown into a marketing powerhouse where brands like Wendy’s and Skittles, among others, are embracing the casual atmosphere to engage customers in a way traditional marketing simply can’t. Or won’t.

While Facebook is certainly the social media matriarch, accounting for 57% of global content sharing activities, social media platforms like Twitter, Instagram, and even Snapchat shouldn’t be ignored.

Twitter still beats out email for total social sharing activities at 18%, after all.

twitter sharing

Here’s what our popup will look like at the end of this tutorial:

final follow us on twitter campaign

Ready? Let’s get started.

Step 1. Create Your Campaign

Login to your OptinMonster dashboard, and click on Create Campaign.

create_campaign

Choose a campaign type. For this tutorial, we’ll use one of our highest converting campaign types, a Popup.

select_campaign_type

Choose a template. Instead of one of the pre-designed templates, we’ll build one from scratch using the Canvas template.

select_canvas_campaign

Name your campaign and select the website where you want it to load, then press the Start Building button.

name and start building

This will take you to the OptinMonster campaign builder for the next step.

Step 2. Edit Your Campaign

When you get to the campaign builder, you’ll see a blank campaign. Click on the big, blue plus sign to add a new Column Block.

default campaign editing view

Let’s add the single box. To add it, just drag and drop to the campaign preview.

draganddrop_column_block

Once you’ve dropped the Column Block into your campaign you’ll see Element Blocks are available.

add_element_blocks

We’re going to add the HTML Element Block. Once again, just drag and drop the Element Block to your campaign.

Step 3. Get the Twitter Code

Leave the campaign builder open, and open the Twitter Publish tool in a new browser tab or window. For this example, we’re going to get the code for a large “follow” button that shows our username.

Start by selecting the Twitter Buttons option.

select Twitter Buttons option

Select Follow Button from the options that appear.

select follow button

Add the Username you want to create the button for and click the blue Preview button.

add username

Since we want to use a large button, let’s go ahead and click on set customization options.

set customization options

Select the checkbox next to Large Button and click the blue Update button.

select large button option and update

Click the blue Copy Code button.

copy twitter code

Step 4. Add the Twitter Follow Button Code to Your Campaign

Go back to the campaign builder, and paste the code you copied from Twitter. If you want, you can center your button by adding <center> </center> around everything inside the div codes.

paste twitter code into campaign

Save your campaign.

save your campaign

So far we only have a button. Let’s add some text to give folks a reason to follow us instead of just showing them a button with no context.

To do this, we’re going to add a new block by clicking the + Add Blocks button.

add new block

Now, just like the beginning of this tutorial, drag and drop the blocks and elements you want into your campaign.

drag and drop elements to campaign

Edit the text however you like to make it appealing to your audience.

edit text

When you click the follow button you’re greeted with a Twitter profile summary and the option to follow or an acknowledgment that you already are following the account.

twitter profile to follow

Pretty cool, but if you want to get a little fancy you can add some custom CSS to add some interest to the follow button.

Step 5. Style the Campaign with Custom CSS

If you want to skip this step, no problem. You’ve added a button and some text which is plenty interesting. Just continue on to Step 6. Otherwise, let’s dive in.

First, we need an image. We’re going to use a screenshot of our Twitter profile summary and edit it with our favorite image editing program to remove the blue “Following” graphic and crop the image to show only what we want it to display. The image we’re using is 475 px wide.

OptinMonster Twitter button

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

In addition to the background image, we’re going to make some other changes to the follow button: reposition the button so it appears on the right of the popup screen, add a border, and change the styling for the close button. Here’s the CSS template for your use, but be sure to update the background-image URL to the correct one.

/* Move the Twitter Follow Button to the right side of the Campaign */
html div#om-{{id}} .twitter-follow-button {
    float: right;
    margin: 0 !important;
}

/* Reposition the close link */
html div#om-{{id}} .{{ns}}-close:before {
    display: block;
    background-color: #000;
    color: #fff;
    padding: 10px 5px 5px 10px;
}

/* Add a border around the Campaign and the background image of our Twitter profile summary */
html div#om-{{id}} .Campaign__content {
    border: 1px solid #eaeaea;
    background-image: url('http://www.yoursite.com/image.jpg') !important;
    background-size: 100% !important;
    background-repeat: no-repeat !important;
    height: 250px;
    width: 475px;
}

To add the CSS to your campaign go to Design » Optin Settings » Custom CSS.

add custom css to campaign

Once again, Save your campaign.

Step 6. Set Your Display Rules

Now we’re going to choose when the “Follow Us On Twitter” popup will display.

Go to Display Rules. Time on page AND current URL path is any page are selected by default to ensure that your campaign will display on any page after publishing even if you forget to enable a display rule.

display_rules_default

But a better option is to show the “Follow Us On Twitter” popup only to visitors who’ve already shown they’re interested.

To do this, change the first rule to pages viewed is at least and set a number of pages. We suggest at least 2 because people who have looked at multiple pages are definitely interested in your content. You can delete the second rule by clicking on the minus sign to the right of the rule.

display_rules_pages_viewed

Save your campaign. Always.

There are many other display rule options you can use. For example, you can use our signature Exit-Intent® Technology to show the “Follow Us On Twitter” popup to visitors who are about to leave.

To enable this, change your rule to show if exit detected.

display_rules_exit_detected

You can also choose to show a “Follow Us On Twitter” popup depending on specific visitor behavior. For example, if you have a blog post specifically about Twitter, you can use our advanced page-level targeting to display the Twitter Follow popup on that page.

These advanced targeting options let you show the right version of the right popup to the right visitors at the right time, increasing the chances that they’ll head over to your Twitter feed and follow you.

Step 7. Save and Publish Your Campaign

When you’ve finished editing your campaign Save it and head back over to the Publish tab.

You’ve already used the Shareable MonsterLink™, but you can add your Twitter campaign to any website with the account-wide or campaign-specific embed code. You can also easily add the campaign to a WordPress website.

available_platforms_to_publish

This is a popular option, as so much of the web runs on WordPress. Here’s how you do that.

How to Add a Twitter Follow Button to WordPress

When you start using the OptinMonster app, you install our connector plugin. That’s what allows all your campaigns to display.

When you make a new campaign live, go to your WordPress dashboard, and click on the OptinMonster link in the menu.

optinmonster_wordpress_plugin_access

If your new campaign isn’t listed click on the Refresh Campaigns button.

refresh optinmonster campaigns on wordpress

Once it shows, you can click on the Edit Output settings to tweak campaign display even more.

edit campaign output settings

For example, you can include and exclude display not just on pages but also on certain blog categories.

advanced_output_settings

When you’re done, click Save Settings so your changes will take effect.

save_om_wp_settings

Finally, click Go Live.

take campaign live

That’s it! Now you can easily expand your social media network with a high converting Follow Us On Twitter popup.

Not using OptinMonster yet? Get started today and convert more visitors into subscribers and customers than ever before!

Jacinda Santora
Jacinda Santora is a writer specializing in ecommerce and growth marketing. She prides herself on her ability to make complicated things easier. When she isn't writing you can find her daydreaming about campervans, drinking coffee, and listening to podcasts.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.