Transparent, borderless, scalable auto-updating tweets

#1
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.
 
#4
Hey cool tutorial, one question though, i cant get it to fetch tweets @ my account, just tweets made BY the account. Any idea what i might be doing wrong here?
Also: Video i still set to private. :p
 
#5
XeiZ said:
Hey cool tutorial, one question though, i cant get it to fetch tweets @ my account, just tweets made BY the account. Any idea what i might be doing wrong here?
Also: Video i still set to private. :p
Wow, apparently the URL changes when I do that. How did I miss this -.-
Hope it works now. Please let me know if not!

Regarding your question. I don't know, honestly - I'm not a pro with the Twitter API. And honestly I'm not sure I understand your question.. what's the difference? Perhaps you'll need to create a timeline for your account only.
 
#7
XeiZ said:
Nevermind, i got it :p I had to change the widget to "Search".
Cool, I'm really interested in knowing if it worked for you and if anything I said helped you.. ? Would ofc be great to see a sample from you if you could be bothered. In any case I hope you get it working right. I'm just a bit worried that this whole recipe really only works for a few people.
 
#8
Yes its working now, your guide helped a lot.
It was just me setting up the twitter widget wrong. ;p
It's really not that hard if you follow your guide, people just will have to read carefully about the changes that need to be made in the html file and it should work fine for them.

Here is the example but only in screenshot form because there isnt really anything to update yet:
https://www.dropbox.com/s/zzg5yqkjv3ygl ... .08.53.png

Used for an upcoming 48h charity marathon :)
 
#9
XeiZ said:
Here is the example but only in screenshot form because there isnt really anything to update yet:
https://www.dropbox.com/s/zzg5yqkjv3ygl ... .08.53.png

Used for an upcoming 48h charity marathon :)
That's great man. Looks perfect.. I take it you know already that you can style it how you want and place it where you like. You picked it all up really fast, but let me just add some observations please;

Remember, I limited the tweets number to 1 here actually, whereas the default is 5 I believe. This is of course a matter of preference but when you show 1 at a time you can totally keep it how you want. If you limit the height only and not the actual number of tweets you could end up with new tweets not looking good because half the text isn't visible. data-tweet-limit="1" - - - I also set he CLR Browser Configuration to the Dimensions Width 800 Height 100. The twitter widget has its own limit but with these setttings it seems I can ensure that long tweets won't be cropped and use too many lines. They won't all of a sudden expand too much either. You can also further limit the output by simply wrapping the whole code in divs. But give the widget 110% room vertical and horizontal.
 
#10
Yup, wasnt really that hard even with very limited html/css knowledge.
The only think i had to do in a "hacky" way is to cut out the profile picture, which i just cropped away in obs.
If i find a way to get rid of them through css it would be better since i could decrease the width. Currently if i decrease the width any further it will put the text below the profile pictures which makes it not possible to crop them away.

Also larger tweets tend to break it if the width gets to small sadly. One last thing i still need to figure out is if it's possible to decrease the distance between 2 shown tweets if you show more than 1, currently there is a pretty big gap between them which creates a lot of dead space.
 
#11
XeiZ said:
Also larger tweets tend to break it if the width gets to small sadly.
Yeah man I was just editing that as you can see from my above post. Just setting the width in the CLR Browser Configuration to a very high limit is a good thing, like 800px for example. The widget will limit its width anyway and if you set it to 800px or something, you'll get a nice result that won't look terrible even on low resolution computers. In my case for this purpose I'm just using 800px Width and 100px Height.
 
#12
Can you guys help me with this please? I've done HTML and CSS before, but I don't know WHY this isn't working.

Here's the code from my widget.

HTML:
<a class="twitter-timeline" href="https://twitter.com/IamNinetyFour" data-widget-id="574001730217623552">Tweets by @IamNinetyFour</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 
Top