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">
  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) {
  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. }
  13. var notNumeric = function (n) {
  14. return isNaN(parseFloat(n)) && isFinite(n);
  15. };
  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. };
  25. var embedCss = function (doc, url) {
  26. var link = createCssElement(doc, url);
  27. var head = doc.getElementsByTagName("head")[0];
  28. head.appendChild(link);
  29. };
  31. var contains = function (haystack, needle) {
  32. return haystack.indexOf(needle) >= 0;
  33. };
  35. var isTwitterFrame = function (frame) {
  36. return frame.frameElement.id.indexOf('twitter-widget') >= 0;
  37. }
  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. }
  58. if (framesWithStyles.length < widgetCount) {
  59. setTimeout(function () {
  60. evaluate(framesWithStyles);
  61. }, timeoutLength);
  62. }
  63. }
  65. if (data.url === undefined) {
  66. console.log("need to specify a link to your CSS file. quitting");
  67. return;
  68. }
  69. var widgetCount;
  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. }
  83. setTimeout(function () {
  84. evaluate([], widgetCount, timeoutLength);
  85. }, timeoutLength);
  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"));
  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. }
  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: