如何使用jQuery / JSON / oembed从URL嵌入推文

How to embed a tweet from URL using jQuery/JSON/oembed

我很难找到一种方法来将推文动态地嵌入到网页中。理想情况下，我想让用户输入Twitter状态URL(例如https://twitter.com/robdelaney/status/329651129988288514)，单击一个按钮，然后将tweet嵌入div。

这是到目前为止我得到的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(document).ready(function(){
$("#resolve").click(function(){
var url = $("#retweet_form_url").val();
if (url==""){
$(".controls").addClass("error");
}
else {
$("#tweet_div").show();
$.ajax({
url:"https://api.twitter.com/1/statuses/oembed.json?url="+url,
dataType:"jsonp",
success: function(data){
// Derp! What do I do here?
}
});
}
})
})

当我使用URL进行测试时，确实从Twitter返回了JSON响应，而不包括嵌入该tweet所需的整个HTML，但是当我尝试对其进行解析时，我的div中没有??任何内容。谁能指出我正确的方向？

data是一个包含推文详细信息的对象，其中包括一个包含实际嵌入代码的html成员。因此：

1
2
3
4
5

// ...
success: function(data){
$("#tweet_div").html(data.html);
}
// ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$(document).ready(function() {
$("#resolve").click(function() {
var url = $("#retweet_form_url").val();
if (url =="") {
$(".controls").addClass("error");
} else {
$("#tweet_div").show();
$.ajax({
url:"https://api.twitter.com/1/statuses/oembed.json?url=" + url,
dataType:"jsonp",
success: function(data) {
$('#tweet_details').html(data.html);
}
});
}
})
})

1
2
3
4
5