数日/数週間前、私のサイトのTwitterウィジェットの一部がデータの適切な取得を停止しました。バージョン2のTwitterウィジェットは非推奨であり、新しい埋め込みタイムラインウィジェットが唯一の方法であることが判明しました。
https://dev.twitter.com/blog/planning-for-api-v1-retirement
この新しいウィジェットを除いて、iframeが作成されます。これにより、フォントファミリ、フォントサイズ、色などの設定など、自分のスタイルシート内からウィジェットのカスタムスタイルを設定できなくなります。
回避策はありますか？私が読んでいることから、iframeにスタイルを適用/挿入することはできません。また、それを行うためのAPIの方法を見つけることができません。
また、ウィジェットを最新の3つのツイートのみに制限したいと思います。それがもう可能かどうかわからない、そして垂直スクロールバーを削除する（おそらくツイートの制限に関連している）。
jQuery で要素を個別にターゲットにする代わりに、インライン CSS スタイルをiframe内にロードされたページのヘッドに挿入することができます。そのため、「もっと見る」ボタンによってロードされた新しいコンテンツも変更されます。
たとえば、アバターの写真を削除するには:
$("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>');
setTimeout() の代わりに、 waituntilexists.jsプラグインを使用して、コンテンツがいつ DOM に追加されたかを検出します: 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>');
});
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);
user2787001から提供された回答に基づいて構築したいと思います。このアプローチ（ iframeでwaituntilexists.jsを使用）でも、スタイルが常に適用されているとは限らないことがわかりました。Twitter はこれをオンザフライでロードするため、iFrame がロードされるのを待つことは重要です。ただし、iframe はそのコンテンツをロードする必要があります。Twitter フィードを含む Web ページの更新に予想以上に時間がかかる場合は、存在しないものに再びスタイルを適用しようとします。最終的には、iframe 内のページにスタイルが実際に適用されていることを確認したいと考えています。
スタイリングを適用するために、適切なスタイルを含むスタンドアロンのスタイルシートを参照しました<link rel="stylesheet"... >。これが正常に適用された#twitter-widget-stylesことを確認するために、スタイルシートが配置されたことを確認するためにチェックできる ID ( ) を指定しました。
waituntilexists.js プラグインを使用する代わりに、.js を使用してその動作を模倣しましたwindow.setInterval。 任意の遅延で使用しないでください。 window.setTimeoutTwitter の iframe とそのコンテンツの読み込みに予想以上に時間がかかる可能性は十分にあります。遅延が短すぎると、スタイルは適用されません。遅延が長すぎると、スタイルのないコンテンツ (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>...
これについては、twitter のドキュメントで説明されています。
ツイート制限: タイムラインのサイズを事前に設定したツイート数に固定するには、 data-tweet-limit="5" 属性を 1 ～ 20 ツイートの任意の値で使用します。タイムラインは、タイムラインから指定された数のツイートをレンダリングし、ウィジェットの高さを拡大して、スクロールせずにすべてのツイートを表示します。ウィジェットは固定サイズであるため、このオプションを使用する場合、更新をポーリングしません。
明確な答えを得るには、あなたのコードを見る必要があります。問題を解決する可能性のある属性があり、これもtwitter ドキュメントの「Chrome」セクションで説明されています。
data-chrome="noscrollbar"
noscrollbar : 表示されている場合、メインのタイムライン スクロールバーをトリミングして非表示にします。標準のユーザー インターフェイス コンポーネントを非表示にすると、Web サイトのアクセシビリティに影響を与える可能性があることを考慮してください。
CSS スタイルは、 などのオプションを使用してスクロールバーを制御することもできますoverflow: hidden。
少なくとも、ツイートを制限してスクロール バーを削除することはできます。
ドキュメントから：
ツイート制限:タイムラインのサイズを事前に設定したツイート数に固定するには、 data-tweet-limit="5" 属性を 1 ～ 20 ツイートの任意の値で使用します。
と
Chrome:埋め込みコードで data-chrome="nofooter transparent" 属性を使用して、ウィジェットのレイアウトとクロムを制御します。次のオプションのスペース区切りのセットを使用します: noheader、nofooter、noscrollbar、transparent。
スタイリングはまだまだ検討中です。
独自のプロジェクトに 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;
このサイトにアクセスしてこのプラグインをダウンロードすると、 Jason Mayesを選択した方法でスタイリングできます
ウィジェットをコンテナーにラップすれば、settimeout なしで document ready を使用できることがわかりました。これは、ページの読み込み時だけでなく、ページの読み込み後にタイムライン自体の動的コンテンツが変更されたときにもトリガーする必要があります。
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%");
});
});
それ以外の場合は、すべての要素のスタイルを変更するのではなく、iframe にスタイルシートを追加することに関して a-gorsky に同意します。
これは私のために働いています
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
ツイートの数を設定するのに十分簡単です：
ツイート制限: タイムラインのサイズを事前に設定したツイート数に固定するには、 data-tweet-limit="5" 属性を 1 ～ 20 ツイートの任意の値で使用します。タイムラインは、タイムラインから指定された数のツイートをレンダリングし、ウィジェットの高さを拡大して、スクロールせずにすべてのツイートを表示します。ウィジェットは固定サイズであるため、このオプションを使用する場合、更新をポーリングしません。
ただし、ユーザーアイコンを削除する方法がわかりません。
これが私がしたことです。投稿数を制限すると、スライダーが自動的に削除されます。
<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>
widgets.jsを見て、次の行を探すと:
e.appendStyleSheet(twttr.widgets.config.assetUrl() + "/" + r("embed/timeline.css"))).then(p.bind(function() {
必要に応じて、 timeline.cssをコピーして両方のファイルを変更できます。