4

先に進んでダウンロードしましたhttp://platform.twitter.com/widgets.js

そしてhttp://platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css

埋め込まれたタイムライン ウィジェットが使用する 2 つのファイル。

私がやろうとしているのは、ウィジェットの css をカスタマイズすることだけです。Twitter では、リンクの色や暗い/明るいテーマなどのいくつかのデザイン オプションしか提供されないため、ファイルをダウンロードして自分で変更する方が簡単だと思いました。

唯一の問題は、 widgets.js内の css ファイルの場所をwebapp のコピーに向けようとするのが難しいことです。

widget.js内の行は、twitter サーバー上の css ファイルを見つけます。これは、プレフィックス付きのplatform.twitter.com/値などを組み合わせたいくつかの変数と結びついています。

provide("tfw/assets",...{"default":"embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css",

widget.jsをどれだけ編集する必要があるかはわかりませんが、数行しかないと思いますか?

JavaScript に堪能な方で、「努力する価値はありません」または「簡単です。__ を __ に変更するだけです」と言って差し支えない場合は、お知らせください。

widgets.jsは上記の最初のハイパーリンクです

4

2 に答える 2

3

（より良い解決策については、以下の私の編集を参照してください）これは私にとってはうまくいくようで、実装にそれほど時間はかかりません：

widgets.js で、

function Z(a,b,c)

関数 Z でこれを変更します。

d.href=twttr.widgets.config.assetUrl()+"/"+b

このようなものに：

d.href=b

assetUrl は、Twitter が所有するドメインにあるファイル (CSS ファイルなど) のベース URL を取得するだけです。b は、JS 全体で指定するパスになります (embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css など)。すべての CSS (timeline.xyz.default.css など) を必要な場所にアップロードすると、それらのファイルをカスタマイズして、独自のサーバーに保持できます。Twitter フィードは別のドメインの iframe にあるため、サーバー上の CSS ファイルにルールを追加するだけでは CSS を変更できません。ハイジャックタイプの問題を防ぐために、このタイプのソース (つまり、独自のドメインからのものではない) を使用して iframe 内の CSS を変更することは許可されていませんが、iframe が独自のサーバー上の CSS を参照している場合は、変更することができます。

必要なファイルがすべて揃っていることを確認するために、チェックアウトしたい項目が他にもあるかもしれません。また、Twitter CSS ファイルで参照されている sprite.png も取得する必要があります。このようにCSSをカスタマイズすることができ、うまくいきました。

編集：

IE7/6 の上記のソリューションと Jelly Bean の Chrome で問題が発生したため、Twitter のすべての CSS を独自のドメインで保持しながら、独自のカスタム CSS ファイルを iframe に挿入できるより良いソリューションを見つけました。新鮮なwidgets.jsから、私は行って以下を追加しました:

;d=c.createElement("link"),
d.id="custom-css-1",
d.rel="stylesheet",
d.type="text/css",
d.href="http://mydomain.com/css/timeline.custom.css";
c.getElementsByTagName("head")[0].appendChild(d);

直後

c.getElementsByTagName("head")[0].appendChild(d)

で始まるwidgets.jsの行に

provide("tfw/widget/timeline"

(再び関数 Z で) これははるかにうまく機能するようで、必要なのはhttp://platform.twitter.com/widgets.jsにある widgets.js のコピーだけです。

于 2012-10-05T04:13:48.053 に答える