javascript - plugin - Forzar el tweet incorporado al ancho del 100%

twitter share dialog

Question

Intento obligar a un tweet integrado a comportarse de manera responsable estableciendo su ancho al 100%.

Intenté ajustar el ancho en línea de la siguiente manera:

<blockquote class="twitter-tweet" width="100%">...</blockquote>

También intenté diseñar la clase twitter-tweet de la siguiente manera:

blockquote.twitter-tweet {width:100% !important}

Ambos enfoques han fallado. ¿Esto simplemente está siendo sobreescrito por el guión que Twitter requiere para ser incluido con el tweet embed? (El script se puede consultar en http://platform.twitter.com/widgets.js ).

Cualquier ayuda para forzar la inserción del ancho del 100% sería muy apreciada.

Answer 1

Cory, esto no es posible usando la inserción provista por Twitter. Bueno, es posible hasta cierto punto, pero solo hasta 520px. Ver https://dev.twitter.com/docs/embedded-timelines .

Sin embargo, puede agregar width = "2000" como este `

<a class="twitter-timeline" width="2000" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>

`Y luego ajusta tu CSS. Sin embargo, no es la mejor solución.

hay una publicación anterior que podría ser útil para ti, no sé si aún funciona, pero vale la pena verla, échale un vistazo en http://kovshenin.com/2012/quick-tip-how-to-make-tweet -embed-responsive /

Answer 2

Desde mayo de 2016, Twitter usa otro HTML embebido. Se parece a esto. Perdieron la integración de iFrame.

<twitterwidget class="twitter-tweet twitter-tweet-rendered" id="twitter-widget-1"
style="position: static; visibility: visible; display: block; max-width: 100%; width: 500px; min-width: 220px; margin-top: 10px; margin-bottom: 10px;"
data-tweet-id="732567624345915393">
<div data-twitter-event-id="1" class="SandboxRoot env-bp-350" style="position: relative;">
...
</div>
</twitterwidget>

En el DOM, encontrará un Elemento llamado #shadow-root después de la etiqueta de twitterwidget open (verifique en el inspector de Chrome ). A partir de ahora es posible manipular todas las Ebends de Twitter por css y sombra de pseudo elemento.

Ejemplo de ancho:

twitterwidget::shadow .EmbeddedTweet {
width: 700px;
max-width: 960px;
}

Ejemplo - https://jsfiddle.net/86dc9y5t/

No utilizar en páginas de productos: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM

Answer 3

Esta solución funciona para mí.

Básicamente, debes inyectar algo de CSS en tu iframe de widgets de Twitter.

Este ejemplo usa jQuery

<style type="text/css" id="twitter-style">
.timeline { max-width: 100%; }
</style>
<script type="text/javascript">
twttr.widgets.createTimeline(
''WIDGET_ID_GO_HERE'',
$(''#widget-placeholder-go-here'')[0],
{
chrome: ''nofooter noborders noheader'' //optional
}
).then(function(el) {
$(el).contents().find(''head'').append($(''#twitter-style''));
});
</script>

Answer 4

La solución descrita con shadow parece aplicarse solo a Chrome. Para otros navegadores es posible manipular el con por javascript. Aquí hay un ejemplo con jQuery.

jQuery(window).load(function () {
jQuery(''.twitter-tweet'').contents().find(''.EmbeddedTweet'').css({
maxWidth: "960px", width: "100%"
});
});

Answer 5

Para cualquiera que se pregunte por qué estas soluciones a veces no funcionan; es porque las tarjetas de twitter tienen un título y contenido en white-space:nowrap

Pero no se preocupe, este es el único código que deberá usar, ya que cubre todos los casos (atm):

#twitter-widget-0,#twitter-widget-1{ width:100%; }
twitterwidget::shadow .SummaryCard-content *{white-space:normal !important;}
twitterwidget::shadow .resize-sensor{display:none !important;width:0px !important;overflow:hidden !important;}

Answer 6

Simplemente configure el ancho configurando el ancho del widget.

Compruebe inspeccionar en la consola cuál es la identificación del contenedor de widgets.

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