jqueryui - Carga dinámica del widget de Twitter usando jquery
jquery ui widget (1)
(Aunque el widget JS carga ahora de forma asíncrona).
Estoy trabajando en un sitio web donde queremos un pequeño logotipo de Twitter en la esquina, que cuando se haga clic mostrará el widget estándar de Twitter en una caja que sobresale del pequeño logo de 24x24 (y se alterna para esconderse).
Logré hacerlo bien con jquery, pero me di cuenta de que es bastante lento, y pensé que como la mayoría de la gente no haría clic en esta imagen, el widget debería cargarse dinámicamente solo si era necesario.
Pero parece que llegué al final de mi limitada experiencia en jquery, por lo que agradecería algo de ayuda.
Mi intento hasta ahora:
<div id = "twittertoggle"><img src="images/Twitter_logo.png" alt="David''s Twitter feed" id="twibble" /></div>
<div id = "twitterwidget">Widget to go in this DIV.</div>
<script language="javascript" >
$(''#twitterwidget'').hide(); // hide the container DIV on load
$(''#twibble'').bind(''click'', function() { // event for clicking on the twitter logo
$(''#twitterwidget'').toggle(); // toggle show or hide the widget container DIV
$.getScript(''http://widgets.twimg.com/j/2/widget.js'', function() { // attempt to load the JS for the widget
$.getScript(''twitterwidget.js''); // fail horribly.
});
});
</script>
Coloqué el siguiente código en el archivo ''twitterwidget.js'':
new TWTR.Widget({
version: 2,
type: ''profile'',
rpp: 4,
interval: 6000,
width: 320,
height: 340,
theme: {
shell: {
background: ''#b0b0b0'',
color: ''#ffffff''
},
tweets: {
background: ''#f7f4f7'',
color: ''#474647'',
links: ''#a16d99''
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: ''all''
}
}).render().setUser(''TWITTERUSERNAME'').start();
He intentado muchas, muchas formas diferentes de hacer que esto funcione (probablemente de 2 a 3 horas), pero ahora estoy completamente atascado, por lo que algunos consejos serán apreciados, ¡gracias!