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文件，它与一些结合了前缀 平台的变量捆绑在一起。 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就不会了数据铬= “透明”

我下载了 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>

Twitter嵌入式时间线小部件

2 个答案: