6

If I register a widget on Twitter, I get the following code:

<a class="twitter-timeline" href="https://twitter.com/vinto60utd" data-widget-id="283564783750483968">Tweets by @vinto60utd</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id))>>>{js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}>(document,"script","twitter-wjs");</script>

If I put this code as it is on my page, I see the Twitter widget as I wanted. How do I render my widgets dynamically or on the execution of some event (like button click)?

Vivek Jain
  • 3,811
  • 6
  • 30
  • 47
Vinit Gaikwad
  • 329
  • 9
  • 21

4 Answers4

15

use 

twttr.widgets.load();

if you have loaded //platform.twitter.com/widgets.js already

In my situation I doing like this: replacing content of some empty or previously timeline filled block to new link like yours

<a class="twitter-timeline" href="https://twitter.com/vinto60utd" data-widget-id="283564783750483968">
    Tweets by   @vinto60utd</a>

then I call twttr.widgets.load(); and twitter do the rest.

Andrew
  • 151
  • 1
  • 4
  • Best answer ever! Thank you! :D – Ravi Dhoriya ツ Sep 08 '15 at 17:33
  • 1
    be careful with this as script will search through entire DOM model for elements to change. For sake of better performance use twttr.widgets.load(document.getElementById("YourIDOfElement")); – st35ly Nov 03 '17 at 03:27
3

Change

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

To

function twit(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}
twit(document,"script","twitter-wjs");
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • Tweets about "#akbarsreign" – Vinit Gaikwad Jan 27 '13 at 08:43
  • I want to just change the data widget id dynamically to render different widget registered on my twitter id...but somehow unable to do it? – Vinit Gaikwad Jan 27 '13 at 08:45
  • I do not understand what you mean – mplungjan Jan 27 '13 at 08:46
  • I have number of widget registered(already created) on my twitter page. I want to show a specific widget for a specific event on my html page. – Vinit Gaikwad Jan 27 '13 at 08:48
  • Then I suggest iFrames since the code obviously relies on both user name and widget ID – mplungjan Jan 27 '13 at 11:57
1

you can have a single data-widget-id and filter out any tweet message feed by just adding, 

    data-screen-name="AnyTwitterName"

for an example

     <a class="twitter-timeline"  data-widget-id="6596840392xxxxxxxx"  data-screen-name="AnyTwitterName" ></a>
NethmiHettiarachchi
  • 41
  • 3
-1

You can create widgets at run-time using Twitter for Websites JS.

https://dev.twitter.com/web/embedded-timelines

ibrahim
  • 84
  • 1
  • 3