Built-in timeline widget

I went ahead and downloaded http://platform.twitter.com/widgets.js

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

Two files that use the built-in timeline widget.

All I am trying to do is customize the css widget, and since twitter gives you several design options, such as link color and dark / light theme, I thought it would be easier to upload files and modify them myself.

The only problem is that I am having difficulty trying to point the location of the css file inside widgets.js to a copy on my website

A string inside widget.js , hosting a css file on twitters servers, associated with some variables that combine the platform.twitter.com/ prefix value or something

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

I don’t know how much editing needs to be done for widget.js , but I assume this is just a couple of lines?

If anyone who understands javascript is not averse to taking a look and telling me β€œNot worth the effort,” or β€œIt's simple, just change __ to __,” let me know.

widgets.js - the first hyperlink above

+4
source share
2 answers

(See my edits below for a better solution). This seems to work for me and does not 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 

like that:

 d.href=b 

In an asset, Url simply gets the base URL of the file (for example, a CSS file) that belongs to the domain, the owner of the domain. b - the paths you specify in JS (e.g. embed / timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css). Download all the CSS (e.g. timeline.xyz.default.css) to where you want, then you can configure these files and save them on your own server. You cannot change CSS simply by adding rules to the CSS file on your server, as the Twitter feed is in an iframe from another domain. Changing CSS in an iframe with this type of source (i.e., not from your own domain) is not allowed to prevent capture problems, but if the iframe references CSS on your own server, then you can change it.

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

Edit:

I had problems with the above solution in IE7 / 6 and Chrome in Bean jelly, so I found a better solution that allows you to embed your own CSS file in an iframe, adhering to all CSS CSS in your own domain. From 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); 

right after

 c.getElementsByTagName("head")[0].appendChild(d) 

in the widgets.js line starting with

 provide("tfw/widget/timeline" 

(again in function Z). This works much better, and all you need is a copy of widgets.js at http://platform.twitter.com/widgets.js .

+3
source

It seems that if I load wigdet.js and custom.css, then the widget will not pick up Data chrome = "transparent"

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

renamed it timeline.custom.css

Changed in wigdet.js link to my 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) } 

Is the css link correct? Or is twitter using the latest version of css? http://platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css

How to make a widget to get data-chrome = "transparent"

I used the script 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> 
0
source

Source: https://habr.com/ru/post/1432794/


All Articles