web-dev-qa-db-fra.com

Styliser le nouveau widget Twitter (chronologie intégrée)

Il y a quelques jours/semaines, certains des widgets Twitter de mes sites ont cessé de traiter correctement les données. Il s'avère que le widget Twitter de la version 2 est obsolète et que le nouveau widget de la chronologie intégrée est apparemment la seule solution.

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

Sauf que ce nouveau widget crée un iframe, qui empêche tout style personnalisé du widget à partir de mes propres feuilles de style, telles que la définition de la famille de police, la taille de la police, les couleurs, etc.

Y at-il un travail autour? D'après ce que je lis, vous ne pouvez pas appliquer/injecter de styles dans un iframe, et je ne trouve aucun moyen de le faire avec une API.

J'aimerais également limiter le widget aux 3 derniers tweets; pas sûr que ce soit possible, et pour supprimer la barre de défilement verticale (probablement liée à la limitation des tweets).

csstwitterwidget
14
Sean

Au lieu de cibler individuellement les éléments avec jQuery, vous pouvez essayer d’injecter du style CSS intégré dans l’en-tête de la page chargée dans le iframe, de sorte que le nouveau contenu chargé par le bouton "afficher davantage" sera également modifié:

par exemple, pour supprimer des images d'avatars:

$("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>');

J'utilise le plugin waituntilexists.js pour détecter quand le contenu est ajouté à DOM au lieu de setTimeout (): https://Gist.github.com/buu700/4200601

donc nous avons : 

$("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

La seule solution que j'ai trouvée avec la timeline améliorée de Twitter consiste à utiliser javascript pour modifier le fichier css après le chargement de l'iframe.

Nécessaire pour utiliser window.setTimeout. Comme mentionné par jamesnotjim, assurez-vous de placer ceci dans le bloc de script sous la balise body.

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

Je peux au moins aider à limiter les tweets et à supprimer la barre de défilement.

De la documentation :

Tweet limit: Pour fixer la taille d'un montage à un nombre prédéfini de Tweets, utilisez l'attribut data-Tweet-limit = "5" avec une valeur comprise entre 1 et 20 Tweets.

Et

Chrome: Contrôlez la disposition du widget et chrome en utilisant l'attribut data-chrome = "nofooter transparent" sur le code incorporé. Utilisez un ensemble d'espaces séparés des options suivantes: noheader, nofooter, noscrollbar, transparent.

Toujours en train de regarder le style.

4
robert.andre.brink

Vous pouvez importer du code javascript Twitter-widget.js dans votre propre projet, puis modifier certains styles à partir de ce fichier .js.

Ensuite, vous l'invoquez au lieu d'appeler la bibliothèque de site de Twitter, //your.ownsite.web/widgets.js. Cela fonctionne réellement, mais aucune garantie pour le futur.

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

Dans le fichier .js, recherchez ce bloc de code:

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

Appliquer des styles au flux Twitter

Je voudrais construire sur la réponse fournie par user2787001. Je trouvais que même avec cette approche (en utilisant waituntilexists.js sur l'iframe), les styles n'étaient pas toujours appliqués. L'attente du chargement de l'iFrame est importante, car Twitter le charge à la volée. Cependant, l'iframe doit alors charger son contenu; la page Web contenant le fil Twitter et si cela prend plus de temps que prévu, nous essaierons à nouveau d’appliquer des styles à quelque chose qui n’y est pas. En fin de compte, nous voulons vérifier que les styles ont bien été appliqués sur la page dans l'iframe. Ce n'est qu'alors que nous pourrons être satisfaits du travail accompli.

Pour appliquer le style, j'ai référencé une feuille de style autonome contenant les styles appropriés, en utilisant <link rel="stylesheet"... >. Afin de m'assurer que cela a été appliqué avec succès, je lui ai donné un identifiant (#Twitter-widget-styles) qui peut être vérifié pour confirmer que la feuille de style a été placée.

Plutôt que d'utiliser le plugin waituntilexists.js, j'ai imité son comportement en utilisant window.setInterval. N'utilisez paswindow.setTimeout avec un délai arbitraire. Il est tout à fait possible que l’iframe Twitter et son contenu soient plus longs à charger que prévu. Si le délai est trop court, les styles ne seront pas appliqués. Si le délai est trop long, un contenu clignotant sans contenu (FOUC) } s'affiche alors. _

(note: #Twitter-widget-0 est l'identifiant que Twitter utilise sur son iframe)

//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);

Limiter le nombre de contrôles

Une petite considération, si l'iframe ne parvient pas à charger ou si la feuille de style n'est jamais appliquée, les minuteries seront exécutées indéfiniment. Si cela pose un problème, des compteurs peuvent être ajoutés pour quitter le processus après un certain nombre de tentatives:

//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);

Les temps de retard (200 ms dans l'exemple) et les compteurs de pause (40 cycles) peuvent être modifiés selon les besoins.

Restrictions interdomaines

En ce qui concerne les préoccupations concernant l’insertion de code dans une iframe. Si nous regardons l'iframe rendu par Twitter, il ne possède pas d'attribut src permettant d'extraire le contenu d'un autre domaine:

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

Je n'ai pas enquêté à fond sur cela, mais je m'attends à ce que le contenu de l'iframe soit généré à la volée à partir du script Twitter exécuté sur la machine cliente. Par conséquent, interagir avec elle n'élimine aucune restriction de domaine.

Limiter le nombre de tweets

Pour limiter le nombre de tweets, utilisez l'attribut data-Tweet-limit="x" sur la balise d'ancrage utilisée dans le code d'intégration.

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

Ceci est discuté dans la documentation Twitter :

Tweet limit: permet de fixer la taille d'une timeline à un nombre prédéfini de Tweets, utilisez l'attribut data-Tweet-limit = "5" avec une valeur comprise entre 1 et 20 tweets. La timeline rendra le nombre spécifié de Tweets de la timeline, augmentant la hauteur du widget à afficher tous les tweets sans défilement. Depuis le widget est d'un fixe taille, il ne sera pas interroger pour les mises à jour lorsque vous utilisez cette option.

Supprimer les barres de défilement verticales

J'aurais besoin de voir votre code pour donner une réponse définitive. Un attribut permettant de résoudre votre problème, décrit à nouveau dans la documentation Twitter }, sous la section "Chrome":

data-chrome="noscrollbar"

noscrollbar: recadre et masque la barre de défilement principale de la ligne de scénario, si elle est visible . Veuillez considérer que masquer les composants d'interface utilisateur standard peut affecter l'accessibilité de votre site web.

Le style CSS peut également donner le contrôle sur les barres de défilement avec des options telles que overflow: hidden.

2
a gorsky

Allez sur ce site et téléchargez ce plugin, vous pourrez ensuite styler comme vous le souhaitez Jason Mayes

2
Lemuel Botha

Cela fonctionne pour moi 

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

J'ai constaté que vous pouvez utiliser un document prêt sans le settimeout, à condition d'envelopper le widget dans un conteneur. Cela devrait déclencher non seulement le chargement de la page, mais également tout changement de contenu dynamique dans le montage lui-même après le chargement de la page.

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%");
   });
});

Sinon, je suis d'accord avec a-gorsky sur l'ajout d'une feuille de style dans l'iframe plutôt que de modifier le style de chaque élément.

1
user3903555

Si vous regardez widgets.js et cherchez cette ligne:

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

Vous pouvez copier timeline.css et modifier les deux fichiers comme bon vous semble.

0
davidcondrey

Dans le monde Microsoft MVC, la bibliothèque Microsoft.Web.Helpers contient des aides, notamment:

@Twitter.Profile(...

Ce qui précède est simplement un wrapper autour du widget V2, mais indique qu’il est très utilisé par ce widget.

J'ai examiné votre question pendant un moment (en fait, lorsque le message de dépréciation a commencé à apparaître) et j'en suis arrivé aux conclusions suivantes:

  1. Le widget ne sera pas déconseillé en raison de sa large utilisation
  2. S'il est obsolète, un widget de chronologie beaucoup plus riche sera disponible
  3. En cas d'échec, ce sera l'utilisation de l'API et l'écriture de nos propres widgets, ce qui constituera un pas en arrière pour Twitter.
0
ozzy

La timeline insère un iframe dans la page, alors pourquoi ne pas simplement obtenir le contenu de l'iframe et faire ce que vous voulez?

Voici comment cela se fait avec jquery par exemple:

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

Vous avez maintenant l'intégralité du flux Twitter sous forme d'arborescence DOM, faites ce que vous voulez.

0
YemSalat

C'est ce que j'ai fait. Si vous limitez le nombre de publications, le curseur est automatiquement supprimé.

<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
Tommy Ange Smith

Assez simple pour définir le nombre de Tweets:

Limite de tweets: pour fixer la taille d'un montage à un nombre prédéfini de Tweets, utilisez l'attribut data-Tweet-limit = "5" avec une valeur comprise entre 1 et 20 Tweets. La timeline rendra le nombre spécifié de Tweets à partir de la timeline, en augmentant la hauteur du widget pour afficher tous les Tweets sans défilement. Étant donné que le widget a une taille fixe, il ne recherchera pas de mises à jour si vous utilisez cette option.

Vous ne savez pas comment supprimer l'icône d'utilisateur.

0
Mark

Voir "options côté client" ici . Mais fondamentalement, vous pouvez gifler le tout dans une div stylée, supprimer l'en-tête et le pied de page et rendre l'arrière-plan transparent. Personnellement, je cherche toujours un moyen de limiter le nombre de tweets et de me débarrasser de l'icône de l'utilisateur.

Voici notre code (bloc Drupal): ok, je ne parviens pas à afficher correctement le code.

0
t-readyroc