OptinMonster Logo

How To Add a Stunning Custom Twitter Feed To Boost Engagement

Last updated on

by

How to add Twitter feed to website

Do you want to improve engagement by adding tweets to your site?

A Twitter feed is the best way to accomplish that because it automatically fetches your tweets and displays them across your site. This keeps visitors engaged for longer and gets more visibility for your Twitter channel.

In this article, we’ll show you the best way to add a Twitter feed to your website to improve user experience (UX) and engagement.

Why Add a Twitter Feed To Your Website?

Twitter is one of the most popular social media platforms with 192+ million active users. It’s a powerful tool for your business to get more site traffic, build a loyal customer base, and spread your brand name.

By connecting Twitter to your site, you can give users more content to engage with. This increases interaction with your brand and at the same time, gets more exposure for your Twitter channel.

Now, the best and easiest way to showcase your tweets is through a Twitter feed. This is automated, so it only needs to be set up once and will run on its own.

Plus, adding a Twitter feed to your site has so many benefits. For instance, you can:

  • Add fresh content to your site regularly which is great for SEO
  • Grow your Twitter following
  • Keep visitors engaged for longer as they have more interesting content to browse
  • Boost social media activity as visitors can like, retweet, and comment
  • And much more…

It’s easy to set up a custom Twitter feed, and we’re going to show you how to do it in under 5 minutes (without any technical skills needed).

Adding a Twitter Feed To a Website

The easiest and quickest way to add a Twitter feed to WordPress is by using Custom Twitter Feeds by Smash Balloon:

smash balloon twitter feed pro plugin

Custom Twitter Feeds is hands down the best Twitter feed plugin for WordPress. It lets you seamlessly connect your website with Twitter to display an automated feed of your tweets.

A few highlights of this plugin include:

  • Easy to set up – Create a beautiful Twitter feed in under 5 minutes with just a few clicks.
  • Fully customizable – Easy to match the Twitter feed to your website’s theme and design. You can also choose which tweets to show on your site with filters.
  • Responsive design – Works on any device such as your laptop, desktop, and mobile.
  • Optimized for speed – Loads quickly and will not slow down your site.
  • Display social icons – Add buttons to like, retweet, and follow so your visitors can engage with your Twitter timeline while they are on your site.

With Custom Twitter Feeds, you’ll have everything you need to create a Twitter feed that’s beautiful and engaging.

For more information on this plugin, check out our detailed review of Smash Balloon.

Ready to create your own Twitter feed?

To follow along in this tutorial, make sure you sign up for your risk-free Smash Balloon account.

Now, let’s take a step-by-step look at how to add a Twitter feed to your WordPress site.

Step 1: Connect Your Twitter Account

The first thing you need to do is install and activate Smash Balloon’s Custom Twitter Feed plugin on your WordPress site.

Next, from your WordPress menu, navigate to Twitter Feeds » License page.

Here, you can enter your license key to activate the plugin:

add license smash balloon

You can find this information in the Downloads section in your account on the Smash Balloon website:

smash balloon license key

Once your license is active, open the Configure tab and you’ll see a big blue button that says ‘Log in to Twitter and get my Access Token and Secret’:

login to twitter custom twitter feed

By clicking on this button, you’ll get an option to enter your Twitter username and password. When you log in, Smash Balloon will ask for permission to view your tweets and account information:

authorize app custom twitter feed smash balloon

When you grant access, Smash Balloon will take you back to your WordPress dashboard. Now, you’ll see that the plugin has automatically filled in your Access Token and Secret information.

access token secret custom twitter feed smash balloon

All you have to do is hit the ‘Save Changes’ button to store your details. With that, your website is successfully connected to your Twitter account.

Step 2: Set Up Your Twitter Feed

Now that you’ve connected your site to Twitter, you can create the Twitter feed.

To do this, scroll down on the same Configure page. You’ll see the Feed settings here.

First, you can choose what type of feed you want.

For instance, you can display your entire timeline or filter by hashtag, search words, mentions, and lists. Smash Balloon also lets you create mixed filters so you can add more than one type of rule here:

Next, you’ll see that by default, the plugin displays 5 tweets in the feed. It also checks for new tweets every hour:

You can customize these options by increasing or decreasing the numbers here.

When you’re done, hit the ‘Save Changes’ button to store your configurations. Now that your feed is set up, you can customize it to your liking.

Step 3: Customize Your Twitter Feed

Smash Balloon’s Custom Twitter Feeds plugin gives you full control over the look and details displayed in your Twitter feed.

To personalize your feed, switch to the Customize tab. Here, you’ll see all the customization options available. We’ll take you through the basics to create a beautiful Twitter feed.

First, you can change the height and width of your feed. This is helpful to adjust the feed to suit your website’s theme:

Customize custom twitter feed smash balloon

Next, you can choose a layout for your feed. There are 3 options here that include list, masonry grid, or carousel.

When you select a layout, you’ll get more customization options to select the number of columns to display on desktop and mobile devices.

After this, you can scroll down further and you’ll see a list of details you can choose to show or hide in your feed. This includes the name, image, retweeted text, date, link, and more:

Show hide options custom twitter feed smash balloon

To show a detail, simply tick the checkbox next to it. And to hide a detail, you’ll need to uncheck the box.

Below this, there are more advanced customization options.

By default, the recommended settings are turned on here so we suggest leaving them as is. But you can explore them and change them if you feel the need.

Smash Balloon also has custom CSS and Javascript options for developers.

Now that your Twitter feed is customized, hit the ‘Save Changes’ button.

Next, there are a few styling options you can use to further customize your feed. Switch to the Style tab and you’ll see options to change the color of the feed:

Style custom twitter feed smash balloon

The plugin also lets you change the timezone, date, and author name. After you’ve made the styling changes, you’re ready to add the feed to your WordPress site.

Step 4: Embed Twitter Feed on Your Site

Custom Twitter Feeds lets you add your Twitter feed to any WordPress page, post, and sidebar. It’s a simple process and takes just a few seconds.

1. Add the Twitter Feed to WordPress Posts and Pages

You can create a dedicated page for your Twitter feed or you can embed it into an existing one. You can even display it in blog posts to improve engagement and increase session times.

To add the Twitter feed to a new page, navigate to Pages » Add New to open the page editor.

Now, add a new block and search for the Twitter Feed widget in the left column.

When you select the widget, a preview of your feed will automatically appear in the page editor.

You can preview the page to see how the custom Twitter feed looks. Then, publish your page to make the Twitter feed live on your site.

You can use the same steps to embed the feed inside blog posts and other pages on your site.

And in case you’re still using the classic editor, simply paste the shortcode [custom-twitter-feeds] inside any post or page.

classic editor add custom twitter feed

When you preview or publish your post, you’ll see the Twitter feed in action.

2. Add the Twitter Feed to WordPress Sidebar

By embedding a Twitter feed in your sidebar, you’ll have a constant stream of fresh content for visitors to view on any page that has a sidebar enabled.

To add the feed to a sidebar, go to the Appearance » Widgets page. Under ‘Available Widgets’, scroll down to find the Custom Twitter Feeds widget.

Drag and drop it into the sidebar in the righthand menu:

custom twitter feed widget in sidebar

You can also add a title if you like, and that’s it! You can now visit any page on your website that has a sidebar enabled and you’ll see the custom Twitter feed live on your site.

With that, you’ve successfully added a customized and automated Twitter feed to your site.

Grow Your Followers With a Twitter Popup

Now that your Twitter feed is set up, you can also promote your Twitter channel in a popup to get more followers and engagement.

create a follow us on twitter popup

These popups are simple yet powerful and give you the opportunity to convert as many site visitors into Twitter followers.

You can easily create these popups in with OptinMonster.

OptinMonster homepage

OptinMonster is a premium marketing tool that lets you create stunning popups, slide-ins, floating bars, gamified wheels, and much more.

You can use it to collect leads, subscribers, and followers on your site. OptinMonster comes with 50+ templates and a drag and drop builder to easily customize your campaigns:

drag and drop a button into place shopping template

It also has powerful targeting features to display campaigns to visitors when they’re most likely to convert:

display rules in the optinmonster builder

For instance, you can display the Twitter popup when someone has just viewed the Twitter feed page and is about to leave your site.

You can ask them to follow you on Twitter to get updates and more amazing content.

To create a Twitter popup with OptinMonster, follow our Custom “Follow Us On Twitter” Popup tutorial.

It takes you through the steps in detail. And you can design and add the popup to your site without the need for technical skills.

Start Growing Your List and Followers Today!

BONUS: Done-For-You Campaign Setup ($297 value)Our conversion experts will design 1 free campaign for you to get maximum results – absolutely FREE! Click here to get started →

And that’s all for today!

We hope you found this tutorial helpful. If you’re looking for more ways to leverage social media on your site, check out:

These posts are packed with info to help boost your social media and website engagement so you can grow your business.


Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.

CTA background
CTA thumbnail

Over 70% of visitors who abandon your website will never return! Learn how to unlock the highest conversion revenue from each of your website visitors!

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.

1
1
1

Enter all the Optin Gallery Pages here

Enter each choice on a new line. For more control, you may specify both a value and label like this: red : Red

Enter each choice on a new line. For more control, you may specify both a value and label like this: red : Red

1

Blog Sidebar Campaign Form

Popular Posts

Connect with us:

Start Getting More
Leads & Sales Today
with OptinMonster!

Popups work, and you can get started for a few bucks a month. What are you waiting for?

Create and launch smart capture forms
today in minutes. What are you waiting for?