Add Twitter Feed in Your Website Using Widgets

In this blog, we will learn how we can add a Twitter feed in our website using widgets.

Introduction

Let’s start step by step to add the Twitter feed in our web site.

Step 1: Log in to your Twitter after that go in your Twitter settings, find the widget in your left side template.

Step 2: Click on widgets. After that you will see a create new button.

Step 3: Click create button you will see the configuration of your Twitter.

You configuration contains your Twitter handle, height theme, and link color shown in the below snap.

Step 4: Click on create widget, after that the widget returns some HTML code, and copy and paste that code in your project. Shown in below snap.

<div> <a class="twitter-timeline" href="https://twitter.com/atultajrawat" data-widget-id="711475893395283971">Tweets by @atultajrawat</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>
</div>

Output of above code,


In above figure you saw number of feed is 10. If you maintain the number of feeds add attribute “data-tweet-limit”. Here I will set the limit to two.

data-tweet-limit="2",

<div> <a class="twitter-timeline" href="https://twitter.com/atultajrawat" data-widget-id="711475893395283971" data-tweet-limit="2">Tweets by @atultajrawat</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>
</div>

Output of Above Code:



Step 5: We can add another Twitter handle with the help of "data-screen-name" Attribute here we will add Twitter handle of C# corner, after that we will see the Twitter feed of CsharpCorner code shown below:

<a class="twitter-timeline" href="https://twitter.com/atultajrawat" data-widget-id="707173253450608640" data-screen-name="CsharpCorner">Tweets by @atultajrawat</a>

Output of Above Code:

Summary

In this blog we learned about widgets and adding a Twitter feed to  our web site with the help of a widget.