it-swarm.com.de

HTML/CSS für die Breite des Twitter-Widget

Der Code, den Twitter zum Einfügen in die HTML-Datei gibt, sieht folgendermaßen aus:

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

Damit können Sie eine Höhe einstellen, die ich auf 600 eingestellt habe. Wenn ich sie auf meiner Website platziere, erhalte ich Folgendes (beim Anzeigen der Quelle):

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

Die Breite von 220 ist das, was mich umbringt. Ich möchte, dass die Breite die volle Breite des Containers ist, dh 100% (für eine mobile Site). Momentan geht die Breite der 220er etwas mehr als zur Hälfte über die Seite und zeigt eine unschöne Bildlaufleiste.

Warum wird also die Breite auf 220 gesetzt und wie kann ich sie auf die übergeordnete Breite erweitern?

7
tariq

Ich verwende ein responsives Design und dieser CSS-Code funktioniert gut. Danke, Hjuster.

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

Mit Twitter können Sie die Breite und Höhe des Timeline-Widget über HTML-Attribute für Breite und Höhe anpassen. ABER die akzeptierte Mindestbreite ist 220 pixels. BEISPIEL: width="220", height="350"

FROM Twitters Entwicklerseite : Die minimale Breite einer Timeline beträgt 220px und die maximale 520px. Die minimale Höhe beträgt 350px .

11
KInetic

Sie können die Breite des Widgets ändern, indem Sie den Wert in der Klassendefinition "Twitter-Timeline" wie folgt festlegen:

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

Ein Twitter-Timeline-Widget mit einer Breite von 280 und einer Höhe von 300 entspricht beispielsweise folgenden Linien:

<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

Wenn wir unter CSS platzieren, können wir die Breite des Widgets entsprechend der Anforderung einstellen.

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

Die obigen Ausführungen funktionieren, ich nehme an, die Zahlen stimmen mit der Anzahl der erstellten Widgets überein. Ist die Breite das einzige, was wir ändern können, was ist mit den Schriftarten? Twitter-Widget ist so hässlich, dass es schwer ist, es in jedem Layout schön zu platzieren.

2
Dom

wenn Sie nur verwenden 

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

es wird funktionieren, wird aber auf iOS-Geräten abgeschnitten (nicht auf Android getestet). Um dies zu beheben, müssen Sie dem Twitter-timeline-Tag Breite und Höhe hinzufügen.

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

Ich musste die Klasse Twitter-Zeitleiste anstelle der ID # Twitter-widget-0 verwenden. Auf diese Weise wird die Größe des Widgets nach dem Rendern geändert.

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

Umfassen 

datenbreite = "100%"
in den Anker-Tags. Das funktioniert für mich.

0
Simpa

Das hat für mich funktioniert ... 

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

Ändern Sie width="220" in width="100%".

0
marcusBMG

So habe ich es gemacht, wobei ich fast dieselbe Logik verwendete wie Chandrakant , um den Stil in den iframe einzufügen.

Zuallererst: Fügen Sie das Twitter-Widget richtig hinzu

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

Jetzt haben Sie ein Nice window.twttr._e-Array, das alles enthalten kann, wenn Twitter widget.js geladen wird.

Beachten Sie, dass ich js.async = true hinzugefügt habe.  

Jetzt können Sie im selben Skript oder danach folgendes tun:

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

Beachten Sie, dass ich den Stil mithilfe der Jquery-Methode am Ende des Inhalts des iframe-Heads angehängt habe. Sie können es auf die klassische Art tun, aber es ist länger.

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

Ich habe alle obigen Antworten ausprobiert, aber kein Glück.

Also unten Code selbst implementiert und für mich gearbeitet 

<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

Mit dem letzten Update (oder einem Fehler) hat Twitter alle Feed-Widgets dazu gezwungen, Bilder automatisch anzuzeigen, unabhängig von den in den Twitter-Einstellungen festgelegten Optionen.

Jetzt verwende ich einen eigenen Widget-Feed innerhalb einer HTML-basierten Site und möchte die Bilder vom Laden abschalten. Ich habe nichts dagegen, von vorne anfangen zu müssen, aber jemand kann mir raten, wo ich einen anpassbaren HTML- und JS-basierten Twitter-Feed finden könnte, der keine Bilder enthält.

0
Gavin Hoare

Das funktioniert für mich:

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