几天/几周前,我网站的一些Twitter小工具停止了正确的数据传输。事实证明,版本2推特小部件已被弃用,显然,新的嵌入式时间轴小部件是唯一的出路。
https://dev.twitter.com/blog/planning-for-api-v1-retirement
除了这个新窗口小部件创建一个iframe,它可以防止我自己的样式表中的窗口小部件的任何自定义样式 - 例如设置字体系列,字体大小,颜色等。
有解决方法吗?从我正在阅读的内容来看,你不能将样式应用/注入iframe,我找不到任何API方法。
我还想将小部件限制为最近的3条推文;不确定是否可能,并删除垂直滚动条(可能与限制推文有关)。
答案 0 :(得分:15)
您可以尝试将一些内联css样式注入到 iframe 中加载的页面的头部,而不是使用jQuery单独定位元素,因此“显示更多”按钮加载的新内容将也可以改变:
例如删除头像图片:
$("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>');
});
答案 1 :(得分:6)
我在Twitter的增强时间轴上找到的唯一解决方案是在iframe加载后使用javascript修改css。
需要使用window.setTimeout。正如jamesnotjim所提到的,请确保将其放在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);
答案 2 :(得分:4)
您可以在自己的项目中导入twitter-widget.js javascript,然后在此.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;
答案 3 :(得分:4)
我至少可以帮助限制推文和删除滚动条。
推文限制:要将时间轴的大小固定为预设数量的推文,请使用data-tweet-limit =“5”属性,其值介于1到20条推文之间。
和
Chrome:使用嵌入代码上的data-chrome =“nofooter transparent”属性控制窗口小部件布局和镶边。使用以空格分隔的以下选项集:noheader,nofooter,noscrollbar,transparent。
仍然看着造型。
答案 4 :(得分:2)
访问此网站并下载此插件,然后您可以根据自己的选择设置样式 Jason Mayes
答案 5 :(得分:2)
我想建立在 user2787001 提供的答案之上。我发现即使采用这种方法(在iframe上使用 waituntilexists.js ),也不总是应用样式。等待iFrame加载非常重要,因为Twitter即时加载。然而,iframe必须加载其内容;包含Twitter Feed的网页如果花费的时间超过预期,我们将再次尝试将样式应用于不存在的内容。最后,我们要检查样式是否已经实际应用于iframe中的页面,只有这样我们才能对作业完成感到满意。
要应用样式,我使用<link rel="stylesheet"... >
引用了包含相应样式的独立样式表。为了确保已经成功应用了这个,我给它一个id(#twitter-widget-styles
),可以检查它以确认样式表已被放置。
我没有使用waituntilexists.js插件,而是使用window.setInterval
来模仿其行为。 请勿以任意延迟使用 window.setTimeout
。 Twitter iframe及其内容很可能比预期的加载时间更长。如果延迟太短,则样式将无法应用。如果延迟时间过长,则会向您的用户显示flash of unstyled content (FOUC)
(注意:#twitter-widget-0
是Twitter在其iframe上使用的ID)
//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);
可以根据需要更改延迟时间(示例中为200ms)和中断计数器(40个周期)。
关于将代码插入iframe的问题。如果我们查看由twitter呈现的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内容是在客户端计算机上运行的twitter脚本中动态生成的。因此,与它进行交互并不会导致任何跨域限制。
要限制推文的数量,请使用嵌入代码上使用的锚标记的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>...
中讨论
推文限制:将时间轴的大小固定为预设数量 推文,使用data-tweet-limit =“5”属性与之间的任何值 1和20条推文。时间轴将呈现指定的数量 来自时间轴的推文,将小部件的高度扩展到 显示所有推文而不滚动。由于小部件是固定的 大小,使用此选项时不会轮询更新。
我需要看到你的代码给出明确的答案。有一个属性可以解决您的问题,再次在twitter documentation中的“Chrome”部分进行了讨论:
data-chrome="noscrollbar"
noscrollbar :裁剪并隐藏主时间轴滚动条(如果可见)。 请考虑隐藏标准用户界面组件即可 影响您网站的可访问性。
CSS样式还可以通过overflow: hidden
等选项控制滚动条。
答案 6 :(得分:1)
请参阅“客户端选项”here。但基本上,你可以在一个样式的div中拍打整个东西,删除标题&amp;页脚&amp;使背景透明。我个人仍然在寻找一种限制推文数量的方法。摆脱用户图标。
这是我们的代码(Drupal块):好的,我无法让代码显示得很好。
答案 7 :(得分:1)
这对我有用
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 :(得分:1)
如果您将小部件包装在容器中,我发现您可以在没有settimeout的情况下使用文档。这不仅应该在页面加载时触发,还应该在页面加载后触发时间轴本身的任何动态内容更改。
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 :(得分:0)
在Microsoft MVC世界中,Microsoft.Web.Helpers库中有帮助程序,特别是使用:
@Twitter.Profile(...
以上只是V2小部件的包装,但表明该特定小部件的使用率很高。
我已经调查了你的问题一段时间了(实际上当弃用消息开始出现时)我得出了以下结论:
答案 10 :(得分:0)
这就是我所做的。如果限制帖子数量,它会自动删除滑块。
<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>
答案 11 :(得分:0)
足够简单来设置推文数量:
推文限制:要将时间轴的大小固定为预设数量的推文,请使用data-tweet-limit =“5”属性,其值介于1到20个推文之间。时间线将从时间线呈现指定数量的推文,扩展小部件的高度以显示所有推文而不滚动。由于窗口小部件具有固定大小,因此在使用此选项时不会轮询更新。
不知道如何删除用户图标。
答案 12 :(得分:0)
时间轴在页面中插入iframe,那么为什么不只是获取iframe的内容并对其进行任何操作?
以下是jquery的完成方式,例如:
$($('#IFRAME_ID').contents().find('body'))
您现在可以将完整的Twitter Feed作为DOM树,随心所欲。
答案 13 :(得分:0)
如果您查看widgets.js并查找此行:
e.appendStyleSheet(twttr.widgets.config.assetUrl() + "/" + r("embed/timeline.css"))).then(p.bind(function() {
您可以复制timeline.css并根据需要修改这两个文件。