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.

  1. <div> <a class="twitter-timeline" href="https://twitter.com/atultajrawat" data-widget-id="711475893395283971">Tweets by @atultajrawat</a>
  2. <script>
  3. ! function(d, s, id)
  4. {
  5. var js, fjs = d.getElementsByTagName(s)[0],
  6. p = /^http:/.test(d.location) ? 'http' : 'https';
  7. if (!d.getElementById(id))
  8. {
  9. js = d.createElement(s);
  10. js.id = id;
  11. js.src = p + "://platform.twitter.com/widgets.js";
  12. fjs.parentNode.insertBefore(js, fjs);
  13. }
  14. }(document, "script", "twitter-wjs");
  15. </script>
  16. </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",

  1. <div> <a class="twitter-timeline" href="https://twitter.com/atultajrawat" data-widget-id="711475893395283971" data-tweet-limit="2">Tweets by @atultajrawat</a>
  2. <script>
  3. ! function(d, s, id)
  4. {
  5. var js, fjs = d.getElementsByTagName(s)[0],
  6. p = /^http:/.test(d.location) ? 'http' : 'https';
  7. if (!d.getElementById(id))
  8. {
  9. js = d.createElement(s);
  10. js.id = id;
  11. js.src = p + "://platform.twitter.com/widgets.js";
  12. fjs.parentNode.insertBefore(js, fjs);
  13. }
  14. }(document, "script", "twitter-wjs");
  15. </script>
  16. </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:
  1. <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:

output

Summary

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