Twitter的嵌入时间轴小部件

我继续下载http://platform.twitter.com/widgets.js Twitter的嵌入时间轴小部件

和嵌入时间轴小部件使用的http://platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css

两个文件。

我想要做的是自定义小部件的CSS，由于Twitter只给你一些设计选项，如链接颜色和黑暗/轻的主题，我认为它会更容易下载文件和自己修改它们。

唯一的问题是，我有一些困难，试图在我的webapp

一条线指向widgets.js到副本里的CSS文件的位置内widget.js ，定位在Twitter的服务器上的css文件，它捆绑了一些变量，结合一个前缀platform.twitter.com/值什么

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

我没有多少编辑有工作要做，以widget.js但是我猜想它只有一对夫妇行？

如果有人精通JavaScript不会介意看看，并告诉我“不值得”，或“很简单，只是改变__至__”，让我知道。

widgets.js高于

来源

2012-09-06 De Cohere

第一个超链接（见下面我的编辑用于更好的解决方案），这似乎为我工作，并不需要太多的时间来实现：

在widgets.js，发现

function Z(a,b,c)

变化这FUNC重刑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源位于来自不同域的iframe中。不允许使用这种类型的源（即不是来自您自己的域）修改iframe中的CSS，以防止劫持类型的问题，但是如果iframe引用您自己的服务器上的CSS，则可以修改内容。

有可能是你可能想看看，以确保您拥有所有必需的文件一些其他的事情。您还应该获取Twitter CSS文件中提到的sprite.png。我能够以这种方式定制CSS，并且它工作正常。

编辑：

我有问题，在果冻豆在IE7/6和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 ）这似乎工作得更好，你需要的只是一个widgets.js的副本http://platform.twitter.com/widgets.js。

来源

2012-10-05 04:13:48 Quig

这个方法我试过，我认为这是辉煌的，我不能让它工作。在对一个干净的JS文件执行编辑之后，我看到一个看似空白的页面。然而仔细观察，我发现它正在生成iframe，并且twitter和custom css都被附加，并且脚本似乎运行，但没有真正的输出。该网页没有发生任何错误，我很困惑。通过调用，这绝对是编辑的行，打破它任何见解？该页面在:(当然在适当的情况下替换www）doubleu doubleu doubleu dot manatee.k12.fl.us/sites/title1/edlin – 2012-10-16 18:34:17

我想出了什么是解决了Twitter feed为空的问题希望能够解决您的问题。上面所做的更改（通过重新创建元素而不是仅重用原始widgets.js文件中创建的元素）修复了它。只有当自定义CSS文件路径不正确时才会发生这种情况。你有没有检查过，以确保你的自定义CSS的路径是可访问的？ – Quig

它看起来像如果我下载wigdet.js和custom.css然后小部件不拿起数据铬=“透明”

我下载 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心病RECT？或者twitter使用最新版本的css？ http://platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css

如何使小部件来拾取数据铬=“透明”

我用然而插件脚本

<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-27 17:41:34 Elena

Twitter的嵌入时间轴小部件

回答

相关问题