web-dev-qa-db-fra.com

HTML/CSS pour la largeur du widget Twitter

Le code que Twitter vous donne pour coller dans le HTML ressemble à ceci:

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

Ils vous permettent de définir une hauteur, que je mets à 600. Une fois placé sur mon site, je reçois ceci (lors de l'affichage de la source):

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

La largeur 220 est ce qui me tue. Je veux que la largeur soit la largeur totale du conteneur, qui est 100% (pour un site mobile). Actuellement, la largeur 220 dépasse un peu plus de la moitié de la page et affiche une barre de défilement laide.

Alors, pourquoi définit-il la largeur sur 220 et comment puis-je l’obtenir pour s’étendre sur la largeur de son parent?

htmlcsswidgettwitter
7
tariq

J'utilise un thème sensible et ce code CSS fonctionne très bien. Merci Hjuster.

#Twitter-widget-0 { 
      width: 100% !important; 
    }
19
djchete

Twitter vous permet de régler la largeur et la hauteur du widget de la chronologie via les attributs HTML de largeur et de hauteur MAIS la largeur minimale acceptée est 220 pixels EXEMPLE: width="220", height="350"

FROM Page des développeurs de Twitters : La largeur minimale d’une timeline est de 220 pixels et la valeur maximale de 520 pixels. La hauteur minimale est 350px .

11
KInetic

Vous pouvez modifier la largeur du widget en définissant sa valeur dans la définition de classe "Twitter-timeline", comme indiqué ici:

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

Par exemple, un widget de chronologie Twitter avec une largeur de 280 et une hauteur de 300 correspond à peu près à:

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

6
adriano72

Si nous plaçons en dessous de CSS, nous pouvons définir la largeur du widget en fonction des besoins.

<style type="text/css"> iframe[id^='Twitter-widget-']{ width:100%;} </style>
2
Kamran
#Twitter-widget-6 {
  width:600px;
}

Les travaux ci-dessus, je suppose que les nombres correspondent au nombre de widgets que vous avez créés. La largeur est-elle la seule chose que nous puissions changer, qu'en est-il des polices, je ne peux pas sembler changer cela? Le widget Twitter est tellement moche qu'il est difficile de l'adapter à n'importe quelle mise en page.

2
Dom

si vous venez d'utiliser 

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

cela fonctionnera mais il coupera sur les appareils iOS (non testé sur Android). Pour résoudre ce problème, vous devez ajouter une largeur et une hauteur à la balise Twitter-timeline, comme suit:

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

J'avais besoin d'utiliser la classe Twitter-timeline-render au lieu de l'id # Twitter-widget-0. De cette façon, le widget est redimensionné après le rendu.

.Twitter-timeline-rendered { 
      width: 100% !important; 
    }
1
user2245341

Comprendre 

data-width = "100%"
dans les balises d'ancrage. Cela fonctionne pour moi.

0
Simpa

Cela a fonctionné pour moi ... 

    #Twitter-widget-6{
      width:600px;
    }
0
hjuster

Essayez de changer width="220" en width="100%".

0
marcusBMG

Voici comment je l’ai fait, en utilisant presque la même logique que Chandrakant a utilisé pour insérer le style dans l’iframe.

Tout d'abord: ajouter le widget Twitter de la bonne façon

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

Vous avez maintenant un tableau Nice window.twttr._e qui peut contenir tout ce qui sera exécuté une fois que Twitter widget.js est chargé.

Notez que j'ai ajouté js.async = true;  

Maintenant, vous pouvez dans le même script ou après:

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

Notez que j’ai utilisé la méthode jQuery pour ajouter le style à la fin du contenu de la tête iframe. Vous pouvez le faire de façon classique mais c'est plus long. 

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

J'ai essayé toutes les réponses ci-dessus mais pas de chance,

Donc implémenté ci-dessous code moi-même et a travaillé pour moi 

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

Avec la récente mise à jour (ou bousiller), Twitter a forcé tous les widgets d’alimentation à afficher automatiquement les images lors du chargement, quelles que soient les options définies dans les paramètres de Twitter.

Maintenant, j'utilise leur propre flux de widgets au sein d'un site basé sur HTML et je veux désactiver le chargement des images. Cela ne me dérange pas de devoir recommencer à zéro, mais est-ce que quelqu'un pourrait me dire où je pourrais trouver un flux Twitter personnalisable basé sur HTML et js qui n'inclut pas d'images.

0
Gavin Hoare

Cela fonctionne pour moi:

.Twitter-timeline {
    height: 180px !important; 
    width: 100% !important; 
}
0
arsh