HTML/CSS para el widget de Twitter ancho

Question

El código Twitter le da a pegar en el HTML es el siguiente:

<a class="twitter-timeline" href="https://twitter.com/username" data-widget-id="248169276782018560">Tweets by @username</a> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 

Ellos le permiten establecer una altura, la cual di a 600. Cuando se coloca en mi sitio Lo entiendo (cuando veo la fuente):

<iframe id="twitter-widget-6" classname="twitter-timeline twitter-timeline-rendered" scrolling="no" frameborder="0" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " width="220" height="600"></iframe> 

El ancho de 220 es lo que me está matando. Quiero que el ancho sea el ancho total del contenedor, que es 100% (para un sitio móvil). Actualmente, el ancho de 220 va un poco más de la mitad de la página y muestra una fea barra de desplazamiento.

Entonces, ¿por qué está configurando el ancho a 220, y cómo puedo hacer que se expanda al ancho de su matriz?

Answer 1

Intente cambiar width="220" a width="220" a width="100%".

Answer 2

Esto funcionó para mí ...

#twitter-widget-6{ 
     width:600px; 
    } 

Answer 3

utilizo un tema sensible y el código CSS funciona bien. Gracias Hjuster.

#twitter-widget-0 { 
     width: 100% !important; 
    } 

Answer 4

Puede cambiar el ancho del widget fijando su valor en la definición de clase "twitter-línea de tiempo", como se ha mencionado aquí:

https://dev.twitter.com/docs/embedded-timelines

Por ejemplo, un widget de Twitter línea de tiempo con un ancho 280 y 300 de altura es algo a lo largo de las líneas de:

<a class="twitter-timeline" width="280" height="300" href="https://twitter.com/YOURTWITTERUSERNAMEHERE" data-widget-id="YOURWIDGETIDHERE">Tweets by @YOURTWITTERUSERNAMEHERE</a> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 

Answer 5

#twitter-widget-6 { 
    width:600px; 
} 

Los trabajos anteriores, supongo que los números corresponden a la cantidad de widgets que ha creado. ¿Es el ancho lo único que podemos cambiar? ¿Qué pasa con las fuentes? No puedo cambiar esto. El widget de Twitter es tan feo que es difícil que se sienta bien en cualquier diseño.

Answer 6

Twitter le permite ajustar el ancho y la altura del widget línea de tiempo a través de la anchura y atributos HTML altura, pero la anchura mínima que aceptan es 220 pixels Ejemplo: width="220", height="350"

DE Twitters developers page: La anchura mínima de una línea de tiempo es 220px y el máximo es 520px. La altura mínima es 350px.

Answer 7

Necesitaba usar la clase twitter-timeline-rendered en lugar de id # twitter-widget-0. De esta forma, el widget se redimensiona después de la renderización.

.twitter-timeline-rendered { 
     width: 100% !important; 
    } 

Answer 8

Si colocamos debajo de CSS, entonces podemos establecer el ancho del widget de acuerdo con el requisito.

<style type="text/css"> iframe[id^='twitter-widget-']{ width:100%;} </style> 

Answer 9

si sólo utiliza

#twitter-widget-0 { 
    width: 100% !important; 
} 

que funcionará pero cortará en dispositivos iOS (no se han probado en android). Para solucionar este problema, es necesario agregar anchura y la altura de la etiqueta twitter-línea de tiempo, así:

<a class="twitter-timeline" width="280" height="300" href="https://twitter.com/YOURTWITTERUSERNAMEHERE" data-widget-id="YOURWIDGETIDHERE">Tweets by @YOURTWITTERUSERNAMEHERE</a> 

Answer 10

Esto funciona para mí:

.twitter-timeline { 
    height: 180px !important; 
    width: 100% !important; 
} 

Answer 11

me han tratado todas las respuestas anteriores, pero sin suerte,

implementado de código debajo de mí y trabajó para mí

<script type="text/javascript"> 

$(window).on('load', function() { 

$('iframe[id^=twitter-widget-]').each(function() { 

var head = $(this).contents().find('head'); 

if (head.length) { 

head.append('<style>.timeline { max-width: 100% !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 100% !important; }</style>'); 

} 

$('#twitter-widget-0').append($('<div class=timeline>')); 

}) 

}); 

</script> 

Answer 12

Aquí es cómo Lo hice, usando casi la misma lógica que Chandrakant usé para insertar el estilo en el iframe.

En primer lugar: Agregar widget de Twitter de la manera adecuada

<script type="text/javascript"> 
// https://dev.twitter.com/web/javascript/loading 
window.twttr = (function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0], 
     t = window.twttr || {}; 
    if (d.getElementById(id)) return t; 
    js = d.createElement(s); 
    js.id = id; 
    js.src = "https://platform.twitter.com/widgets.js"; 
    js.async = true; 
    fjs.parentNode.insertBefore(js, fjs); 
    t._e = []; 
    t.ready = function(f) { 
     t._e.push(f); 
    }; 
    return t; 
}(document, "script", "twitter-wjs")); 
</script> 

Ahora usted tiene una matriz window.twttr._e agradable que puede contener todo lo que se ejecutará una vez gorjeo widget.js se carga.

Tenga en cuenta que agregué js.async = true;

Ahora es posible que en el mismo script o después hacer:

<script type=text/javascript"> 
// https://dev.twitter.com/web/javascript/events 
window.twttr.events.bind('loaded', function (e) { 
    e.widgets.forEach(function (widget) { 
    // js to support twitter 100% if present 
    $(widget).contents().find('head').append('<style>.timeline { max-width: 100% !important; width: 100% !important; }</style>'); 
    }); 
}); 
</script> 

Tenga en cuenta que he utilizado el camino jQuery para añadir el estilo al final del contenido de cabeza iframe. Puedes hacerlo de la manera clásica pero es más larga.

<script type="text/javascript"> 
// ... 
widget.contentDocument.getElementsByTagName('head')[0]... 
// ... 
</script> 

Answer 13

Con la reciente actualización (o arruinar) Twitter han obligado a todos los widgets de alimentación para mostrar imágenes de forma automática de la carga, no importa qué opciones se encuentra dentro de la configuración de Twitter.

Ahora estoy usando su propia fuente de widget dentro de un sitio html y quiero desactivar la carga de las imágenes. No me importa tener que empezar de nuevo, pero ¿alguien podría aconsejarme sobre dónde podría encontrar un feed de Twitter personalizado html y js que no incluya imágenes?

Answer 14

Incluya

data-width="100%"

en las etiquetas de delimitación. Esto funciona para mí