Стилизация нового виджета Twitter (встроенная временная шкала)

Ответ 1

Вместо того, чтобы таргетировать отдельные элементы с помощью jQuery, вы можете попробовать внедрить некоторый встроенный CSS-стиль в голову страницы, загруженной внутри iframe, поэтому новый контент, загруженный кнопкой "показать больше", также будет изменен:

например, для удаления изображений аватаров:

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

Я использую плагин waituntilexists.js, чтобы определить, когда содержимое добавлено в DOM вместо setTimeout(): https://gist.github.com/buu700/4200601

поэтому имеем:

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

Ответ 2

Единственное решение, которое я нашел в Twitter Enhanced Timeline, - это использовать javascript для изменения css после загрузки iframe.

Необходимо использовать для этого window.setTimeout. Как упоминалось в jamesnotjim, убедитесь, что вы поместили это в блок script под тегом 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);

Ответ 3

Вы можете импортировать jitter в twitter-widget.js в свой собственный проект, а затем изменить некоторые стили из этого .js файла.

После этого вы вызываете его вместо вызова библиотеки сайта twitter //your.ownsite.web/widgets.js. Он действительно работает, но никаких гарантий на будущее.

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

В .js найдите этот блок кода:

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

Я могу по крайней мере помочь с ограничением твитов и удалением полосы прокрутки.

Из документации:

Ограничение на лимит: Чтобы установить размер временной шкалы на заданное количество твитов, используйте атрибут data-tweet-limit = "5" с любым значением от 1 до 20 твитов.

и

Chrome: Управляйте макетом виджетов и хром, используя атрибут data-chrome = "nofooter transparent" в коде для встраивания. Используйте набор разделенных пробелами следующих параметров: noheader, nofooter, noscrollbar, transparent.

Все еще смотря на стиль.

Ответ 5

Перейдите на этот сайт и загрузите этот плагин, затем вы можете стилизовать в любом случае, вы выбрали Джейсон Майес

Ответ 6

Применение стилей к ленте Twitter

Я хотел бы основываться на ответе user2787001. Я обнаружил, что даже при таком подходе (используя waituntilexists.js в iframe) стили не всегда применялись. Ожидание загрузки iFrame является значительным, поскольку твиттер загружает это на лету. Однако iframe должен загружать свой контент; веб-страницу, содержащую фид Twitter, и если это займет больше времени, чем ожидалось, мы снова будем пытаться применять стили к тому, чего там нет. В конечном итоге мы хотим проверить, действительно ли стили были применены на странице в iframe, только тогда мы можем быть уверены, что работа выполнена.

Чтобы применить стиль, я ссылался на отдельную таблицу стилей, содержащую соответствующие стили, используя <link rel="stylesheet"... >. Чтобы убедиться, что это было успешно применено, я дал ему идентификатор (#twitter-widget-styles), который можно проверить, чтобы подтвердить, что таблица стилей была помещена.

Вместо использования плагина waituntilexists.js я подражал его поведению, используя window.setInterval. Не используйте window.setTimeout с произвольной задержкой. Вполне возможно, что твиттер iframe и его содержимое займет больше времени, чем ожидалось. Если задержка слишком коротка, стили не будут применяться. Если задержка слишком длинная, то вашим пользователям будет показана вспышка незакрепленного содержимого (FOUC)

(примечание: #twitter-widget-0 используется id twitter на его 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);

Предельное количество проверок

Небольшое соображение, если iframe не загружается или таблица стилей никогда не применяется, таймеры будут выполняться бесконечно. Если это вызывает беспокойство, счетчики могут быть добавлены для выхода из процесса после определенного количества попыток:

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

Время задержки (200 мс в примере) и счетчики разрыва (40 циклов) могут быть изменены по мере необходимости.

Ограничения перекрестных доменов

Что касается вопроса о вставке кода в iframe. Если мы посмотрим на iframe, отображаемый твиттером, у него нет атрибута src, который вытащил бы контент из другого домена:

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

Я не исследовал это полностью, но я ожидаю, что содержимое iframe будет создано "на лету" из твиттера script, запущенного на клиентской машине. Поэтому взаимодействие с ним не заставляет кросс-доменные ограничения.

Предельное количество твитов

Чтобы ограничить количество твитов, используйте атрибут data-tweet-limit="x" в теге привязки, используемом в коде для встраивания

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

Это обсуждается в документации twitter:

Tweet limit. Чтобы установить размер временной шкалы на заданное число Tweets, используйте атрибут data-tweet-limit = "5" с любым значением между 1 и 20 твитов. Сроки составят указанное количество Твиты с временной шкалы, расширяющие высоту виджета до отображать все твиты без прокрутки. Поскольку виджет имеет фиксированный size, он не будет проверять обновления при использовании этой опции.

Снять вертикальные полосы прокрутки

Мне нужно, чтобы ваш код дал определенный ответ. Существует атрибут, который может решить вашу проблему, снова обсуждаемый в документации twitter в разделе "Chrome":

data-chrome="noscrollbar"

noscrollbar. Обрезает и скрывает основную панель прокрутки временной шкалы, если она видна. Учтите, что скрытие стандартных компонентов пользовательского интерфейса может влияют на доступность вашего веб-сайта.

Стилизация CSS также может обеспечивать контроль над полосами прокрутки с такими параметрами, как overflow: hidden.

Ответ 7

Это работает для меня

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

Ответ 8

Я обнаружил, что вы можете использовать готовый документ без привязки, если вы завершаете виджет в контейнере. Это должно вызывать не только загрузку страницы, но и любые изменения динамического содержимого самой временной шкалы после загрузки страницы.

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

В противном случае я согласен с a-gorsky относительно добавления таблицы стилей в iframe, а не для изменения стиля для каждого элемента.

Ответ 9

См. "Варианты клиентской стороны" здесь. Но в принципе, вы можете пощекотать все в стилизованном div, удалить верхний и нижний колонтитулы и сделать фон прозрачным. Я лично все еще ищу способ ограничить количество твитов и избавиться от иконки пользователя.

Здесь наш код (блок Drupal): ok, я не могу получить код, чтобы он показывался красиво.

Ответ 10

В мире Microsoft MVC есть помощники в библиотеке Microsoft.Web.Helpers, в частности, используя:

@Twitter.Profile(...

Выше всего это обертка вокруг виджета V2, но указывает на то, что это конкретный виджет очень высок.

Я рассмотрел ваш вопрос какое-то время (фактически, когда появилось сообщение об устаревании), и я пришел к следующим выводам:

• Виджет не будет устаревшим из-за его широкого использования
• Если он устарел, будет доступен гораздо более богатый виджет временной шкалы.
• В противном случае это будет случай использования API и написания наших собственных виджетов, что станет шагом назад для Twitter.

Ответ 11

Это то, что я сделал. Если вы ограничиваете количество сообщений, он автоматически удаляет слайдер.

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

Ответ 12

Достаточно просто установить количество твитов:

Предел Tweet: Чтобы установить размер временной шкалы на заданное количество твитов, используйте атрибут data-tweet-limit = "5" с любым значением от 1 до 20 твитов. Временная шкала отобразит указанное количество твитов с временной шкалы, увеличив высоту виджета, чтобы отобразить все твиты без прокрутки. Поскольку виджет имеет фиксированный размер, он не будет проверять обновления при использовании этой опции.

Не уверен, как удалить значок пользователя.

Ответ 13

Временная шкала вставляет iframe на страницу, поэтому почему бы просто не получить содержимое iframe и не сделать с ним?

Вот как это делается с jquery, например:

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

Теперь у вас есть полный твиттер в качестве дерева DOM, делайте все, что хотите.

Ответ 14

Если вы посмотрите widgets.js и найдите эту строку:

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

Вы можете скопировать timeline.css и изменить оба файла, как вам нравится.