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 your 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.
- Why add your Twitter feed to WordPress?
- How to embed Twitter with a WordPress plugin
- Adding a Twitter hashtag feed to your website
- How to embed a Twitter feed in WordPress without a plugin
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 Tweets 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
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.
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.
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:
- 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.
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.
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.
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.
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:
- Displayed in a WordPress post
- Embedded in a WordPress page
- 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.
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.
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.
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.
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.
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.
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.
That said if for some reason you need to embed Twitter manually, follow the steps below.
Step 1: Visit 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
Next, scroll down and choose your embed type. For this example, we’re using the Embedded timeline option.
Step 3: Paste Your Twitter URL
Now enter the URL of the Twitter timeline you want to embed and click the Preview button.
Step 4: Copy the 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.
Then paste the copied HTML code into the content block and click Publish.
When you navigate to the live post, your Twitter feed is displayed right there in your post.
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.