Twitter嵌入式時間線小部件

Question

我繼續下載http://platform.twitter.com/widgets.js

和http://platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css

嵌入式時間軸小部件使用的兩個文件。

我所要做的就是自定義小部件的CSS，因為twitter只給你一些設計選項，如鏈接顏色和暗/亮主題，我認為下載文件並自己修改會更容易。

唯一的問題是，我在嘗試將widgets.js中的css文件位置指向我的webapp上的副本時遇到了一些困難

widget.js中的一行 ，在twitters服務器上定位css文件，它與一些結合了前綴platform.twitter.com/值的變量捆綁在一起

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

我不知道要對widget.js進行多少編輯，但我猜它只有幾行？

如果任何精通javascript的人不介意看一看並告訴我“不值得努力” ，或者“這很簡單，只需將__改為__” ，請告訴我。

widgets.js是上面的第一個超鏈接

Answer 1

（請參閱下面的編輯以獲得更好的解決方案）這似乎對我有用，並且不需要花費太多時間來實現：

在widgets.js中，找到

function Z(a,b,c)

在功能Z中改變這個：

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

這樣的事情：

d.href=b

assetUrl只獲取文件的基本URL（例如CSS文件），該文件位於Twitter擁有的域中。 b將是您在整個JS中指定的路徑（例如embed / timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css）。 將所有CSS（如timeline.xyz.default.css）上傳到您想要的位置，然后您可以自定義這些文件並將它們保存在您自己的服務器上。 您無法通過簡單地將規則添加到服務器上的CSS文件來修改CSS，因為Twitter Feed位於來自不同域的iframe中。 不允許使用此類型的源（即，不是來自您自己的域）修改iframe中的CSS，以防止出現劫持類型問題，但如果iframe引用您自己服務器上的CSS，則可以修改內容。

您可能還需要檢查其他一些內容，以確保您擁有所有必需的文件。 您還應該獲取Twitter CSS文件中引用的sprite.png。 我能夠以這種方式自定義CSS，並且工作正常。

編輯：

我在IE7 / 6中的上述解決方案和Jelly Bean中的Chrome上遇到了問題，因此找到了一個更好的解決方案，可讓您將自己的自定義CSS文件注入iframe，同時在自己的域中使用所有Twitter的CSS。 從一個新的小部件。我去了，並添加了以下內容：

;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的副本。

Answer 2

看起來如果我下載wigdet.js和custom.css，那么widget不會選擇data-chrome =“transparent”

我下載了http://platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css

將其重命名為timeline.custom.css

改為wigdet.js鏈接到我的CSS

function b(e,t,n){
            var r;
            n=n||document;
            if(n.getElementById(e))return;
            r=n.createElement("link"),
            r.id=e,r.rel="stylesheet",
            r.type="text/css",
            r.href= "../css/timeline.custom.css",
            n.getElementsByTagName("head")[0].appendChild(r)
        }

鏈接到css是否正確？ 或推特使用最新版本的CSS？ http://platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css

如何使小部件拾取data-chrome =“transparent”

我使用了widget腳本

<a class="twitter-timeline"    
data-dnt="true"  
href="https://twitter.com/search?q=%23My_hush"                          
data-tweet-limit="1"
data-theme="dark" 
data-screen-name="some_name"                        
data-chrome="noscrollbar noheader transparent noborders nofooter"                        
      data-widget-id="My_id">
      Tweets about "#My_hush"</a>