web-dev-qa-db-ja.com

リツイートせずにTwitterのタイムラインを埋め込む方法は？

Twitterのタイムラインを自分のWebサイトに埋め込んでいます。しかし、私のリツイートはそこに表示されているので、表示したくありません。

それらをオフにする簡単な方法はありますか？何も見つからないようです

私の検索クエリはfrom:myaccount。私も試しましたfrom:myaccount -RT、運がない。検索ウィジェットでリツイートを非表示にすることはできますが、1週間以上前のツイートは表示されませんこれは私の場合は受け入れられません。

CSSの魔法でツイートを非表示にすることもできます。手動で挿入することをなんとか見つけました

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

埋め込まれたHTMLのCSSでうまくいきますが、プログラムでそれを行うことはできません。

htmlsearchtwitterembed
22
Guido

私のコメントからの適応

ハッキースタイルのインジェクションを使用するには、次のコードをスクリプトタグに挿入するだけです。これにより、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からの通知なしに変更される可能性があるため、いつか目を覚ましてタイムラインに戻ってリツイートするリスクがあります;）

更新

わかりました。これはol...の更新をリッスンするv2ですが、それを書いた後、フランケンシュタイン博士の気持ちを理解し始めます;）

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 });
    });
});
5
gaa

とても簡単です。たとえば、 caitp88 アカウントのデモを使用しますあなたが望むなら、あなたは後で彼女に従うことができます）

彼女のプロフィールでわかるように、最新のツイートはリツイートです enter image description here

しかし、リツイートはしたくないですよね？

そこで、検索フォームに移動して、from:caitp88 -RT（enter image description here

次に、この検索から埋め込みを作成します enter image description here ウィジェット設定ウィンドウが開き、ウィジェットの作成をクリックするだけです

enter image description here

ウィジェットにはリツイートは含まれません
動作中： enter image description here

caitp88を自分のTwitterハンドルに変更することを忘れないでください

そして、これはIS公式、法的解決策

7
Medet Tleukabiluly

Medet Tleukabilulyがすでに述べたように、「from：myaccount-RT」は機能するはずだと思います。ただし、追加したいことがいくつかあります。

  1. -RTクエリは、RTというよりも自分のツイートに似ているため、引用されたリツイートは引き続き含まれます。
  2. ツイートを完全に制御したい場合は、 TwitterFetcher を試してみてください。これは、埋め込みiframeではなくJSONデータとしてツイートを返します。
4
AVAVT

CSSを使用してこれを行う方法は次のとおりです。

Twitterタイムラインウィジェットは、CSSを含むスタイルタグを挿入するIFrameを作成します。これは、ウィジェットがロードされた後に発生する必要があります。

もちろん、これは脆弱な方法であり、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/

1
Bewusstsein

リツイートを削除する方法については上記のいくつかの回答がありますが、履歴データの問題は、Twitterが履歴データで1週間以上データを提供しないことです。 （関連するstackoverflowの質問： Stackoverflow：Twitterから履歴データを取得する ）

これに対する答えは、履歴データを提供する有料サービスです（いくつかのまれな無料オプション付き）。これらのサービスの例は、 Gnip （過去のTwitter apiを使用）または Followthehashtag （2006年以降最大500件のツイートを提供する1日1回の無料検索を実行できますが、 APIサポート。）

1
JohanSellberg