it-swarm.com.de

Gestaltung des neuen Twitter-Widget (eingebettete Zeitleiste)

Vor einigen Tagen/Wochen haben einige Twitter-Widgets meiner Websites die Daten nicht mehr ordnungsgemäß durchgezogen. Das Twitter-Widget der Version 2 ist veraltet, und das neue Widget für eingebettete Zeitleisten ist anscheinend der einzige Weg.

https://dev.Twitter.com/blog/planning-for-api-v1-retirement

Außer, dass dieses neue Widget einen iframe erstellt, der verhindert, dass das Widget in meinen eigenen Stylesheets benutzerdefiniert gestaltet wird, z.

Gibt es eine Problemumgehung? Nach dem, was ich gerade lese, können Sie keine Stile in einen iframe anwenden/injizieren, und ich kann keine API-Methode dafür finden.

Ich möchte das Widget auch auf die letzten 3 Tweets beschränken. nicht sicher, ob das möglich ist, und entfernen Sie die vertikale Bildlaufleiste (wahrscheinlich im Zusammenhang mit der Begrenzung der Tweets).

14
Sean

Anstatt die einzelnen Elemente mit jQuery anzuvisieren, können Sie versuchen, einen Inline-CSS-Stil in den Kopf der Seite einzufügen, die in iframe geladen ist, sodass neuer Inhalt, der durch die Schaltfläche "Mehr anzeigen" geladen wird, ebenfalls geändert wird:

um zum Beispiel Avatare Bilder zu entfernen:

$("iframe#Twitter-widget-0").contents().find('head').append('<style>img.u-photo.avatar{display:none !important;}.header.h-card.p-author{padding-left:0;}</style>');

Ich verwende das Plugin waituntilexists.js, um zu erkennen, wann der Inhalt zu DOM anstelle von setTimeout () hinzugefügt wird: https://Gist.github.com/buu700/4200601

also haben wir : 

$("iframe#Twitter-widget-0").waitUntilExists(function(){
    $("iframe#Twitter-widget-0").contents().find('head').append('<style>img.u-photo.avatar{display:none !important;}.header.h-card.p-author{padding-left:0;}</style>');     
});
15
user2787001

Die einzige Lösung, die ich mit der erweiterten Zeitleiste von Twitter gefunden habe, ist die Verwendung von Javascript, um die CSS zu ändern, nachdem der Iframe geladen wurde.

Benötigte die Verwendung von window.setTimeout. Wie jamesnotjim erwähnt, stellen Sie sicher, dass Sie dies in den Skriptblock unterhalb des body-Tags einfügen.

window.setTimeout(function(){
    $(".Twitter-timeline").contents().find(".e-entry-title").css("font-family","sans-serif");
    $(".Twitter-timeline").contents().find(".Tweet").css("font-family","sans-serif");
  }, 1000);
5

Ich kann zumindest beim Begrenzen der Tweets und beim Entfernen der Bildlaufleiste helfen.

Aus der Dokumentation :

Tweet limit: Um die Größe einer Timeline auf eine voreingestellte Anzahl von Tweets festzulegen, verwenden Sie das Attribut data-Tweet-limit = "5" mit einem beliebigen Wert zwischen 1 und 20 Tweets.

Und

Chrome: Steuern Sie das Widget-Layout und Chrome mit dem Attribut data-chrome = "nofooter transparent" für den Einbettungscode. Verwenden Sie eine durch Leerzeichen getrennte Gruppe der folgenden Optionen: noheader, nofooter, noscrollbar, transparent.

Immer noch beim Styling.

4

Sie können Javascript-Widget.js-Javascript in Ihr eigenes Projekt importieren und anschließend einige Formatierungen in dieser JS-Datei ändern.

Danach rufen Sie es auf, anstatt die Website-Bibliothek von Twitter //your.ownsite.web/widgets.js aufzurufen. Es funktioniert tatsächlich, aber keine Garantien für die Zukunft.

    <a class="Twitter-timeline" href="https://Twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</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>

Suchen Sie in den JS-Dateien nach diesem Codeblock:

setupSandbox: function (a) {
                var b = a.doc,
                    c = b.createElement("base"),
                    d = b.createElement("style"),
                    f = b.getElementsByTagName("head")[0],
                    g = "body{display:none} .timeline{border:1px solid #CCCCCC} .timeline-header{background-color:#F3F3F3;padding:8px 14px;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0;} .timeline-header h1.summary{background-color:#F3F3F3; border-bottom:1px solid #EBEBEB; -moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; font-size:14px; font-weight:400; line-height:18px; margin:0; padding:0;};",
                    h = this,
                    i;
4
Milche Patern

Anwenden von Stilen auf den Twitter-Feed

Ich möchte auf der Antwort von user2787001 aufbauen. Ich fand heraus, dass selbst mit diesem Ansatz (mit waituntilexists.js für den iframe) die Stile nicht immer angewendet wurden. Das Warten auf das Laden des iFrame ist wichtig, da Twitter dies im laufenden Betrieb lädt. Der iframe muss jedoch seinen Inhalt laden. Sollte dies länger dauern als erwartet, werden wir erneut versuchen, Stile auf etwas anzuwenden, das nicht vorhanden ist. Letztendlich möchten wir überprüfen, ob die Stile tatsächlich auf der Seite innerhalb des Iframes angewendet wurden. Nur dann können wir sicher sein, dass die Aufgabe erledigt ist.

Um das Styling anzuwenden, habe ich auf ein Standalone-Stylesheet verwiesen, das die entsprechenden Styles enthält, und zwar mit <link rel="stylesheet"... >. Um sicherzustellen, dass dies erfolgreich angewendet wurde, habe ich ihm eine ID (#Twitter-widget-styles) gegeben, die überprüft werden kann, um zu bestätigen, dass das Stylesheet platziert wurde.

Anstatt das waituntilexists.js-Plugin zu verwenden, habe ich sein Verhalten mit window.setInterval nachgeahmt. Verwenden Siewindow.setTimeout nicht mit einer willkürlichen Verzögerung. Es ist durchaus möglich, dass der Twitter-iframe länger geladen wird als erwartet. Wenn die Verzögerung zu kurz ist, werden die Stile nicht angewendet. Wenn die Verzögerung zu lang ist, wird Ihren Benutzern ein Flash of unstyled content (FOUC) angezeigt. _

(Hinweis: #Twitter-widget-0 ist die ID, die Twitter in seinem iframe verwendet.)

//Add Twitter widget styling
var $iframeHead;

var twitterStylesTimer = window.setInterval(function(){

    $iframeHead = $("iframe#Twitter-widget-0").contents().find('head');

    if( !$('#Twitter-widget-styles', $iframeHead).length ){ //If our stylesheet does not exist tey to place it
        $iframeHead.append('<link rel="stylesheet" href="/stylesheets/Twitter-widget.css" id="Twitter-widget-styles">');
    }else if( $('#Twitter-widget-styles', $iframeHead).length ){    //If stylesheet exists then quit timer
        clearInterval(twitterStylesTimer);
    }

}, 200);

Anzahl der Überprüfungen begrenzen

Eine kleine Überlegung: Wenn der iframe nicht geladen wird oder das Stylesheet nie angewendet wird, werden die Timer unbegrenzt ausgeführt. Wenn dies ein Problem ist, können Zähler hinzugefügt werden, um den Prozess nach einer bestimmten Anzahl von Versuchen zu beenden:

//Add Twitter widget styling
var quitStyleCount = 0;
var $iframeHead;

var twitterStylesTimer = window.setInterval(function(){

    $iframeHead = $("iframe#Twitter-widget-0").contents().find('head');

    if( !$('#Twitter-widget-styles', $iframeHead).length ){ //If our stylesheet does not exist tey to place it
        $iframeHead.append('<link rel="stylesheet" href="/stylesheets/Twitter-widget.css" id="Twitter-widget-styles">');
    }else if( $('#Twitter-widget-styles', $iframeHead).length || ++quitStyleCount > 40){    //If stylesheet exists or we've been trying for too long then quit
        clearInterval(twitterStylesTimer);
    }

}, 200);

Verzögerungszeiten (im Beispiel 200ms) und die Unterbrechungszähler (40 Zyklen) können nach Bedarf geändert werden.

Domainübergreifende Einschränkungen

Bedenken hinsichtlich des Einfügens von Code in einen iframe. Wenn wir den von Twitter gerenderten iframe betrachten, hat er kein src-Attribut, das Inhalt aus einer anderen Domäne ziehen würde:

<iframe frameborder="0" height="200" id="Twitter-widget-0" scrolling="no" allowtransparency="true" class="Twitter-timeline Twitter-timeline-rendered" allowfullscreen="" style="border: medium none; max-width: 100%; min-width: 180px; width: 520px;" title="Twitter Timeline"></iframe>

Ich habe dies nicht vollständig untersucht, aber ich erwarte, dass der Iframe-Inhalt schnell vom Twitter-Skript generiert wird, das auf dem Client-Computer ausgeführt wird. Daher führt die Interaktion damit nicht zu domänenübergreifenden Einschränkungen.

Begrenzte Anzahl von Tweets

Um die Anzahl der Tweets zu begrenzen, verwenden Sie das data-Tweet-limit="x"-Attribut des Ankertags, das im Einbettungscode verwendet wird

<a class="Twitter-timeline" data-Tweet-limit="3" href="https://Twitter.com/xxxxxxxxxxxx" data-widget-id="xxxxxxxxxxxxx">Tweets by xxxxxxxxxx</a>...

Dies wird in der Twitter-Dokumentation besprochen:

Tweet limit: Zum Festlegen der Größe einer Timeline auf eine voreingestellte Anzahl von Tweets verwenden das data-Tweet-limit = "5" -Attribut mit einem beliebigen Wert zwischen 1 und 20 Tweets. Die Zeitleiste rendert die angegebene Anzahl von Tweets aus der Zeitleiste, wobei die Höhe des Widgets auf .__ erweitert wird. Alle Tweets anzeigen, ohne zu scrollen. Da ist das Widget von einem festen Wenn Sie diese Option verwenden, werden keine Aktualisierungen abgefragt.

Entfernen Sie vertikale Bildlaufleisten

Ich muss Ihren Code sehen, um eine eindeutige Antwort zu geben. Es gibt ein Attribut, das Ihr Problem lösen kann. Weitere Informationen finden Sie in der Twitter-Dokumentation im Abschnitt "Chrome":

data-chrome="noscrollbar"

noscrollbar: Beschneidet und verbirgt die Bildlaufleiste der Hauptzeitleiste, falls sichtbar . Bitte beachten Sie, dass das Ausblenden von Standardkomponenten der Benutzeroberfläche __. beeinflussen die Erreichbarkeit Ihrer Website.

Das CSS-Styling kann auch über Bildlaufleisten mit Optionen wie overflow: hidden gesteuert werden.

2
a gorsky

Gehen Sie zu dieser Site und laden Sie dieses Plugin herunter. Dann können Sie die von Ihnen gewählte Variante anpassen Jason Mayes

2
Lemuel Botha

Das funktioniert für mich

function twitterfix() {

    if(typeof $("#Twitter-widget-0").contents().find(".load-more").html() == 'undefined') {
        setTimeout(twitterfix, 500);
        }
    else {
        var head = $("#Twitter-widget-0").contents().find("head");
        head.append('<link type="text/css" rel="stylesheet" href="wp-content/themes/mywordpresstheme/style.css">');
        head.append('<style>.h-entry.Tweet.with-expansion.customisable-border {border-bottom: 1px solid #EFEEEE;}</style>');
        }
}

$(document).ready(function () {

    twitterfix();

});

wiki.workassis.com

1
Bikesh M Annur

Ich habe festgestellt, dass Sie document ready ohne ein Settimeout verwenden können, vorausgesetzt, Sie packen das Widget in einen Container. Dies sollte nicht nur beim Laden der Seite ausgelöst werden, sondern auch bei Änderungen des dynamischen Inhalts in der Timeline nach dem Laden der Seite.

jQuery(document).ready( function() {
   jQuery('.Twitter-block').on('DOMSubtreeModified propertychange',"#Twitter-widget-0", function() {
     //your element changes here.
     //Hide media items
     jQuery(".Twitter-timeline").contents().find(".timeline-Tweet-media").css("display", "none");
     //Resize iframe when new content is posted.
     jQuery(".Twitter-block").css("height", "100%");
   });
});

Ansonsten stimme ich mit a-gorsky darin überein, ein Stylesheet in den iframe einzufügen, anstatt die Stiländerungen an jedem Element vorzunehmen.

1
user3903555

Wenn Sie einen Blick auf widgets.js werfen und nach dieser Zeile suchen:

e.appendStyleSheet(twttr.widgets.config.assetUrl() + "/" + r("embed/timeline.css"))).then(p.bind(function() {

Sie können timeline.css kopieren und beide Dateien beliebig ändern.

0
davidcondrey

In der Microsoft MVC-Welt gibt es Helfer in der Microsoft.Web.Helpers-Bibliothek, die insbesondere Folgendes verwendet:

@Twitter.Profile(...

Das Obige ist nur ein Wrapper für das V2-Widget, weist jedoch darauf hin, dass dieses Widget häufig verwendet wird.

Ich habe Ihre Frage nun schon eine Weile untersucht (in der Tat, als die Abwertungsnachricht erschien) und ich bin zu folgenden Schlussfolgerungen gekommen:

  1. Das Widget wird aufgrund seiner breiten Nutzung nicht veraltet
  2. Wenn es veraltet ist, steht ein weitaus reichhaltigeres Timeline-Widget zur Verfügung
  3. Andernfalls müssen Sie die API verwenden und eigene Widgets schreiben, was für Twitter einen Rückschritt bedeutet
0
ozzy

Die Timeline fügt einen Iframe in die Seite ein. Warum also nicht einfach den Inhalt des Iframes abrufen und was auch immer damit machen?

So wird es zum Beispiel mit jquery gemacht:

$($('#IFRAME_ID').contents().find('body'))

Du hast jetzt den kompletten Twitter-Feed als DOM-Baum, mach was du willst.

0
YemSalat

Das habe ich getan. Wenn Sie die Anzahl der Beiträge begrenzen, wird der Schieberegler automatisch entfernt.

<a  class="Twitter-timeline"  href="https://Twitter.com/YOUR_ACCOUNT_NAME"  data-widget-id="YOUR_ID_HERE" data-Tweet-limit="4">Tweets by @YOUR_ACCOUNT_NAME</a>
0

Einfach genug, um die Anzahl der Tweets festzulegen:

Tweet-Limit: Um die Größe einer Timeline auf eine voreingestellte Anzahl von Tweets festzulegen, verwenden Sie das Attribut data-Tweet-limit = "5" mit einem beliebigen Wert zwischen 1 und 20 Tweets. Die Zeitleiste rendert die angegebene Anzahl von Tweets aus der Zeitleiste und vergrößert die Höhe des Widgets, um alle Tweets ohne Bildlauf anzuzeigen. Da das Widget eine feste Größe hat, werden bei Verwendung dieser Option keine Aktualisierungen abgefragt.

Sie sind sich jedoch nicht sicher, wie Sie das Benutzersymbol entfernen können.

0
Mark

Siehe "clientseitige Optionen" hier . Aber im Grunde können Sie das Ganze in einem Div mit Stil versehen, Kopf- und Fußzeile entfernen und den Hintergrund transparent machen. Ich persönlich bin immer noch auf der Suche nach einer Möglichkeit, die Anzahl der Tweets zu begrenzen und das Benutzer-Symbol zu entfernen.

Hier ist unser Code (Drupal-Block): ok, ich kann den Code nicht schön anzeigen.

0
t-readyroc