Javascript 在网页中嵌入Twitter用户时间线

在我的网站上，用户在注册时输入他们的Twitter用户名，他们的时间线嵌入到他们的个人资料页面中。到目前为止，我已经通过以下JavaScript代码实现了这一点：

<script type="text/javascript">

    var twitterUsername = // read from database

    new TWTR.Widget({
        version: 2,
        type: 'profile',
        rpp: 4,
        interval: 30000,
        width: 'auto',
        height: 210,

        features: {
            scrollbar: true,
            loop: false,
            live: false,
            behavior: 'all'
        }
    }).render().setUser(twitterUsername).start();
</script>

var twitterUsername=//从数据库读取
新TWTR.Widget({
版本：2，
键入：“配置文件”，
rpp:4，
间隔时间：30000，
宽度：“自动”，
身高：210，
特点：{
滚动条：对，
循环：false，
生活：假，
行为：“全部”
}
}).render（）.setUser（twitterUsername）.start（）；

最近，我注意到JavaScript控制台中出现了以下消息

TWITTER小部件：此小部件已被弃用，并将很快停止运行

TWITTER小部件：您可以从

似乎我不应该使用这个小部件，而应该使用嵌入式时间线。但是，文档似乎建议，为了在页面中嵌入时间线，您需要转到，并为希望嵌入其时间线的每个用户设置一个小部件。Twitter为您提供了将在页面中嵌入此时间线的代码，但此代码包含一个属性

data widget id=“275025608696795138”

，该属性对每个用户具有不同的值

显然，这种方法对我不起作用，因为我不可能为所有用户（现在和将来）设置一个小部件，并为每个用户存储一个

数据小部件id

。是否有一些非弃用的方法可以嵌入时间线，允许我在运行时提供Twitter用户名

更新

---

根据Twitter开发人员讨论组中的信息，此功能目前不可用，但将在未来版本中提供。

Twitter正在弃用其未经验证的小部件。您将无法再使用这些

但是Twitter有一个API，您可以调用它，并且您可以生成自己的自定义tweet timeline UI，而无需使用他们的小部件。有关UI的示例，请参见

但是您还必须知道，您不能直接从Javascript调用他们的API，因为他们的API有OAuth。您只能从服务器端代码调用它们的API（我不知道您现在使用的是什么，PHP/Ruby/Python/Java？）。好消息是，OAuth是一个开放标准，您可以使用任何语言调用它们的API，但是它通过使用PHP调用API来获取数据。这是一个长期的解决办法

---

如果Twitter时间线对你的网站至关重要，那么你必须走API的路。您必须，然后使用OAuth获取用户的时间线数据，并使用该数据呈现javascript小部件。

我就是这样使用它的，感觉相当不错。

HTML:

脚本：

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="https://api.twitter.com/1/statuses/user_timeline.json?screen_name=theunexpected1&callback=twitterCallback2&count=10"></script>

注意发送到脚本的“screen_name”变量。 您可以自定义回调函数（blogger.js），也可以在本地保存此文件以避免外部请求

希望这是有用的

作为参考，我在这里创建了一个jsfiddle，您也可以从那里获取CSS片段。

更新：

---

自从Twitter更新到1.2版后，此解决方案不再有效-禁止未经授权访问推特。

使用新的推特小部件，从您自己的帐户（例如YourName）验证推特小部件。 然后设置要显示的用户的数据屏幕名称（例如“twitterUsername”），结果如下：

<a class='twitter-timeline'  href='https://twitter.com/YourName'  
   data-widget-id='your-widget-id' 
   data-screen-name='twitterUsername'>Tweets by @twitterUsername</a>

<script>!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');</script>

!函数（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'）；

这里有一点javascript，您可以使用它在网页中嵌入用户的时间线

添加脚本

然后添加代码：

   TweetJs.ListTweetsOnUserTimeline("PetrucciMusic",
    function (tweets) {
        for(var i in tweets)
        {
            document.write(tweets[i].text + "<br>");
        }
    });

TweetJs.ListTweetsOnUserTimeline（“PetrucciMusic”，
功能（推特）{
for（tweets中的var i）
{
document.write（tweets[i].text+“
”；
}
});

---

。。。尽管我建议使用更好的样式：）

不，这是一种未经授权的tweet公共访问，因此不需要API密钥/机密。此解决方案不再有效，因为Twitter已关闭未经授权的访问。是的，我刚刚了解到，它必须反映许多地方的变化：（…因此没有未经授权的访问，您必须实现一个API方法来获取用户的访问令牌。

   TweetJs.ListTweetsOnUserTimeline("PetrucciMusic",
    function (tweets) {
        for(var i in tweets)
        {
            document.write(tweets[i].text + "<br>");
        }
    });