Post
Ask Question

Twitter Timeline Widget

Here is a simple code to get a Twitter widget. Firstly, all we need to get is the Twitter widget id.

So follow these steps to get widget id from twitter.
 
Step 1: Create an account on Twitter if you don't have one and login on Twitter.
 
Step 2: Go to Settings
 
  
Step 3: Click on widget in left bottom.
 
 
 
Step 4:  Click on Create new button as follows: 
 
 

Step 5: Click on Create widget button.
 
 
Step 6: Finally your widget has been created and you will get the widget id as follows:
 
 
  1. <input type="hidden" id="HiddenWidgetKey" value="your budget-id" /> <%--like xxx176400881455xxx--%>  
  2.  <span class="normalGray">Twitter handle</span>  
  3.  <asp:TextBox ID="TextBoxTwitterhandle" runat="server" Style="width: 350px;" placeholder="Enter TwitterTwitter handle"  
  4.      CssClass="textBox" TabIndex="120" ClientIDMode="Static">  
  5.   
  6.  </asp:TextBox>  
  7.  <input type="button" name="save" value="Save" onclick="GetResult();" />  
  8.  <div id="tweetBtn">  
  9.  </div>  
  10.  <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
  11.  <script src="<%= ResolveUrl("~/Scripts/Twitter/customize-twitter.js")%>" type="text/javascript"></script>  
  12.  <style>  
  13.      .HeadingPinkSummary  
  14.      {  
  15.          color: #D9509C;  
  16.          font-size: 19px;  
  17.      }  
  18.  </style>  
Customize-twitter.js:
  1. var CustomizeTwitterWidget = function (data) {  
  2.     
  3.     if (!(window.console && console.log)) {  
  4.         console = {  
  5.             log: function () { },  
  6.             debug: function () { },  
  7.             info: function () { },  
  8.             warn: function () { },  
  9.             error: function () { }  
  10.         };  
  11.     }  
  12.   
  13.     var notNumeric = function (n) {  
  14.         return isNaN(parseFloat(n)) && isFinite(n);  
  15.     };  
  16.   
  17.     var createCssElement = function (doc, url) {  
  18.         var link = doc.createElement("link");  
  19.         link.href = url;  
  20.         link.rel = "stylesheet";  
  21.         link.type = "text/css";  
  22.         return link;  
  23.     };  
  24.   
  25.     var embedCss = function (doc, url) {  
  26.         var link = createCssElement(doc, url);  
  27.         var head = doc.getElementsByTagName("head")[0];  
  28.         head.appendChild(link);  
  29.     };  
  30.   
  31.     var contains = function (haystack, needle) {  
  32.         return haystack.indexOf(needle) >= 0;  
  33.     };  
  34.   
  35.     var isTwitterFrame = function (frame) {  
  36.         return frame.frameElement.id.indexOf('twitter-widget') >= 0;  
  37.     }  
  38.   
  39.     /** 
  40.     * The main event loop - calls itself if we haven't found all of the frames 
  41.     * yet. 
  42.     */  
  43.     var evaluate = function (framesWithStyles, widgetCount, timeoutLength) {  
  44.         for (var i = 0; i < frames.length; i++) {  
  45.             try {  
  46.                 if (isTwitterFrame(frames[i]) &&  
  47.                     !contains(framesWithStyles, frames[i].name)  
  48.                 ) {  
  49.                     embedCss(frames[i].document, data.url);  
  50.                     framesWithStyles.push(i);  
  51.                 }  
  52.             } catch (e) {  
  53.                 console.log("caught an error");  
  54.                 console.log(e);  
  55.             }  
  56.         }  
  57.   
  58.         if (framesWithStyles.length < widgetCount) {  
  59.             setTimeout(function () {  
  60.                 evaluate(framesWithStyles);  
  61.             }, timeoutLength);  
  62.         }  
  63.     }  
  64.   
  65.     if (data.url === undefined) {  
  66.         console.log("need to specify a link to your CSS file. quitting");  
  67.         return;  
  68.     }  
  69.     var widgetCount;  
  70.   
  71.     if (data.widget_count === undefined || notNumeric(data.widget_count)) {  
  72.         widgetCount = 1;  
  73.     } else {  
  74.         widgetCount = data.widget_count;  
  75.     }  
  76.     var timeoutLength;  
  77.     if (data.timeout_length === undefined || notNumeric(data.timeout_length)) {  
  78.         timeoutLength = 300;  
  79.     } else {  
  80.         timeoutLength = data.timeout_length;  
  81.     }  
  82.   
  83.     setTimeout(function () {  
  84.         evaluate([], widgetCount, timeoutLength);  
  85.     }, timeoutLength);  
  86.      
  87. }  
Now write the javascript code as follows: 
  1. <script type="text/javascript">  
  2.         function GetResult() {  
  3.             GetTwitter();  
  4.         }  
  5.         window.twttr = (function (d, s, id) {  
  6.             var t, js, fjs = d.getElementsByTagName(s)[0];  
  7.             if (d.getElementById(id)) return; js = d.createElement(s); js.id = id;  
  8.             js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);  
  9.             return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } });  
  10.         } (document, "script", "twitter-wjs"));  
  11.   
  12.         var screenName = "";  
  13.         function GetTwitter() {  
  14.             screenName = jQuery("#TextBoxTwitterhandle").val();  
  15.             ReloadTwitterWidget();  
  16.             jQuery("#twitter-timeline").attr("data-screen-name", screenName)  
  17.             !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");  
  18.             var options = {  
  19.                 "url": '<%= ResolveUrl("~/Scripts/Twitter/twitter.css")%>'  
  20.             };  
  21.             CustomizeTwitterWidget(options);  
  22.         }  
  23.   
  24.         function ReloadTwitterWidget() {  
  25.             var widgetkey = jQuery("#HiddenWidgetKey").val();  
  26.             screenName = jQuery("#TextBoxTwitterhandle").val();  
  27.             jQuery('#tweetBtn iframe').remove();  
  28.             var html = " <a class='twitter-timeline' data-widget-id='" + widgetkey + "' data-screen-name='" + screenName + "' data-tweet-limit='10' id='twitter-timeline'  data-text=\"REPLACEME\" ></a>"  
  29.             jQuery("#tweetBtn").append(html);  
  30.             twttr.ready(function (twttr) {  
  31.                 twttr.widgets.load();  
  32.             });  
  33.         }  
  34.     </script>  
Output:  Now press f5,
 
 
Enter your twitter handle and click on save. 
 
 
 
Congrats! Your widget displayed as follows: 
 
 

Read more articles on jQuery:


Similar Articles