如何使用jQuery/JSON/oembed嵌入来自URL的推文

Question

我非常困难地找到一种方法在网页中动态地嵌入一个 Twitter推文。理想情况下，我希望用户输入Twitter状态的URL（如https://twitter.com/robdelaney/status/329651129988288514），点击按钮，然后推文就会嵌入到一个div中。

目前为止，以下是我的工作结果：

$(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响应，其中包含嵌入推文所需的全部HTML代码，但是当我尝试解析它时，无法在我的div中获取任何内容。有谁能指导我正确的方向？

- Adamjstevenson

Answer 1

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

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

$(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);
        }
      });
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id=retweet_form_url value="https://twitter.com/robdelaney/status/329651129988288514" />

<button id=resolve>resolve</button>

<div id=tweet_details></div>

- Paul Roub

---

我相信这个答案已经不再有效了。代码片段无法运行。有人可以确认吗？ - subdavis

无论是登录到 Twitter 还是在隐身窗口中，它对我来说仍然可以运行。 - Paul Roub

https://api.twitter.com/1/statuses/oembed.json?url="Twitter的旧URL已经失效，请使用以下新URL：https://publish.twitter.com/oembed?url=例如：https://publish.twitter.com/oembed?url=https://twitter.com/iamsrk/status/947915219648487424 - dharmx