How to Embed a Twitter Feed on Your WordPress Site

by Stacey Corrin on June 2, 2020

Do you want to embed your Twitter feed in WordPress? Displaying tweets on your website is an excellent way to engage with your visitors and offer them relevant content. But adding different types of your Twitter feed to WordPress can be tricky if you’re not sure where to start.

In this article, we’ll show you how to embed a Twitter feed in WordPress step-by-step. Then you can engage with visitors, delight them with relevant content, and convert them into loyal customers.

Since there are several methods in this guide, here’s a table of contents to help you find the solution that works for you.

Before we dive in, let’s look at why embedding Twitter is beneficial for your website.

Why Add Your Twitter Feed to WordPress?

The average life of a Tweet is around 18 minutes before it’s lost in the news feed. So adding a feed of your best Tweets to your website extends their life-time, keeping them around for longer and giving visitors more opportunities to engage with them.

Adding your custom Twitter feed to WordPress also draws people’s attention to the fact that you’re active on Twitter and your tweets are worth following. And because you likely share different content on Twitter than on your site, you’re offering more ways to engage and interact with your business.

Now that you know the benefits of using Twitter feeds in WordPress let’s look at the first solution for embedding them on your website.

How to Embed Twitter With a WordPress Plugin

The easiest way to embed a Twitter feed on your website is to use a WordPress plugin. WordPress plugins extend the functionality of WordPress websites without needing to know how to code.

The best WordPress Twitter Feed plugin on the market is Custom Twitter Feeds Pro from Smash Balloon. As the highest-rated Twitter feed plugin for WordPress, it lets you seamlessly integrate Twitter content into your website. Then you can display beautiful and responsive Twitter feeds to your audience.

Follow the steps below to embed a Twitter feed on your WordPress site using Custom Twitter Feeds Pro.

Step 1: Download Custom Twitter Feeds Pro Plugin

custom twitter feeds pro

The first step is to get your copy of Custom Twitter Feeds Pro here. Then install and activate the plugin on your WordPress website. If you’re not sure how you can learn how to install a WordPress plugin step-by-step here.

Step 2: Connect Your Twitter Account

The next step is to connect your Twitter account to WordPress. To do that, head to Twitter Feeds » Settings and then click the blue button to link your Twitter account.

Connect your Twitter account

After that, scroll down to the Feed Settings section. Here you can choose the type of Twitter feed you’d like to display on your website.

Twitter feed types

The feed type options include:

  • User Timeline: Content from your main Twitter timeline.
  • Hashtag: Specific hashtags displayed in a Twitter feed.
  • Search: The results of an advanced Twitter search shown in a feed.
  • Home Timeline: Show tweets from yourself and the accounts you follow.
  • Mentions Timeline: Show a feed of tweets where other people mention you.
  • Lists: Display a feed based on your Twitter lists.

When you’ve picked your feed type, you can set the number of tweets to display in your feed and how often the plugin will check for fresh content.

Now click the Save Changes button and move on to customizing your Twitter feed.

Step 3: Customize Your Twitter Feed

The customization options in Custom Twitter Feed Pro, lets you set specific layouts for your Twitter feed, and control the content included.

To access those options, head to Twitter Feeds » Customize.

The first section on this page lets you set the height, width, and custom CSS classes for your feed. You can also disable the lightbox for media in the feed.

The Layout section provides 3 different layout types for your Twitter feed, including:

Twitter feed layout types

  • List: A list of tweets spanning the full width of your website’s content area.
  • Carousel: A slideshow of tweets with the option to customize the number of columns for desktop and mobile, loop and arrow types, and carousel height.
  • Masonry: A feed of Tweets in columns with no space between each post and column options for both desktop and mobile.

Click any layout type to set it for your Twitter feed.

The next section gives you control over the content included in your Tweets. Tick or untick any of the checkboxes to show or hide content such as author names, dates, Twitter cards, and more.

show or hide information in Twitter feeds

You’re also able to hide your feed’s header and load more buttons to create a streamlined feed with fewer distractions.

Below, you can customize the amount of media displayed in tweets and auto-scroll settings.

The section after that is the Moderation area. Here you can show or hide tweets containing specific words, phrases, or hashtags. You can also hide particular tweets by entering the post id into the box provided.

Twitter feeds moderation

This is an excellent way to control the content in your Twitter feeds and filter out any offensive tweets that could hurt your business’s reputation.

Next up is the Misc section, which lets you enter custom CSS and JavaScript. That helps with styling your feed to match your site’s unique branding. It’s also the perfect place to enter tracking scripts like Google Analytics and retargeting pixels.

twitter feeds misc settings

For users wanting even more control over their Twitter feeds, scroll down to the Advanced section. Here you can clear the cache for Twitter cards, auto-detect the optimum image resolution, and lots more.

But don’t worry if you’re not familiar with these settings. Your feeds will still work beautifully without touching any of them.

Now let’s look at styling your Twitter feeds for WordPress.

Step 4: Style Your Twitter Feed

To access the style options, head to Twitter Feeds » Style. On this page, you can customize the color and font of text and links in your feed, as well as feed backgrounds and buttons. You can also choose how the date and time is shown on your feeds.

Twitter feeds style settings

Click the Save Changes button when you’re happy with the look of your feed and move on to the instructions for embedding your feed in WordPress.

Step 5: Display Your Twitter Feed in WordPress

The Custom Twitter Feed Pro plugin offers 3 ways to embed your Twitter feed in WordPress, including:

  1. Displayed in a WordPress post
  2. Embedded in a WordPress page
  3. Added to a WordPress widget-ready area like a sidebar or footer

Here’s how to embed your Twitter feed in a post or page in WordPress.

Embed Your Twitter Feed in a WordPress Post or Page

To embed your Twitter feed in WordPress, decide if you’d like to display your feed in a post or page.

To create a new page, navigate to Pages » Add New from your WordPress admin area.

To create a new WordPress post, navigate to Posts » Add New.

Then in either your post or page, click the Plus (+) icon to add a new WordPress content block.

Twitter feed content block

Next, type “feed” into the search box and click Twitter Feed to add it to the editor. Now you’ll see a preview of how your feed looks before publishing.

If you’re happy with everything, click Publish. And when you view your feed on the live post or page, it’ll look similar to the example below.

Display your Twitter feed in a WordPress post

Add a Twitter Feed Widget to Your Sidebar

If you’d prefer to embed your Twitter feed using a sidebar widget, navigate to Appearance » Widgets from your WordPress admin area.

Then drag the Custom Twitter Feed widget into your chosen widget area. For our example, we used the Primary Sidebar.

custom twitter feed widget

Click Save, then Done to confirm the changes, and when you navigate to your live website, your Twitter feed will be displayed beautifully in your sidebar.

Twitter feed widget sidebar

Adding a Twitter Hashtag Feed to Your Website

The Custom Twitter Feed Pro plugin is also a fantastic way to showcase Twitter hashtag feeds on your website easily. Hashtag feeds are an effective way to highlight specific content from your account or content curated from public hashtags.

For example, fashion retailers can use Twitter hashtag feeds to find trending posts related to the latest styles, which they can embed on their blog for readers to engage with. Alternatively, they can use hashtags on product pages for specific products to highlight different ways to wear the item.

Embedding a Twitter hashtag feed is easy. Follow the instructions above to connect your account to WordPress, then in the Feed Settings section, choose the Hashtag option.

Twitter hashtag feed settings

Here, enter your desired hashtags separated by commas, and click Save Changes. Then continue setting up and embedding your Twitter hashtag feed using the steps above.

Twitter hashtag feed

How to Embed a Twitter Feed in WordPress Without a Plugin

There may come a time when you’d prefer to embed a Twitter feed in HTML manually, without a plugin. Twitter offers a way for you to do this by copying and pasting code snippets onto your website but this is something you might not be comfortable doing.

In fact, there are several drawbacks to adding a Twitter feed to WordPress manually instead of using the easy way, with a plugin, which we explain below:

  • Not as easy: Embedding a Twitter feed in WordPress manually is not as easy as with a plugin. You have to go through multiple steps which can be confusing and you have to switch between different webpages. When you use a plugin, like Smash Balloon’s you can do everything within your WordPress dashboard with a few clicks.
  • No customization: When you add your feed manually to WordPress there aren’t any customization options to personalize your feed and create a consistent branded look. The Custom Twitter Feed plugin has extensive design and layout options for both your feed and the posts within, giving you complete control over how everything looks.
  • No filters: Manual twitter feed embeds don’t offer ways for you to filter your feed to display specific content. That means you won’t be able to target certain audiences with tailored Twitter posts. The plugin, on the other hand, lets you filter feeds by hashtags, search terms, and more, as well as letting you combine multiple users in a single feed.
  • Open to errors: If you manually embed twitter on your website, you leave room for human error. For instance, you can easily misplace parts of the code snippet, click the wrong webpage, miss a step in the process, and so on. With a Twitter feed plugin managing all that for you, there’s nothing to lose to track of! Even better, the Custom Twitter Feed plugin will automatically notify you if there’s an issue with your feed.

So if you’re looking for an easy way to embed your Twitter feed in WordPress, the Custom Twitter Feed Pro plugin, has everything you need to get up and running in minutes, saving you the frustration of implementing it manually.

Get started with Custom Twitter Feeds plugin here.

That said if for some reason you need to embed Twitter manually, follow the steps below.

Step 1: Visit Twitter Publish

Twitter publish

First, visit Twitter Publish. This is an official Twitter website that lets you generate HTML code for your different Twitter feed types to add to your site.

Step 2: Choose Your Embed Type

Twitter publish embed type

Next, scroll down and choose your embed type. For this example, we’re using the Embedded timeline option.

Step 3: Paste Your Twitter URL

Twitter timeline URL

Now enter the URL of the Twitter timeline you want to embed and click the Preview button.

Step 4: Copy the HTML Code

Twitter feed html code

On the preview page, you’ll see an overview of your chosen Twiter timeline. At the top of the preview, you’ll see a box containing HTML code. Click Copy Code to save the code to your clipboard.

Step 5: Paste the HTML in WordPress

The last step is to paste the copied HTML into WordPress. To embed the code in a WordPress post, head to Posts » Add New.

Then click the Plus (+) icon to add a new content block. For this example, choose the Custom HTML block.

WordPress custom HTML block

Then paste the copied HTML code into the content block and click Publish.

Add twitter feed HTML to WordPress

When you navigate to the live post, your Twitter feed is displayed right there in your post.

Embedded twitter feed in wordpress using HTML

And there you have it!

We hope this article helped you learn how to embed a Twitter feed on your WordPress website. You can now engage your visitors with relevant content, increase your Twitter followers, and grow your businesses.

Get started with Smash Balloon today.

And if you enjoyed this article, feel free to follow us on Twitter and Facebook for more social media marketing tutorials.

Want to Try our Twitter plugin for Free?

Enter the URL of Your WordPress website to install Custom Twitter Feeds Lite.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *