A cool Twitter timeline web widget!
In this article, I will go through HTML, CSS, Javascript code to have a Twitter timeline widget, which can be used to have on any webpage. The end widget will look something as follows. Prior knowledge of HTML and CSS is required to grasp the complete article.
<!DOCTYPE html>
<html lang=”en”>
<link href=”./style.css” rel=”stylesheet”>
<script async src=”https://platform.twitter.com/widgets.js" charset=”utf-8"></script><body>
<div class=”twitter-widget” >
<div class=”twitter-widget-header-holder”>
<div class=”twitter-widget-header”>Tweets from NatGeo</div>
</div>
<div class=”twitter-widget-timeline-holder” >
<a class=”twitter-timeline” data-chrome=”noheader nofooter” href=”https://twitter.com/NatGeo" data-height=”100%”></a>
</div>
</div>
</body>
</html>
The source HTML consists of the main div element with class twitter-widget. It consists of two div elements within it, the header and the timeline.
The timeline has properties data-chrome=”noheader nofooter” to remove Twitter widget default header and footer. data-height=”100%” allows occupying the whole widget.
More info can be found here:
https://developer.twitter.com/en/docs/twitter-for-websites/timelines/overview
Cascading Style Sheets exists in style.css
twitter-widget CSS style
.twitter-widget {
width : 500px;
height : 700px;
min-height: 400px;
min-width: 300px;
border-radius: 10px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, .2);
background-color:deepskyblue;
display:flex;
align-items:stretch;
flex-direction:column;
}It has width and height elements that can be tweaked to have according to the size needed on the webpage. min-height and min-width determine the minimum height and width possible. The border-radius is to have round corners.
display:flex; align-items:stretch; flex-direction:column; allows the element to be shown in column fashion aligned correctly.
twitter-widget header CSS style
.twitter-widget-header-holder {
height:2%;
min-height: 40px;
max-height: 60px;
padding-top: 2%;
padding-right: 2%;
padding-left: 2%;
display: table;
}.twitter-widget-header {
background-color: aqua;
border-radius: 10px;
color: darkslateblue;
text-align: center;
display: table-cell;
vertical-align: middle;
font-size: 120%;
}
It’s straightforward to understand. Header height is 2% of the total height with min and max to not exceed.
display:table and display:table-cell; text-align:center; vertical-align:middle; allows the header text to show in the middle of the element
twitter-timeline CSS style
.twitter-widget-timeline-holder {
height: 100%;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 2%;
margin-top: 10px;
}.twitter-timeline {
border-radius: 10px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, .2);
}
It is very straightforward to understand.
margin-top:10px; allows to have space between the header and the timeline elements.
The complete source code can be found on the following GitHub link:
Enjoy!!!
