Facebook Like - Timeline Design

Facebook Like - Timeline Design

In this tutorial, we are going to create Facebook Like - Timeline Design using jQuery and CSS. We all know, timeline design already exist on a social networking site and it's called Facebook. In this case, we are going to discuss how to design timeline in our web page in a simple and easiest way using jQuery, CSS, and JSON file for the data. Kindly take a look at the tutorial below and download the source code to try it in your WAMP or XAMPP server. First, we are going to construct the markup to display all the data that we have in JSON File. This is the simple source code.
  1. <div id='container'>
  2. <h1 style="color:blue;">
  3. Facebook Like - Timeline Design
  4. </h1>
  5. <div id="content_Timeline">
  6. <!---Content-->
  7. <!---End Content-->
  8. </div>
  9. </div>
Second, copy this link to completely functional the Timeline Design in your HEAD tag of your page.
  1. <link rel="stylesheet" href="css/animate.css">
  2. <link rel="stylesheet" href="css/style.css">
  3. <script type="text/javascript" src="js/jquery.min.js"></script>
  4. <script type="text/javascript" src="js/jquery.linkify.min.js"></script>
  5. <script type="text/javascript" src="js/jquery.livequery.js"></script>
Lastly, this is our JSON File where we can get our data to display on the web page. Save it as "users.json".
  1. {
  2. "Messages":[
  3. {
  4. "user":"John Doe",
  5. "message":"Free Source Code in http://www.sourcecodester.com/",
  6. "avatar":"https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png",
  7. "embed":"",
  8. "time":"16 seconds ago"
  9. },
  10. {
  11. "user":"John Meyer",
  12. "message":"Free Tutorials in Sourcecodester - http://www.sourcecodester.com/",
  13. "avatar":"http://static.tumblr.com/c172fd03bf2bedb77e13107cb22cdcc1/3rxa3xq/asBo7l3wr/tumblr_static_6fbdkgohxjgoc4c8o8kwoso4k.png",
  14. "embed":"",
  15. "time":"18 seconds ago"
  16. },
  17. {
  18. "user":"Jane Doe",
  19. "message":"VB.NET Master/Detail Windows Form, visit us http://www.sourcecodester.com/",
  20. "avatar":"https://www.tm-town.com/assets/default_female300x300-af1ea9327d6293733a8874dbd97ce49e.png",
  21. "embed":"<iframe width='560' height='315' src='//www.youtube.com/embed/vZ8j5UZCKSE' frameborder='0' allowfullscreen></iframe>",
  22. "time":"18 seconds ago"
  23. }
  24.  
  25. ]
  26. }

Output


Result
Note: You can customize your Timeline Design whatever your desired design by changing the CSS. Hope that this simple yet useful tutorials that I created may help you to your future projects. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Comments

Add new comment