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.