Tools needed:
- CLR Browser Plugin by Faruton
- A Twitter account
Result:
- https://www.youtube.com/watch?v=PjmRln0OXz4
- - - You can see that there's an auto-update at 2:03. Quick flash. No new tweets from the timeline in this case but if there were any, it would've been updated. The webpage in question is set to auto update every 120 seconds via this meta setting: <meta http-equiv="refresh" content="120" >. The "120" part means the page auto refresh every 120 secs. Any CSS styling is secondary, you do that later, after you get things working.
Allright. So.. how does one accomplish this?
First of all:
- What you'll need to do is to create a new, fresh HTML page for this specific purpose, with no CSS styling, then point the OBS CLR Browser Plugin to that page. CSS styling comes later, just make it work for now. In my case I'm using an actual online website with an unlisted page for this purpose, but the CLR Browser Plugin can also fetch HTML documents locally stored on your computer. This is of course a big deal because it means you can do all this without having admin rights on an actual website.
More specifically: (and you'll have to do some googling):
- You need to have some basic knowledge of HTML/CSS.
- You need to know how to set up a twitter widget. I'm using a 'List' in my example.
- You need to either have a website with all admin rights or a locally stored HTML document.
The 'simple' solution:
- Create a Twitter Widget.
- Include the code for the twitter widget you made on your web page. Style it with CSS.
- In OBS right click 'sources', add CLR Browser, point the URL to your locally saved file or an online hosted page.
Now, here's the kicker - you need to alter the twitter widget <a class> code. It's not actually hard, read carefully:
<a class="twitter-timeline" href="https://twitter.com/rebjorn/blizzard" data-widget-id="440918690716852224" data-theme="dark" data-link-color="#FFFFFF" data-related="twitterapi,twitter" data-aria-polite="assertive" data-tweet-limit="1" data-chrome="noheader nofooter noborders transparent" width="100%" height="500" lang="EN">Blizzard</a>
- - - Hehe.. 'not hard', you say. Well ok, thing is, if you know some CSS or HTML this isn't actually hard. Ok look:
- Don't mind all that code. Just use what you get from Twitter.. thing is, you'll get a code from Twitter upon creating a custom timeline, so that you have something to work with. BUT - you can change some things. Look: data-chrome="noheader nofooter noborders transparent" - THAT is what you'll be altering. You add that to the code you got from Twitter. Just place it after the height="500" for example, with one line space. I didn't.. you just need that code to be present correctly. It'll strip borders and the reply box and also make the whole output transparent.
Now, don't skip this part:
- You need to have your custom tailored web page auto update and this means you need to add the following into your HTML document: <meta http-equiv="refresh" content="120" > - place this between <body> and </body> anywhere you like. This will force the web page to auto update every 120 seconds. Set lower or higher as you prefer. Make sure you don't have any background and/or background is set to transparent using CSS.
- - -
If I forgot something or if anything could be explained better, let me know please.
- CLR Browser Plugin by Faruton
- A Twitter account
Result:
- https://www.youtube.com/watch?v=PjmRln0OXz4
- - - You can see that there's an auto-update at 2:03. Quick flash. No new tweets from the timeline in this case but if there were any, it would've been updated. The webpage in question is set to auto update every 120 seconds via this meta setting: <meta http-equiv="refresh" content="120" >. The "120" part means the page auto refresh every 120 secs. Any CSS styling is secondary, you do that later, after you get things working.
Allright. So.. how does one accomplish this?
First of all:
- What you'll need to do is to create a new, fresh HTML page for this specific purpose, with no CSS styling, then point the OBS CLR Browser Plugin to that page. CSS styling comes later, just make it work for now. In my case I'm using an actual online website with an unlisted page for this purpose, but the CLR Browser Plugin can also fetch HTML documents locally stored on your computer. This is of course a big deal because it means you can do all this without having admin rights on an actual website.
More specifically: (and you'll have to do some googling):
- You need to have some basic knowledge of HTML/CSS.
- You need to know how to set up a twitter widget. I'm using a 'List' in my example.
- You need to either have a website with all admin rights or a locally stored HTML document.
The 'simple' solution:
- Create a Twitter Widget.
- Include the code for the twitter widget you made on your web page. Style it with CSS.
- In OBS right click 'sources', add CLR Browser, point the URL to your locally saved file or an online hosted page.
Now, here's the kicker - you need to alter the twitter widget <a class> code. It's not actually hard, read carefully:
<a class="twitter-timeline" href="https://twitter.com/rebjorn/blizzard" data-widget-id="440918690716852224" data-theme="dark" data-link-color="#FFFFFF" data-related="twitterapi,twitter" data-aria-polite="assertive" data-tweet-limit="1" data-chrome="noheader nofooter noborders transparent" width="100%" height="500" lang="EN">Blizzard</a>
- - - Hehe.. 'not hard', you say. Well ok, thing is, if you know some CSS or HTML this isn't actually hard. Ok look:
- Don't mind all that code. Just use what you get from Twitter.. thing is, you'll get a code from Twitter upon creating a custom timeline, so that you have something to work with. BUT - you can change some things. Look: data-chrome="noheader nofooter noborders transparent" - THAT is what you'll be altering. You add that to the code you got from Twitter. Just place it after the height="500" for example, with one line space. I didn't.. you just need that code to be present correctly. It'll strip borders and the reply box and also make the whole output transparent.
Now, don't skip this part:
- You need to have your custom tailored web page auto update and this means you need to add the following into your HTML document: <meta http-equiv="refresh" content="120" > - place this between <body> and </body> anywhere you like. This will force the web page to auto update every 120 seconds. Set lower or higher as you prefer. Make sure you don't have any background and/or background is set to transparent using CSS.
- - -
If I forgot something or if anything could be explained better, let me know please.