Rel: custom coding for a twitter widget :)

[ItsMeerken]

Ever wondered how websites get a custom twitter feed that doesn't have all of the information here there and every where, it's just a constant re loading stream of tweets?

I've found out how to remove certain bits of the widget that Twitter offer and it leaves you with a nice & clean look to the stream.

Your widget should look something like this does:

<a class="twitter-timeline" href="https://twitter.com/markdavgraphics" data-widget-id="656578613559562240">Tweets by  [MENTION=67347]Mark[/MENTION]davgraphics</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>

What I'm going to do now will change the look from this:



and it will make it look completely different!


Okay, so from the first bit of coding I had above, I'm going to edit the string of coding that I have.
You want to add in this here:

data-chrome="this is where we put the content"

this should go after this part here:

<a class="twitter-timeline" href="https://twitter.com/markdavgraphics"

Now we get down to the good bits, keep following this!

To remove the background and header/footer, add this into your string of coding:

<a class="twitter-timeline" href="https://twitter.com/markdavgraphics" data-chrome="noheader nofooter noborders" data-widget-id="656578613559562240">Tweets by  [MENTION=67347]Mark[/MENTION]davgraphics</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>

this will make the widget look like this:



You can see, it's looking smarter already!

The next bit of coding will now remove the background, you just need to add in the word transparent and it will remove the background!

<a class="twitter-timeline" href="https://twitter.com/markdavgraphics" data-chrome="transparent" data-widget-id="656578613559562240">Tweets by  [MENTION=67347]Mark[/MENTION]davgraphics</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>

I added in the background colour in CSS as the Hex Reference of: #FF3D3D to show you it's transparent.



The next string of coding removes the scroll bar at the side so it automatically adds in new tweets and doesnt look so ugly.

just simply add this code in: noscrollbar

<a class="twitter-timeline" href="https://twitter.com/markdavgraphics" data-chrome="noscrollbar" data-widget-id="656578613559562240">Tweets by  [MENTION=67347]Mark[/MENTION]davgraphics</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>

This does however leave a white line at the side, but when you do the whole lot it removes it.



Now I'm going to remove everything and this just leaves a nice little stream that doesnt need updating every 2 minutes, this will look like this in the coding.

<a class="twitter-timeline" href="https://twitter.com/markdavgraphics" data-chrome="noheader nofooter noborders transparent noscrollbar" data-border-color="#ff3d3d" data-dnt="true" data-widget-id="656578613559562240">Tweets by  [MENTION=67347]Mark[/MENTION]davgraphics</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>

This looks nice and leaves it looking clean!



as for this, it looks really good on the site I'm coding right now for my website, it will be up very soon! I'm using AJAX & HTML & PHP on it




I do hope this helps you out a bit, sorry it's a bit messy but all of my tutorials are tbh

Enjoy!

[iJim.]

Nice guide! Have you got a work version to have a look at?

[Dentafrice]

For reference, there are a few other options that you can add in the data tags to achieve various things. The documentation for those are here: https://dev.twitter.com/web/embedded...nes/parameters