【问题标题】:How to embed a twitter timeline without retweets?如何在没有转推的情况下嵌入推特时间线?
【发布时间】:2017-07-12 17:13:11
【问题描述】:

我正在将 Twitter 时间线嵌入到我的网站中。但是我的转推显示在那里,我不希望它们显示。

有什么简单的方法可以关闭它们吗?好像没找到

我的搜索查询是from:myaccount。我也试过from:myaccount -RT,但没有运气。我可以使用搜索小部件隐藏转推,但不显示超过一周的推文,这在我的情况下是不可接受的。

通过一些 CSS 魔法隐藏推文也可以。我设法发现手动插入

div.timeline-Tweet--isRetweet {
  display: none !important;
}

在嵌入 HTML 的 CSS 中可以解决问题,但我无法以编程方式完成。

【问题讨论】:

  • 分享你注入风格的代码,也许有一些明显的错误。注入风格的骇人听闻的方法对我来说很可恶:document.querySelector('#twitter-widget-0').contentDocument.querySelectorAll('div.timeline-Tweet--isRetweet').forEach(node => node.style = 'display: none;'); 假设时间轴 iframe 的 id 为 #twitter-widget-0。有可能进入 iframe 的内脏,因为时间轴 iframe 被视为来自同一域。第二件事是我不知道 Twitter 小部件许可证是否允许进行此类操作。
  • 嗨,谢谢!我真的没有任何代码,因为我对 JS 毫无头绪。我现在正在尝试您的,但它不起作用,即使 id 与您的相同。我应该如何插入这个?我用<script> yourcode </script>
  • 我只是在带有 Twitter 时间线的某个随机页面上按 F12 让自己进入浏览器控制台并写了这个......我今天将作为完整的例子来做......因为它可能需要一点引导才能工作......就像等待加载事件说时间轴已加载等......
  • 我不是律师,但@Medet 对于是否可以操作小部件的 iframe 内容可能是正确的。准确地说是看Developer Agreement & PolicyII。许可材料的使用限制.A.2...我会简单地向 Twitter 发送一封电子邮件,看看他们是否可以接受这样的事情,并且还会说明为什么要采用这种方法。跨度>

标签: html search twitter embed


【解决方案1】:

这很容易。例如,我们将使用 caitp88 帐户进行演示如果你愿意,之后可以关注她)

正如您在她的个人资料中看到的,最新的推文是转推

但我们不想转发,对吧?

所以我们去搜索表单并输入from:caitp88 -RT

然后我们从这个搜索中创建一个嵌入 小部件配置窗口打开,您只需点击创建小部件

小部件不会包含任何转推
在行动:

别忘了把caitp88改成你自己的推特句柄

请注意,这是官方的合法解决方案

【讨论】:

  • 抱歉,刚刚编辑了问题。我以为我提到过我尝试过,但它对我不起作用,因为没有显示超过一周的推文。有什么办法可以解决吗?
  • @Guido 确实没有其他选择,不显示超过一周的推文也许您的帐户没有新的推文,无论如何尝试不同的帐户以确保, div.timeline-Tweet--isRetweet 不能在 iframe 上使用
  • 我的帐户没有新的推文。我们很少发推文,但我们希望在我们的网站上有完整的时间表。我们可以通过推特列表来做到这一点,但会显示转推。我猜我是SOL? :)
  • 尝试添加新推文)可能新 API 不支持旧推文,所以您看不到它们
【解决方案2】:

来自我的 cmets 的改编

要使用 hacky 样式注入,只需将以下代码放入脚本标记中。这会将https://platform.twitter.com/widgets.js 脚本标签添加到您的页面,因此您不再需要将其作为单独的脚本标签。

// widgets script loading taken from Twitter
window.twttr = (function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0],
        t = window.twttr || {};
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "https://platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js, fjs);

    t._e = [];
    t.ready = function (f) {
        t._e.push(f);
    };

    return t;
}(document, "script", "twitter-wjs"));

twttr.ready(function (twttr) {
    twttr.events.bind("rendered", function (event) {
        var widgetFrame = event.target;
        var retweets = widgetFrame.contentDocument.querySelectorAll('div.timeline-Tweet--isRetweet');
        retweets.forEach(function (node) {
            if (node.parentNode) { // (in)sanity check
                node.parentNode.style = 'display: none;' // hide entire parent li tag
            }
        })
    });
});

备注一下

我们将父节点视为每个div.timeline-Tweet--isRetweet 都位于li 标记中,这为您提供了边框,因此您最终会在隐藏转推后留下一些奇怪的双边框。我认为没有办法通过 CSS 选择器到达父级,所以我们必须使用代码来做到这一点。

另外说明

黑客攻击严重依赖于时间线内容的结构方式,并且这些内容可能会在没有 Twitter 通知的情况下发生变化,因此您冒着有一天醒来时会感到沮丧并在时间线中转发回推的风险 ;)


更新

好的,这里是 v2,它会在 ol 上收听更新……但写完之后我开始理解弗兰肯斯坦博士的感受 ;)

window.twttr = (function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0],
        t = window.twttr || {};
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "https://platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js, fjs);

    t._e = [];
    t.ready = function (f) {
        t._e.push(f);
    };

    return t;
}(document, "script", "twitter-wjs"));

twttr.ready(function (twttr) {
    twttr.events.bind("rendered", function (event) {
        var frameDoc = event.target.contentDocument;

        // initially hide retweets
        var hideRetweets = function () {
            var retweets = frameDoc.querySelectorAll('div.timeline-Tweet--isRetweet');
            retweets.forEach(function (node) {
                if (node.parentNode && node.parentNode.style !== 'display: none;') { // (in)sanity check
                    node.parentNode.style = 'display: none;' // hide entire parent li tag
                }
            });
        };

        hideRetweets();

        // Twitter widget emitts no events on updates so we hook up ourselves to ol element to listen on it for additions of children
        var watcher = new MutationObserver(function (mutations) {
            // check whether new tweets arrived
            var hasNewTweets = mutations.some(function (mutation) {
                return mutation.addedNodes.length > 0;
            });
            if (hasNewTweets) {
                hideRetweets(); // rescan all tweets as it is easier
            }
        });
        watcher.observe(frameDoc.querySelector('ol.timeline-TweetList'), { childList: true });
    });
});

【讨论】:

  • 在设置小部件后,这不会处理新的转发(我假设它会显示新的推文),这就是我在回答中使用 CSS 注入的原因。
  • 你是对的!我最初正在考虑它,但最终以某种方式忽略了它......我们还可以在框架中将MutationObserver 连接到ol 并设置监听childList 的变化,然后重新执行隐藏,但我认为摆脱那些额外的边界以这种方式上升,它是如何以 2 的幂计算的 ;) 将尝试简单地检查它会变得多糟糕 ];>
  • 也许有一个 Twitter API 钩子,但实际上,这就是 CSS 擅长的,无需过于复杂 :)
  • 我在 API 文档中找不到任何东西......我个人会使用 CSS 方法,而忘记留下的边框会破坏它的外观
【解决方案3】:

我认为“from:myaccount -RT”应该可以工作,正如 Medet Tleukabiluly 已经提到的那样。不过有几点我想补充:

  1. -RT 查询仍将包括引用的转推,因为它更像您自己的推文而不是 RT。
  2. 如果您想完全控制推文,可以尝试TwitterFetcher,它将推文作为 JSON 数据返回,而不是嵌入 iframe。

【讨论】:

    【解决方案4】:

    这是一种使用 CSS 的方法。

    Twitter 时间线小部件创建一个 IFrame,我将在其中插入一个包含您的 CSS 的样式标签。这必须在小部件加载后发生。

    当然,这是一种脆弱的方式,如果 Twitter 改变它显示时间线的方式,它可能无法正常工作。

    // initialisation copied from Twitter API documentation
    window.twttr = (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0],
            t = window.twttr || {};
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.src = "https://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);
    
        t._e = [];
        t.ready = function(f) {
            t._e.push(f);
        };
    
        return t;
    }(document, "script", "twitter-wjs"));
    
    twttr.ready(function(twttr) {
        twttr.events.bind("rendered", function(event) {
            var widgetIframe = event.target;
    
            var style = widgetIframe.contentDocument.createElement("style");
            style.innerHTML = "div.timeline-Tweet--isRetweet { display: none}";
    
            widgetIframe.contentDocument.head.appendChild(style);
        });
    });
    

    这是一个使用这种技术对提要进行并排比较的小技巧:https://jsfiddle.net/cLc84Lrs/2/

    【讨论】:

      【解决方案5】:

      上面你有几个关于如何删除转发的答案,但历史数据的问题是 twitter 不会在历史数据中给出超过一周左右的数据。 (stackoverflow相关问题:Stackoverflow: Getting historical data from twitter

      答案是提供历史数据的付费服务(有一些罕见的免费选项)。这些服务的示例是Gnip(带有历史推特 api)或Followthehashtag(在那里您可以每天免费搜索 1 次,自 2006 年以来最多提供 500 条推文,但不确定是否支持 api。)

      【讨论】:

        猜你喜欢
        • 2012-09-02
        • 1970-01-01
        • 2014-12-26
        • 2014-12-31
        • 1970-01-01
        • 1970-01-01
        • 2023-01-31
        • 1970-01-01
        • 2012-12-20
        相关资源
        最近更新 更多