Как встроить твит из URL с помощью jQuery/JSON/oembed

Мне очень трудно найти способ добавьте твит в веб-страницу динамически. В идеале, я хотел бы, чтобы пользователь ввел URL-адрес статуса Twitter (например,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, я получаю ответ JSON из Twitter, чем включает весь HTML, необходимый для добавьте твит, но когда я пытаюсь разобрать его, я не могу получить ничего, чтобы появиться в моем div. Кто-нибудь может указать мне правильное направление?

8
jquery json twitter

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>
7