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

Question

在我的网站上，用户注册时输入他们的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>

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

TWITTER小部件：该小部件已过时，将很快停止运行。 https://twitter.com/support/status/307211042121973760

TWITTER小部件：您可以从https://twitter.com/settings/widgets/new/user?screen_name=electricpicnic获得新的升级小部件。

似乎我不应该使用此小部件，而应该使用嵌入式时间线。但是，文档似乎建议为要嵌入页面的每个用户在设置页面上的小部件部分设置一个小部件。Twitter会提供代码以将此时间线嵌入您的页面，但是此代码包含一个属性data-widget-id =“275025608696795138”，该属性对于每个用户都有不同的值。

显然，这种方法对我来说行不通，因为我无法为所有用户（现有和未来的）设置小部件并存储每个用户的data-widget-id。是否有一种非过时的方法可以嵌入时间线，允许我在运行时提供Twitter用户名？

更新

根据Twitter开发人员讨论组中的这篇帖子，目前不提供此功能，但将在将来版本中提供。

- Dónal

Answer 1

Twitter正在废弃未经身份验证的小部件。你将不能再使用它们了。

但是，Twitter有一个API可以调用，你可以生成自己的自定义推文时间轴UI，而不必使用他们的小部件。有一个UI的示例，请参见http://tweet.seaofclouds.com/。

但你也要知道，你不能直接从Javascript调用他们的API，因为他们的API具有OAuth。你只能从服务器端代码（我不知道你现在使用的是什么，PHP/Ruby/Python/Java？）调用他们的API。好消息是，OAuth是一种开放标准，你可以使用任何语言调用他们的API。这里是同样的小部件的示例，但它使用PHP调用API获取数据。这是一个长期的解决方案。

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

- Subhas

Answer 2

使用新的Twitter小部件，您可以从自己的帐户（例如YourName）创建一个经过身份验证的Twitter小部件。 然后设置要显示的用户的data-screen-name（例如“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>

- Jeroen K

Answer 3

这里有一些 JavaScript 代码，您可以使用它来在网页中嵌入用户的时间线

添加脚本 https://www.tweetjs.com/tweetjs.js

然后添加以下代码：

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

...虽然我建议使用更好的样式 :)

- Fiach Reid

Answer 4

这是我使用它的方式，感觉相当不错。

HTML：

    <ul id="twitter_update_list">
    </ul>

脚本：

<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片段。 http://jsfiddle.net/rahulsv/8fRTD/ 更新：

自Twitter更新到v1.2以来，此解决方案不再适用-无法未经授权访问推文。

- theunexpected1

---

不需要 API 密钥/密钥，因为这是未经授权的公共推文访问。 - theunexpected1

这个解决方案不再适用，因为Twitter已经关闭了未经授权的访问。 - Dónal

是的，我刚学会了，但是需要在很多地方反映这些更改 :( .. 所以没有未经授权的访问，您将不得不实现一个API方法来获取您的用户访问令牌。 - theunexpected1