如何动态呈现新的 Twitter 小部件？答案

【问题标题】：How do I render new Twitter widget dynamically?如何动态呈现新的 Twitter 小部件？
【发布时间】：2013-01-10 19:47:18
【问题描述】：

如果我在 Twitter 上注册一个小部件，我会得到以下代码：

<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>

如果我将这段代码原样放在我的页面上，我会看到我想要的 Twitter 小部件。如何动态呈现我的小部件或在执行某些事件（如按钮单击）时呈现？

【问题讨论】：

您是否在代码中添加了一些 > 和 >>>？
是的，我确实将代码放在了一个块中......

标签： javascript jquery html twitter

【解决方案1】：

改变

!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");

到

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");

【讨论】：

twitter.com/search?q=%23akbarsreign" data-widget-id="293637027746942976">关于“#akbarsreign”的推文跨度>
我只想动态更改数据小部件 id 以呈现在我的 twitter id 上注册的不同小部件......但不知何故无法做到？
我不明白你的意思
我在我的推特页面上注册了（已经创建）的小部件数量。我想在我的 html 页面上显示特定事件的特定小部件。
然后我建议使用 iFrame，因为代码显然同时依赖于用户名和小部件 ID

【解决方案2】：

使用

twttr.widgets.load();

如果你已经加载了 //platform.twitter.com/widgets.js

在我的情况下，我这样做：将一些空的或以前时间轴填充的块的内容替换为像你这样的新链接

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

然后我打电话给twttr.widgets.load();，然后 twitter 完成剩下的工作。

【讨论】：

最佳答案！谢谢！ :D
对此要小心，因为脚本会在整个 DOM 模型中搜索要更改的元素。为了获得更好的性能，请使用 twttr.widgets.load(document.getElementById("YourIDOfElement"));

【解决方案3】：

您可以拥有一个数据小部件 ID，并通过添加过滤掉任何推文消息提要，

    data-screen-name="AnyTwitterName"

举个例子

     <a class="twitter-timeline"  data-widget-id="6596840392xxxxxxxx"  data-screen-name="AnyTwitterName" ></a>

【讨论】：

【解决方案4】：

您可以在运行时使用 Twitter for Websites JS 创建小部件。

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

【讨论】：