4

我继续下载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是上面的第一个超链接

4

2 回答 2

3

（请参阅下面的编辑以获得更好的解决方案）这似乎对我有用，并且不需要太多时间来实施：

在 widgets.js 中，找到

function Z(a,b,c)

在函数 Z 中更改它：

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

像这样：

d.href=b

assetUrl 只是获取文件（例如 CSS 文件）的基本 URL，该文件位于 Twitter 拥有的域中。b 将是您在整个 JS 中指定的路径（例如 embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css ）。将所有 CSS（如timeline.xyz.default.css）上传到您想要的位置，然后您可以自定义这些文件并将它们保存在您自己的服务器上。您无法通过简单地将规则添加到服务器上的 CSS 文件来修改 CSS，因为 Twitter 提要位于来自不同域的 iframe 中。不允许使用这种类型的源（即不是来自您自己的域）修改 iframe 中的 CSS，以防止劫持类型的问题，但如果 iframe 引用您自己服务器上的 CSS，那么您可以修改内容。

您可能还需要检查其他一些内容，以确保您拥有所有必需的文件。您还应该获得在 Twitter CSS 文件中引用的 sprite.png。我能够以这种方式自定义 CSS，并且效果很好。

编辑：

我在 IE7/6 中的上述解决方案和 Jelly Bean 中的 Chrome 中遇到了问题，因此找到了一个更好的解决方案，它可以让您将自己的自定义 CSS 文件注入 iframe，同时在自己的域中坚持使用 Twitter 的所有 CSS。我从一个新的 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 回答
0

看起来如果我下载 wigdet.js 和 custom.css 然后小部件不会拾取 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的链接是否正确？还是 twitter 使用最新版本的 css？ http://platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css

如何制作小部件以拾取 data-chrome="transparent"

我使用了小部件脚本

<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>
于 2013-08-27T17:41:34.557 回答