Twitter嵌入时间线窗口小部件 [英] Twitter embedded timeline widget

问题描述

我继续下载并 http://platform.twitter.com/widgets.js

并且 http： //platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css

嵌入时间轴小部件使用的两个文件。

所有我想做的是自定义小部件的CSS，并且从twitter只给了一些设计选项，如链接颜色和一个黑暗/光主题，我认为这将更容易

只有问题是，我在将css文件位置指向小部件内部时遇到了一些困难.js 到我的webapp上的副本

widget.js >，在twitters服务器上找到css文件，它绑定了一些变量，它们组合了前缀 的平台价值或某事

  provide（tfw / assets，... {default：embed / timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css，
  

我不需要对 widget.js / strong>但我猜它只有几行？

如果任何精通javascript的人不介意去看看，告诉我不值得努力或很简单，只需更改__到__，让我知道。

widgets.js 是上面第一个超链接

解决方案

（看下面的编辑一个更好的解决方案）这似乎对我工作，并没有花很多时间实现：

在小部件。 js，find

  function Z（a，b，c）
  

在函数Z中更改此项：

  d.href = twttr .widgets.config.assetUrl（）+/+ b 
  

p>

  d.href = b 
  

b $ 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，那么您可以修改它。 >

可能还有一些其他的东西，你可能想检查一下，以确保你有所有需要的文件。你也应该得到sprite.png在Twitter CSS文件中引用。我可以自定义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）; 
  $ b  
 
 code> c.getElementsByTagName（head）[0] .appendChild（d）
  
在widgets.js开头为
的行上
 
 
 提供（tfw / widget / timeline
  
（再次在函数Z）这似乎工作得更好，你需要的是widgets.js的副本 http://platform.twitter.com/widgets.js 。
 
I went ahead and downloaded http://platform.twitter.com/widgets.js 

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

Two files the embedded timeline widget uses.

All I'm trying to do is customize the css of the widget, and since twitter only gives you a few design options like link color and a dark/light theme, I thought it would be easier to download the files and modify them myself.

Only problem is, I'm having some difficulty trying to point the css file location inside the widgets.js to the copy on my webapp

A line inside widget.js, locating the css file on twitters servers, its tied up with some variables that combine a prefixed platform.twitter.com/ value or something
provide("tfw/assets",...{"default":"embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css",
I don't how much editing has to be done to widget.js but my guess its only a couple lines?

If anybody proficient in javascript wouldn't mind taking a look and telling me "Not worth the effort", or "It's simple, just change __ to __", let me know.

  
widgets.js is the first hyperlink above

解决方案
(See my edit below for a better solution) This seemed to work for me and doesn't take much time to implement:

In widgets.js, find 
function Z(a,b,c)
Change this in function Z:
d.href=twttr.widgets.config.assetUrl()+"/"+b
to something like this:
d.href=b
The assetUrl just gets the base URL of the file (eg. a CSS file), which is at a domain Twitter owns. b will be the paths you specify throughout the JS (such as embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css ). Upload all the CSS (like timeline.xyz.default.css) to where you want it, then you can customize those files and keep them on your own server. You can't modify the CSS by simply adding rules to a CSS file on your server, since the Twitter feed is in an iframe from a different domain. Modifying CSS in iframes with this type of source (ie. not from your own domain) is not allowed, to prevent hijacking-type problems, but if the iframe refers to a CSS on your own server then you can modify things.

There may be some other things you might want to check out to make sure you have all the required files.  You should also get sprite.png which is referred to in the Twitter CSS file. I was able to customize the CSS this way and it worked fine.

Edit:

I had problems with the above solution in IE7/6 and Chrome in Jelly Bean so found a better solution that lets you inject your own custom CSS file into the iframe while sticking with all of Twitter's CSS at their own domain.  From a fresh widgets.js I went and added the following:
;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);
immediately after
c.getElementsByTagName("head")[0].appendChild(d)
on the line in widgets.js starting with
provide("tfw/widget/timeline"
(again in function Z) This seems to work much better, and all you need is a copy of widgets.js at http://platform.twitter.com/widgets.js.

                        
这篇关于Twitter嵌入时间线窗口小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！