Post
Ask Question

Add Twitter Feed in Your 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.

  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.