2

我正在尝试在网页中包含渲染的推文。我四处寻找，最终得到了这个解决方案：

<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

<script type='text/javascript'>
$(document).ready(function(){
    $.getJSON("https://api.twitter.com/1/statuses/oembed.jsonid=287348974577385474&align=center&callback=?",
        function(data{$('#tweet123').html(data.html);});
});
</script>


<div id="tweet123"></div>

现在，这只是给我推文文本。我想要漂亮呈现的推文，就像我在这里看到的那样：https ://dev.twitter.com/docs/embedded-tweets

我想我应该提到我想要制作的页面上的其他地方有 jquery。我想如果我需要这样做以使渲染工作，我可以将其删除。但我宁愿不要。

编辑：页面看起来像这样，我对渲染不满意： 没有按照我想要的方式呈现

编辑：我现在的代码，请耐心等待我对网络编程几乎一无所知：

<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="../supporting_data/seaofclouds-tweet-d433d14/tweet/jquery.tweet.js" type="text/javascript"></script>
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA4aH3NUbCC-DiqD1hUcsy6EMPmqDgn-Yo&sensor=false"></script>

<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

<script type='text/javascript'>
jQuery(function(){
    $.getJSON("https://api.twitter.com/1/statuses/oembed.json?id=287348974577385474&align=center&callback=?,
        function(data{$('#tweet123').html(data.html);});
});
</script>

</head>

<body>



<p>
<div id='tweet123'></div>  
</p>


<!-- experiment with seaofclouds -->
        <script type='text/javascript'>
            jQuery(function($){
                $(".coffeeTweet").tweet({
                    username: "coffee_dad",
                    join_text: "auto",
                    avatar_size: 32,
                    count: 5,
                    loading_text: "downloading tweets..."
                });
            });
        </script>
<p>
<div class="coffeeTweet"></div>
</p>

</body>
</html>
4

3 回答 3

3

首先，您可以尝试更改//platform.twitter.com/widgets.js为http://platform.twitter.com/widgets.js

编辑：

以下工作在我的电脑上。

<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<script type='text/javascript'>
$(document).ready(function(){
    $.getJSON("https://api.twitter.com/1/statuses/oembed.json?id=287348974577385474&align=center&callback=?",
        function(data){$('#tweet123').html(data.html);});
});
</script>

</head>

<body>



<div id='tweet123'></div>  



</body>
</html>

HTML 输出

编辑： 我正在从我计算机上的本地 Web 服务器运行此网页。如果我只是使用file:///协议在浏览器中打开文件，我会得到与您相同的结果。

file:///我会尝试在 Web 服务器上运行该文件，因为出于安全原因，您的浏览器通常会在协议下限制某些操作。

于 2013-01-24T02:09:40.950 回答
0

我假设您还需要包含关联的 css，这些 css 用于设置来自 twitter 的此标记的样式。

于 2013-01-24T00:15:05.187 回答
0

如果您想要完全呈现的推文，则必须使用此处找到的方法嵌入它：https ://dev.twitter.com/docs/embedded-tweets

于 2013-01-24T00:18:37.303 回答