HTML / CSS für die Widgetbreite von Twitter

7

Der Code, den Sie in das HTML einfügen, sieht so aus:

%Vor%

Sie erlauben Ihnen, eine Höhe einzustellen, die ich auf 600 setze. Wenn sie auf meiner Seite platziert wird, bekomme ich diese (beim Betrachten der Quelle):

%Vor%

Die 220er Breite bringt mich um. Ich möchte die Breite die volle Breite des Containers sein, die 100% ist (für eine mobile Website). Zur Zeit reicht die Breite 220 etwas mehr als die Hälfte der Seite und zeigt eine hässliche Bildlaufleiste.

Also, warum setzt es die Breite auf 220, und wie kann ich es auf seine Elternbreite erweitern?

    
tariq 21.09.2012, 23:46
quelle

14 Antworten

20

Ich benutze ein responsives Thema und dieser CSS-Code funktioniert gut. Danke Hjuster.

%Vor%     
djchete 04.10.2012 07:44
quelle
11

Mit Twitter können Sie die Breite und Höhe des Zeitleisten-Widgets über HTML-Attribute für Breite und Höhe anpassen. Die Mindestbreite, die sie akzeptieren, ist jedoch 220 pixels BEISPIEL: width="220" , height="350"

VON Twitters-Entwickler-Seite : Die minimale Breite einer Timeline ist 220px und das Maximum ist 520px. Die minimale Höhe ist 350px .

    
KInetic 26.11.2012 19:16
quelle
6

Sie können die Breite des Widgets ändern, indem Sie seinen Wert in der Klassendefinition "twitter-timeline" wie hier erwähnt setzen:

Ссылка

Zum Beispiel ist ein Twitter-Timeline-Widget mit der Breite 280 und der Höhe 300 etwas in der Art von:

%Vor%

    
adriano72 07.10.2012 08:46
quelle
2
%Vor%

Das obige funktioniert, ich nehme an, die Zahlen entsprechen der Anzahl der von Ihnen erstellten Widgets. Ist die Breite das einzige, was wir ändern können, was ist mit den Schriften, ich kann das nicht ändern? Das Twitter-Widget ist so hässlich, dass es schwierig ist, es in jedem Layout zu platzieren.

    
Dom 26.10.2012 10:01
quelle
1

Ich brauchte die Klasse twitter-timeline-rendered anstelle der ID # twitter-widget-0. Auf diese Weise wird das Widget nach dem Rendern angepasst.

%Vor%     
user2245341 04.04.2013 14:29
quelle
1

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

%Vor%     
Kamran 12.11.2013 06:33
quelle
0

Versuchen Sie, width="220" in width="100%" zu ändern.

    
marcusBMG 21.09.2012 23:54
quelle
0

Das hat für mich funktioniert ...

%Vor%     
hjuster 02.10.2012 16:12
quelle
0

wenn Sie nur

verwenden %Vor%

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

%Vor%     
Matt Sich 14.02.2015 18:09
quelle
0

Das funktioniert für mich:

%Vor%     
arsh 13.08.2015 02:51
quelle
0

Ich habe alle obigen Antworten versucht, aber kein Glück,

Also unten Code selbst implementiert und arbeitete für mich

%Vor%     
Chandrakant 26.01.2016 18:35
quelle
0

Hier ist, wie ich es gemacht habe und fast die gleiche Logik verwendet habe wie Chandrakant , um den Stil in den iframe einzufügen .

Vor allem: fügen Sie twitter widget den richtigen Weg

%Vor%

Jetzt haben Sie ein schönes window.twttr._e Array, das alles enthalten kann, was nach dem Laden von twitter widget.js ausgeführt wird.

Beachten Sie, dass ich js.async = true;

hinzugefügt habe

Nun können Sie im selben Skript oder danach tun:

%Vor%

Beachten Sie, dass ich den jquery-Weg verwendet habe, um den Stil am Ende des Iframe-Kopf-Inhalts anzuhängen. Sie können es auf die klassische Weise tun, aber es ist länger.

%Vor%     
Sébastien Barbieri 19.02.2016 16:21
quelle
0

Mit dem letzten Update (oder vermasselt) hat twitter alle Feed-Widgets gezwungen, Bilder beim Laden automatisch anzuzeigen, egal welche Optionen in den Twitter-Einstellungen eingestellt sind.

Jetzt verwende ich einen eigenen Widget-Feed innerhalb einer HTML-basierten Site und möchte die Bilder vom Laden abhalten. Es macht mir nichts aus, von vorne anfangen zu müssen, aber irgendjemand könnte mir raten, wo ich einen anpassbaren HTML- und js-basierten Twitter-Feed finden könnte, der keine Bilder enthält.

    
Gavin Hoare 07.03.2016 02:09
quelle
0

Enthalten

data-width="100%"
in den Anker-Tags. Das funktioniert für mich.     
Simpa 25.05.2016 19:11
quelle

Tags und Links