How to Add Twitter Timeline Widget to a WordPress Powered Website?
Embedded timelines allow you to display any recent Twitter feeds onto your blog from a single or multiple Twitter accounts. That means, audiences can easily find tweets of interest without clicking through the original website.
In the further, there are four types of timeline widgets, including “User Timeline”, “Favorites”, “List” and “Search”. Here, we will teach you how to embed all those mentioned timelines to WordPress sidebar and post content.
Step 1 – Create a New Twitter Widget
To start, login onto your Twitter account and go straight to the “Settings” section by clicking the upper-right gear icon. Then, locate and click on “Widgets” from the left-hand menu. Just press the “Create New” button.
Step 2 – Choose Settings for Your Widget
From here, you are allowed to create a set of different Twitter widgets, including “User Timeline”, “Favorites” and “List”. For this example, we’re going to use the default “Timeline” widget, along with an inbuilt “Follow” button.
In the “Configuration” column, simply specify these options:
- Username – Enter your Twitter username after “@”. This is meant for a “Follow @username” button that allows visitors to follow your account with one click.
- Options< – Select “Exclude replies”, “Auto-expand photos” or both. This is quite self-explanatory.
- Height – Input a specific height (in pixels) for your widget timeline. The default vale is “600”, which normally displays two or three recent tweets on your website.
- Theme – Choose between a light and dark colour themes for the timeline. This is up to your blog’s theme.
- Link Colour – Pick another link colour other than the default “Blue” to better match your theme.
To access more advanced visual options, just click the orange “Customization Documentation” link. After done with all settings, do hit “Save Changes”. Remember to make a note of the shortcode that shows up in a small box.
Here, we need to mention that you can only decide whether to showcase the reply box and whether to enlarge the photos, as well as decide the height, theme, and link color during the widget creation process. Some other factors need to be modified from the coding stuff using the related attributes.
- Width: width=”px”.
- Chrome: data-chrome=””. You can choose among “noheader”, “nofooter”, “noborders”, “noscrollers”, and “transparent”.
- Border color: data-border-color=””.
- Tweets limitations: data-tweet-limit=””.
Step 3 – Add Twitter Timeline Widget to WordPress Sidebar
Next, login to the WordPress dashboard and jump into “Appearance” > “Widgets” as below. Drag and drop the bottom “Text” widget to the right-hand “Widget Area”. Meanwhile, name this text widget and paste the code from Step 2.
Also, there is an option to “Automatically Add Paragraphs”. Make sure that you would press the “Save” button before previewing changes.
Important to Note: If successful, you’ll see a live preview of the most recent tweets. The good thing of Twitter is that you can add favourite lists, tweets, hashtags and search keywords to the timeline. To do so, go back this Twitter Widgets page and click other tabs like “List”, “Favorites” and “Search”. The remaining steps are almost the same as the “User Timeline” widget, and you only need to choose the list and hashtag to use.
Step 4 – Embed Twitter Timeline Widget with a Shortcode
Alternatively, you can embed the “Twitter Timeline” into a post/page with ease. This only requires you to copy and paste the following configuration code inside the post editor. Be sure to adjust the id and username to your “Twitter Widget ID” and “Handle”, without this “@” symbol. Once done, just refresh your website to see the Twitter timeline in action.
[twitter-timeline id=1324 username=HowsHosting]
Best WordPress Plugins for Twitter Widgets
For those lacking technical skills but still want to incorporate real-time Tweets into WordPress, it’s better to use easier solutions like plugins. Following are best WordPress plugins for Twitter widgets:
WP Twitter Feeds
WP Twitter Feeds is a minimalistic Twitter widget solution that lets you add tweets to the WordPress sidebar, without having to copy and paste any widget code. More importantly, there are many optional features to be enabled, including Twitter intents, avatar and screen name. The caching date and time can also be further specified.
Download URL: https://wordpress.org/plugins/wp-twitter-feeds/
Jetpack by WordPress.com
Out of hundreds of thousands of widget plugins, Jetpack by WordPress.com is the official one that is provided by Twitter. This WP plugin not only includes a Twitter timeline widget, but also offers you a wealth of layout styling options. For example, it comes packaged with transparent background, border color, and the option to remove the footer and header.
Download URL: https://wordpress.org/plugins/jetpack/
Simple Twitter Tweets
As is implied, the Simple Twitter Tweets is such a simple plugin that automatically stores tweets in your database. That means, there will never come a day when your widgets are blank, even the Twitter API fails. It is possible to display profile avatar and a “Follow” button with exact follow count included.
Download URL: https://wordpress.org/plugins/simple-twitter-tweets/
Recent Tweets Widget
If you’re looking for a minimal Twitter widget, then the Recent Tweets Widget is the option for you. By using the new Twitter API v1.1, it stores your tweets in the cache without the need to read status message from the database. Above all, the number of tweets to be displayed and the number of hours to be cached can be defined.
Download URL: https://wordpress.org/plugins/recent-tweets-widget/
- How to Add a Twitter Tweet Button on Your Site for Better…
- Best Twitter Plugins for WordPress Sites
- How to Create a WordPress Timeline for Important Events
- How to Add the “Select Text and Share on Twitter” Button
- How to Display the Pay With A Tweet Button in WordPress
- How to Easily Share Instagram Photos in WordPress
- How to Display Recent Comments in the Sidebar of a WordPress
- How to Add Social Media Icons to Your WordPress Footer or…