Get Qi Theme with 150 superbly designed WordPress demos

Get Qi Theme
Qi Theme
Sign up for our newsletter and be the first to get all the latest Qode news and updates.
BACK TO TOP

How to Display Twitter Feed in WordPress

How to Display Tweets on Your WordPress Website

Twitter is, without a doubt, one of the most popular social networking platforms in the world today, with approximately 330 million monthly active users, according to the Q1 2019 Earnings Report. This makes it ideal for boosting brand exposure, which is why it’s always a good idea to have your tweets displayed somewhere on your website or blog.

Just like with embedding a YouTube video, displaying your Twitter feed on your WordPress website or blog is rather simple to do. Today we’ll show you a few different ways in which you can display your tweets in WordPress – including how to do it with Qode Interactive themes. Whether you’re using one of the social media WordPress themes to boost your online and social media presence, or you’re simply looking for ways to share your tweets on your site, this tutorial breaks it all down for you in simple and quick steps.

Benefits of Displaying Tweets on Your Website

Twitter is a great platform for sharing content, branding and advertising, which is exactly why so many businesses put up their Twitter feed (or most relevant tweets) on their website.

This is a great opportunity to have your website visitors check out your Twitter and potentially give you a follow, and vice versa – to get your Twitter followers to visit your site and explore more of your content, boosting your traffic and, potentially, your conversions. In short, by integrating your Twitter account with your website, you can increase the visibility of your business and can keep your customers engaged with your brand.

So, without further ado, let’s get into how you can display tweets on your WordPress website. We will talk about the most common places for displaying your tweets – the sidebar and pages/posts.

In case you want to learn all about recommended Social Media Image Sizes in 2020, you may want to check out this article as well.

Qode WordPress Themes: Top Picks
Bridge WordPress Theme Banner
Bridge

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme
Stockholm

A Genuinely Multi-Concept Theme

Startit WordPress Theme
Startit

Fresh Startup Business Theme

Biagiott banneri
Biagiotti

Beauty and Cosmetics Shop

How to Embed Twitter Feed in WordPress Sidebar

In WordPress, the most common, and one of the most convenient locations to display the recent tweets is the sidebar. People are used to finding them in this location so they will probably look for the tweets there intuitively. Here are all the ways in which you can display your tweets in the WordPress sidebar.

Displaying Tweets in the WordPress Sidebar With the WordPress Text Widget

First things first, you need to copy the URL of the Twitter profile you want to add to your website.

Twitter URL

Then, head to Appearance >> Widgets in your WordPress dashboard.

Appearance Widgets

Once you find the Text widget on the left side of the screen, simply drag and drop it to the Sidebar widget area on the right.

Text Widget

Alternatively, you can click on it and select Add widget.

Add Widget

Also, you can position your Text widget wherever you like in the sidebar area by dragging it up or down with your mouse.

Next, you should paste the Twitter URL that you copied earlier into the text widget. To complete the action, click on Save.

Twitter Text Widget

Finally, here’s what your recent tweets will look like live.

Similarly to how you can add the entire feed of recent tweets to your sidebar, you can also do the same for a single tweet, thread, or any other Twitter link that you wish to share on your website (such as a Twitter collection, a moment, your likes timeline, and so on).

To add a single tweet to your website, go to Appearance >> Widgets and find and drag the Text widget to the sidebar area. Then, copy the link of your tweet, thread or anything else you wish to display in your sidebar.

Single Tweet URL

Finally, simply paste your link in the text widget and hit the Save button.

Twitter Single Text Widget

Once again, go to your website’s frontend to check the results.

Displaying Tweets in the WordPress Sidebar Using the Twitter Publish Feature

In case you want to display your Twitter posts without the scrollbar, you can always use the Twitter Publish feature. This feature is also convenient because it allows you to copy embed codes for any link from your Twitter, including your feed, a single tweet or a thread, a collection, a list, a moment, a likes timeline, and so on. You can either enter your URL in the empty box or choose one of the following options: Embedded Tweet, Embedded Timeline, or Twitter Buttons.

Publish Twitter

To generate the embed code for your Twitter feed, head to the Twitter Publish webpage and enter your Twitter page URL (which you’ve previously copied). Then, hit the arrow on the right side of the box.

Twitter Publish Embed

Once you do this, two options will appear – Embedded Timeline and Twitter Buttons. Since the second option only allows you to display a Twitter button on your site, you should pick the first one.

Publish Twitter Embedded Timeline

Next, copy the embed code.

Publish Twitter Copy Code

After that, access the Widgets screen by going to Appearance >> Widgets. Find the Custom HTML widget and drag it into the Sidebar area.

Widgets Custom HTML

Finally, simply paste the code you got from Twitter Publish into the Content section of your widget, and click the Save button.

Twitter Custom HTML Widget

This way, the Twitter feed will be displayed without the pesky scroll bar.

For adding a single tweet (or any other type of Twitter link) to your sidebar with Twitter Publish, paste the URL of your tweet there, just like we did with the Twitter feed URL above.

Twitter Single Publish Embed

Once you click on the arrow in the URL box and generate the embed code, go to Appearance >> Widgets and drag the Custom HTML Widget into the Sidebar. Finally, paste the embed code from Twitter Publish there and hit the Save button.

Twitter Single Custom HTML Widget

Finally, we have to note that even though the sidebar is the most common area where you can put your tweets, you can add them to other parts of your site as well, like your footer, your side area, or any other widget area of your choice. The steps for adding your tweets to other widget areas are the same as above – the only difference being that instead of a sidebar, you would have to drag your Text Widget (or Custom HTML Widget) to the desired area instead.

How to Embed Twitter Feed in WordPress Pages and Posts

In WordPress, you can also add tweets to any of your pages or posts. We’ll show you how you can do it in both Gutenberg and Classic editor.

Adding Tweets to WordPress Pages and Posts in the Gutenberg Editor

To add your most recent tweets to one of your pages or posts in the Gutenberg Editor, you need to access the page or post in question in your backend by going to Posts >> All Posts or Pages >> All Pages (or, if you’re creating a brand new page/post, by going to Pages/Posts >> Add New), and then click on the “plus” icon in the upper left corner.

Gutenberg Plus Icon

Next, type in “twitter” in the search bar and select the Twitter block in order to add it.

Gutenberg Twitter

Once again, copy your profile’s URL, and paste it into the Twitter block. To finish adding the URL, click on Embed.

Gutenberg Twitter Embed

Don’t forget to hit the Update/Publish button to save your changes.

Gutenberg Publish Post

Just like in the previous cases, your Twitter feed will be automatically displayed on your page/post.

Gutenberg Display Twitter

Alternatively, you can also add tweets to your page or post in Gutenberg with the Twitter Publish feature. After clicking on the “plus” sign in your backend, type in “custom HTML” to find the Custom HTML block.

Gutenberg Custom HTML

Then, all you need to do is paste the code that you copied from Twitter Publish into the custom HTML block itself, and of course, hit Update/Publish.

Gutenberg Twitter Custom HTML

And voilà– your Twitter feed will be displayed right there on your page or post.

Gutenberg Display Twitter

For adding a single tweet (a list, a thread, a moment, etc.) to your page or post with the Gutenberg editor, go to the page/post’s backend and search for the Twitter block in the editor once you click on the “plus” icon. Paste the link of your tweet there, click on Embed and then Update/Publish, and you’re all set.

Finally, if you want to add a single tweet to your page or post with the help of Twitter Publish, paste your URL on their page and copy the embed code.

Twitter Publish Embed Single Tweet

Then, access the backend of your page or post, click the “plus” icon and find the Custom HTML block. Paste the embed code within the block, click on Update/Publish and that’s it – your tweet will be displayed in your page/post’s content.

Adding Tweets to WordPress Pages and Posts in the Classic Editor

If you prefer theClassic Editor and want to add tweets to your page/post, you can do it by copying and pasting your Twitter URL directly into the editor. Make sure, though, that the Visual mode is turned on. You can place your Twitter feed wherever you like within your content – just make sure to paste your URL in the separate line.

The instant you paste your URL, you will be able to see your feed in the editor.

Twitter Classic Editor

Don’t forget to click the Publish/Update button once you’re done.

Classic Post Update

The process is the same if you want to add a single tweet or a thread to your page or post – just copy/paste the URL of your tweet in the post editor, click Publish and you’re all set.

Alternatively, you can add your Twitter feed, single tweet/thread or any other type of Twitter URL in the Classic Editor with Twitter Publish. After going to the Twitter Publish page and copying the embed code of your URL, switch to Text mode in your editor and insert the embed code wherever you like.

Classic Post Text Editing Mode

After you’re done, you can click on Publish and go preview your page/post to see what it looks like live.

Displaying Tweets in Qode Interactive Themes

Now that we covered various ways in which you can display your tweets on your website, let’s see how you can do it if you use (or plan to use) one of the Qode Interactive themes for your website.

The first thing you need to do is connect your website to Twitter. You can find this setting in Qode Options >> Social.

Qode Options Social

You will also find some other social options here, such as the option to enable social sharing, as well as to connect with Instagram. Right now, we’re looking for the “Connect with Twitter” option.

Connect With Twitter

Note that in order to connect with Twitter, you need to be logged in to your Twitter account. Then, hit the Connect with Twitter button and click on Authorize app.

Authorize Twitter

After you do this, a message will pop up letting you know that you’ve successfully connected with your Twitter account. After this, you will also be able to Re-connect with Twitter, for example, in case you want to connect a different account to your website.

Connected Twitter

In case you have any trouble displaying tweets (this might happen, for example, when you change the Twitter account connected to your website), there’s a very simple way to reset Twitter from the database which will solve these types of issues. We also recommend that you set a cache time for your tweets.

Qode themes offer two additional ways in which you can display tweets – one is by using the Qode Twitter Widget, and the other is with the help of a shortcode.

Adding Tweets Using the Qode Twitter Widget

To use this method, go to Appearance >> Widgets, and find the Qode Twitter Widget in the list of available widgets. Then, select the widget area where you wish your tweets to be displayed and click on Add Widget.

Qode Twitter Widget

The Qode Twitter Widget comes with a few useful options which will allow you more control over how your tweets will be displayed. For example, you can set the number of tweets you want to be shown, whether you want to show tweet time, and so on.

Qode Twitter Widget Options

Adding Tweets Using a Shortcode

Since Qode themes come with the integrated WPBakery plugin, you can put your tweets anywhere on your page or post with the help of the Qode Twitter Feed shortcode, which is exclusive for Qode Interactive themes. After you’ve selected WPBakery Page Builder to edit your page or post, you just need to click on Add Element and find Qode Twitter Feed.

Qode Twitter Feed SC

The shortcode has the same general options as the Qode Twitter widget:

Qode Twitter Feed SC Settings

In the Design Options tab, some additional options allow you to alter the design of your tweets. Here you can change the author name color, screen name and date color, and the color of your text.

Qode Twitter Feed SC Design Options

Finally, here’s an example of how your tweets will be displayed in the Bridge theme for WordPress.

Qode Twitter

Wrapping Up

That concludes our guide on how to display tweets on your WordPress website – including how to do it using one of the Qode Interactive themes. No matter which method you decide to use, adding tweets to your website can keep your audience engaged with your content and can help strengthen the influence of your brand. Just make sure that the tweets you choose are relevant to your website’s topics and scope, and that they offer something fresh and valuable to your visitors.

Post your comment

Comments0