ItsMeerken
20-10-2015, 09:58 PM
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 Markdavgraphics</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementB yId(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:
https://i.gyazo.com/69a4086a9752265b7b8fc5be7e93b4ed.png
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 Markdavgraphics</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementB yId(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:
https://i.gyazo.com/821b296666c2c378c59362f589474902.png
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 Markdavgraphics</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementB yId(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.
https://i.gyazo.com/eb9bdcc50ba3039bfa5c45bc9eafe4bc.png
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 Markdavgraphics</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementB yId(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.
https://i.gyazo.com/b96cd8a8c161474168b010a7908de571.png
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 Markdavgraphics</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementB yId(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!
https://i.gyazo.com/267bf922cc5d9e9630063af3da2e0473.png
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 :)
https://i.gyazo.com/483e364814ac25cd70b3ce3bcf9d507a.png
I do hope this helps you out a bit, sorry it's a bit messy but all of my tutorials are tbh xD
Enjoy!
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 Markdavgraphics</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementB yId(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:
https://i.gyazo.com/69a4086a9752265b7b8fc5be7e93b4ed.png
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 Markdavgraphics</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementB yId(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:
https://i.gyazo.com/821b296666c2c378c59362f589474902.png
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 Markdavgraphics</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementB yId(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.
https://i.gyazo.com/eb9bdcc50ba3039bfa5c45bc9eafe4bc.png
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 Markdavgraphics</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementB yId(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.
https://i.gyazo.com/b96cd8a8c161474168b010a7908de571.png
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 Markdavgraphics</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementB yId(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!
https://i.gyazo.com/267bf922cc5d9e9630063af3da2e0473.png
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 :)
https://i.gyazo.com/483e364814ac25cd70b3ce3bcf9d507a.png
I do hope this helps you out a bit, sorry it's a bit messy but all of my tutorials are tbh xD
Enjoy!