¿Cargar widget de Twitter desde html ajax cargado?

Question

estoy tratando de usar un widget bastante estándar de búsqueda de Twitter, directamente desde el sitio de Twitter:

<script src="http://widgets.twimg.com/j/2/widget.js"></script> 
<script> 
new TWTR.Widget({ 
    version: 2, 
    type: 'search', 
    search: '$AAPL', 
    interval: 6000, 
    title: 'AAPL', 
    subject: '', 
    width: 250, 
    height: 300, 
    theme: { 
    shell: { 
     background: '#8ec1da', 
     color: '#ffffff' 
    }, 
    tweets: { 
     background: '#ffffff', 
     color: '#444444', 
     links: '#1985b5' 
    } 
    }, 
    features: { 
    scrollbar: false, 
    loop: true, 
    live: true, 
    hashtags: true, 
    timestamp: true, 
    avatars: true, 
    toptweets: true, 
    behavior: 'default' 
    } 
}).render().start(); 
</script> 

y es cada vez cargado este modo:

$(".linktosymbol").bind("ajax:success", function(event, data, status, xhr) { 
    $(".symboldetails").html(""); 
    var target = $("#" + $(this).attr('data-target')); 
    target.html(data); 
}); 

Nunca aparece, sin embargo, parece simplemente ponga la pantalla en blanco y continúe cargando para siempre. Ideas?

Answer 1

Tenía el mismo problema. El problema es que Twitter JS crea el marcado utilizando document.write, que solo funciona mientras se está generando el documento. De lo contrario, creará un nuevo documento.

Consejo: Durante la depuración, es más fácil usar el código original en http://twitter.com/javascripts/widgets/widget.js.

<div id="twtr-widget"></div> 
<script src="http://widgets.twimg.com/j/2/widget.js"></script> 
<script> 
new TWTR.Widget({ 
    version: 2, 
    type: 'profile', 
    rpp: 4, 
    interval: 6000, 
    width: 500, 
    height: 300, 
    id: 'twtr-widget', 
    theme: { 
    shell: { 
     background: '#333333', 
     color: '#ffffff' 
    }, 
    tweets: { 
     background: '#000000', 
     color: '#ffffff', 
     links: '#4aed05' 
    } 
    }, 
    features: { 
    scrollbar: false, 
    loop: false, 
    live: false, 
    hashtags: true, 
    timestamp: true, 
    avatars: false, 
    behavior: 'all' 
    } 
}).render().setUser('Znarkus').start(); 
</script> 

Esa es mi solución. Agregue el parámetro id, y Twitter agregará el marcado al elemento con esa identificación (para eso es el div superior).

Nota: Tuve problemas con la versión minificada de su script, así que usé http://twitter.com/javascripts/widgets/widget.js en su lugar.

Answer 2

<script src="http://widgets.twimg.com/j/2/widget.js"></script> 
<script> 
new TWTR.Widget({ 
    version: 2, 
    type: 'profile', 
    rpp: 4, 
    interval: 6000, 
    width: 250, 
    height: 300, 
    theme: { 
    shell: { 
     background: '#333333', 
     color: '#ffffff' 
    }, 
    tweets: { 
     background: '#000000', 
     color: '#ffffff', 
     links: '#4aed05' 
    } 
    }, 
    features: { 
    scrollbar: true, 
    loop: false, 
    live: true, 
    hashtags: true, 
    timestamp: true, 
    avatars: true, 
    behavior: 'all' 
    } 
}).render().setUser('roby_jazz').start(); 
</script> 

Answer 3

$('#Twitter').click(function (e) { 
    $.getScript 
    (
     "http://widgets.twimg.com/j/2/widget.js", 
     function() { 
     makeTwitterWidget(); 
     } 
    ); 
}); 

function makeTwitterWidget() { 
new TWTR.Widget 
    (
     { 
      version: 2, 
      type: 'profile', 
      rpp: 3, 
      interval: 3000, 
      width: 'auto', 
      height: 300, 
      id: 'twtr-widget', // id of DIV 
      theme: 
     { 
      shell: 
       { 
        background: '#ff0000', 
        color: '#ffffff' 
       }, 
      tweets: 
       { 
        background: '#ffffff', 
        color: '#000000', 
        links: '#ff0000' 
       } 
     }, 
      features: 
      { 
       scrollbar: false, 
       loop: true, 
       live: true, 
       hashtags: true, 
       timestamp: true, 
       avatars: false, 
       behavior: 'default' 
      } 
     } 
    ).render().setUser('sohelelite').start(); 
}