如何在没有转推的情况下嵌入Twitter时间线?

Gui*_*ido 22 html embed twitter search

我正在将Twitter时间线嵌入我的网站.然而我的转推正在那里展示,我不希望他们.

有没有简单的方法来关闭它们?我似乎找不到任何东西

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

通过一些CSS魔术隐藏推文也行.我设法找出手动插入

div.timeline-Tweet--isRetweet {
  display: none !important;
}
Run Code Online (Sandbox Code Playgroud)

在嵌入式HTML的CSS中有诀窍,但我无法以编程方式进行.

Med*_*uly 7

这很容易.我们将使用例如caitp88演示帐户,如果你想要你可以跟随她

正如您在她的个人资料中看到的,最新的推文是转推 在此输入图像描述

但我们不想转发,对吧?

所以我们去搜索表单和类型 from:caitp88 -RT 在此输入图像描述

然后我们从这个搜索创建一个嵌入 在此输入图像描述 窗口小部件配置窗口打开,您只需单击创建窗口小部件

在此输入图像描述

小部件不包含任何转发
操作: 在此输入图像描述

别忘了换caitp88到自己的推特手柄

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

  • 这不再有效。https://twittercommunity.com/t/deprecating-widget-settings/102295 (2认同)

gaa*_*gaa 5

根据我的意见改编

要进行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
            }
        })
    });
});
Run Code Online (Sandbox Code Playgroud)

备注一下

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

另一句话

黑客入侵很大程度上取决于时间线内容的结构方式,并且这些内容可能会在没有Twitter通知的情况下发生变化,因此您可能会在此冒险,有一天您会醒来,然后在时间线中转推;)


更新资料

好的,这里是v2,它监听ol...的更新,但是写完之后,我开始理解Frankenstein博士的感受;)

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 });
    });
});
Run Code Online (Sandbox Code Playgroud)