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

Question

我正在将 Twitter 时间轴嵌入到我的网站中。然而，我的转发正在那里显示，我不希望它们显示。

有什么简单的方法可以关闭它们吗？我好像找不到

我的搜索查询是 from:myaccount。我也试过 from:myaccount -RT，但没有成功。我可以使用搜索小部件隐藏转推，但 一周前的推文不会显示，这对我来说是不可接受的。

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

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

在 CSS 中，嵌入式 HTML 可以解决问题，但我无法以编程方式进行。

Answer 1

这很容易。例如，我们将使用 caitp88 帐户进行演示 ^{如果需要，您可以在之后关注她）}

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

但我们不希望转发，对吗？

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

然后我们从这个搜索创建一个嵌入小部件配置 window 打开，您只需单击 创建小部件

小部件将不包含任何转推
在行动中：

不要忘记将 caitp88 更改为您自己的 Twitter 用户名

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

Answer 2

我认为 "from:myaccount -RT" 应该有效，正如 Medet Tleukabiluly 已经提到的那样。不过有一些我想补充的：

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

Answer 3

这是一种使用 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);
    });
});

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

Answer 4

关于如何删除转推，你在上面有一些答案，但历史数据的问题是 twitter 不会给出超过一周左右的历史数据。（相关Whosebug问题：Whosebug: Getting historical data from twitter）

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

Answer 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
            }
        })
    });
});

备注一下

我们采用父节点，因为每个 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 });
    });
});

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

How to embed a twitter timeline without retweets?

html

embed

twitter

search