Загрузить виджет Twitter из загруженного ajax html?

Question

Я пытаюсь использовать довольно стандартный поиск твиттер виджет, прямо с сайта твиттер:

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

И она становится загружается так:

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

Он никогда не появляется, хотя, кажется, просто закройте экран и продолжайте загрузку навсегда. Идеи?

Answer 1

Был такой же вопрос. Проблема в том, что JS Twitter создает разметку с использованием document.write, который работает только во время создания документа. В противном случае он создаст новый документ.

Совет. В процессе отладки легче использовать исходный код на 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> 

Это мое решение. Добавьте параметр id, а Twitter добавит разметку к элементу с этим идентификатором (для этого используется верх div).

Примечание: у меня были проблемы с мини-версией их сценария, поэтому вместо этого я использовал http://twitter.com/javascripts/widgets/widget.js.

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