[FIX #23] Fixed the vacant space using twitterpostfetcher

css/twitterFetcher.css

@@ -0,0 +1,112 @@
+/*
+* Example style!
+* You can do whatever the hell you want on your site :-)
+*/
+
+@import url('https://fonts.googleapis.com/css?family=Open+Sans');
+
+h2 {
+  clear:both;
+}
+
+p, a {
+  font-size:17px;
+  font-family: 'Open Sans', sans-serif;
+  margin:10px 0 0 0;
+  color:#3d3d3d;
+}
+
+a, a:visited {
+  color:#427fed;
+}
+
+a:hover {
+  color:#82afff;
+}
+
+.tborder > li {
+  list-style:none;
+  overflow:hidden;
+  border:1px solid #dedede;
+  margin:5px;
+  padding:5px;
+}
+
+.tborder > li:hover {
+  background-color:#f0f3fb;
+}
+
+.user, .tweet, .timePosted {
+  float:left;
+}
+
+.user {
+  width:25%;
+}
+
+.tweet {
+  width:50%;
+}
+
+.timePosted {
+  width:15%;
+}
+
+.user {
+  clear:left;
+}
+
+.user a {
+ width: 100px;
+}
+
+.user span span {
+  width:100px;
+  display:block;
+  margin-top:10px;
+}
+
+.user img, .user a > span {
+  float:left;
+}
+
+.interact {
+  float:left;
+  width:10%;
+  margin-top:-7px;
+}
+
+.interact a {
+  margin-left:5px;
+  float:left;
+}
+
+.user a > span {
+  margin-left:10px;
+}
+
+.tmedia{
+  width: 25%;
+  margin: auto;
+}
+
+.tmedia img {
+  max-width:270px;
+  max-height:270px;
+}
+
+#linkage {
+  position:fixed;
+  top:0px;
+  right:0px;
+  background-color:#3d3d3d;
+  color:#ffffff;
+  text-decoration:none;
+  padding:5px;
+  width:10%;
+  font-family:arial;
+}
+
+.tco-hidden{
+  display: none;
+}

index.html

@@ -21,6 +21,7 @@
 	<link rel="stylesheet" href="css/jquery.fullpage.css">
 	<link rel="stylesheet" href="css/transitions.css">
 	<link rel="stylesheet" href="css/main.css">
+	<link href="css/twitterFetcher.css" rel="stylesheet" type="text/css" />
 	<link rel="stylesheet" href="css/colors/color-3.css">
 	<link rel="stylesheet" href="css/responsive.css">
 	<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
@@ -2600,14 +2601,8 @@ <h3>Latest Tweets</h3>
 							</div>
 						</div>
 						<div class="tg-latestarticles">
-							<div class="col-sm-offset-2 col-sm-10 col-md-offset-3 col-md-6 col-lg-6">
-								<a class="twitter-timeline"
-									data-width="500"
-									data-tweet-limit="3"
-									data-chrome="nofooter noborders noscrollbar transparent noheader"
-									data-dnt='true'
-									href="https://twitter.com/pyconindia"></a>
-								<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
+							<div class="col-sm-12 col-md-12 col-lg-12">
+								<div id="pyconindiaTweets"></div>
 							</div>
 							<!--<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
 								<article class="tg-post tg-themepost">
@@ -2749,8 +2744,12 @@ <h3><a href="">Gonna Make You An Offer You Can’t Refuse</a></h3>
 	<!--************************************
 			Wrapper End
 	*************************************-->
+	<!-- moment.js only needed for Query 6 example -->
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
+    <script type="text/javascript" src="js/vendor/twitterFetcher.js"></script>
+    <script type="text/javascript" src="js/vendor/config.js"></script>
 	<script src="js/vendor/jquery-library.js"></script>
-	<script src="js/vendor/bootstrap.min.js"></script>
+	<script src="js/vendor/bootstrap.js"></script>
 	<script src="https://maps.google.com/maps/api/js?key=AIzaSyCR-KEWAVCn52mSdeVeTqZjtqbmVJyfSus&language=en"></script>
 	<script src="js/customScrollbar.min.js"></script>
 	<script src="js/packery.pkgd.min.js"></script>

js/vendor/config.js

@@ -0,0 +1,18 @@
+
+/**************************************************************************
+ * NEW: These first examples no longer need the Widget ID to work.
+ *************************************************************************/
+
+
+var configProfile = {
+  "profile": {"screenName": 'pyconindia'},
+  "domId": 'pyconindiaTweets',
+  "maxTweets": 5,
+  "enableLinks": true, 
+  "showUser": true,
+  "showTime": true,
+  "showImages": true,
+  "lang": 'en'
+};
+twitterFetcher.fetch(configProfile);
+