Display Recent Tweets In Blogger With Twitter Widgets

How To Display Recent Tweets In Blogger With Twitter Widgets?

Are you a running a blog or running any type of website?

That might you have Twitter account too.

Twitter is one of the most engaging social media on this planet. It’s a great way to keep monitor with recent trend, interact with your reader, and help other users. But most important it gives visitors a even during periods when you’re not publishing new blog posts. Think about that if you add recent tweets in your blog to create an interactive environment where it makes sense about your website, readers can follow the author, reply to the tweet directly from your website. So what you are waiting for, let's get started.

In this article, we will show you how to display recent tweets in Blogger / Blogspot using official recent tweets twitter widget. It is going to so simple that you might do it in one hand just follow these below steps.

Display Recent Tweets In Blogger With Twitter Widgets

Step-1

First thing is go to Create A New Embedded User Timeline Page. Then login with your Twitter account, if you are already logged in just go to Step-2.

Step-2

Now By default, the width of the widget is automatically adjusted so you don’t need to worry about that. There are a few options to set height, select either light or dark theme, Auto-expand photos, Exclude replies etc. Once ready with the widget appearance, and then click on “create widget” button.

Step-3

Copy the code which appear after you clicked on “create widget” button and paste these code in HTML/JavaScript widget in blogger blog.

Step-4

To add this go to Blogger Dashboard >> Layout, then click on Add a Gadget from the sidebar. Select HTML/JavaScript widget and paste the code inside content box, hit Save button.

Above you can see the live preview of recent tweets widget. If you do it correctly, you can see the live view of tweets in your blogger sidebar.

If you want to add it in any other area of your site such as a Blogger post or page, then simply copy the code and paste the widget code in your post editor by clicking on HTML tab see the image below!

Whats More ?

Twitter widgets not only allows you to display the latest Tweets from a single Twitter account, but also it allow you to show multiple accounts tweets, your liked tweets, lists, and a hashtag or search keyword. Configuration is so simple just by selecting your favorite tweets, lists, hashtag, etc.

For Search, you need to add the hashtag that you want to display.

Parameter Reference

Parameter simply known as options, by using this you can customize your embedded timeline. Just add with data-* attributes to your twitter widget code. For example I want only 5 recent tweets to show in my embedded timeline to do so.

First go to the Parameter Reference Page, find tweet-limit in the page. It looks like this! tweet-limit >> Display an expanded timeline of between 1 and 20 Tweets. Look at the code before tweet-limit parameter added.

<a class="twitter-timeline" href="https://twitter.com/marketer1032" data-widget-id="701304144158597120">Tweets by @marketer1032</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Just add parameter data-tweet-limit="5" to the above code.

<a class="twitter-timeline" href="https://twitter.com/marketer1032" data-widget-id="701304144158597120" data-tweet-limit="5">Tweets by @marketer1032</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

See the live preview how it look like after adding data-tweet-limit="5".

Enjoy.

I hope you found this article very helpful. Please share it to your friends and subscribe to our blog to get latest updates from us.