How to Embed Twitter API Feed Timeline Posts and Media Images in Website Using Javascript Full Project For Beginners

You are currently viewing How to Embed Twitter API Feed Timeline Posts and Media Images in Website Using Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be embeding twitter api feed timeline posts and media images in website in browser using vanilla javascript.All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<div class="card">
  <div class="widget-header">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" width="28" height="24" viewBox="0 0 20 20" version="1.1">
      <g><path fill="#55acee" d="M19.53 5.13C19.54 5.25 19.54 5.44 19.54 5.69 19.54 6.85 19.37 8.01 19.03 9.17 18.69 10.32 18.18 11.43 17.48 12.5 16.79 13.56 15.97 14.5 15.01 15.31 14.06 16.13 12.91 16.78 11.56 17.27 10.21 17.76 8.77 18 7.23 18 4.81 18 2.6 17.35 0.59 16.06 0.9 16.09 1.25 16.11 1.63 16.11 3.64 16.11 5.43 15.5 7 14.26 6.07 14.25 5.23 13.96 4.49 13.4 3.75 12.84 3.24 12.13 2.96 11.26 3.25 11.31 3.53 11.33 3.78 11.33 4.16 11.33 4.54 11.28 4.92 11.18 3.92 10.98 3.09 10.48 2.43 9.69 1.77 8.9 1.45 7.98 1.45 6.94L1.45 6.88C2.05 7.22 2.71 7.41 3.4 7.43 2.81 7.04 2.34 6.53 2 5.89 1.65 5.26 1.47 4.57 1.47 3.83 1.47 3.04 1.67 2.32 2.06 1.65 3.14 2.98 4.46 4.04 6.01 4.84 7.56 5.64 9.21 6.08 10.98 6.17 10.91 5.83 10.88 5.5 10.88 5.18 10.88 3.99 11.3 2.97 12.14 2.12 12.98 1.28 14 0.86 15.2 0.86 16.45 0.86 17.5 1.31 18.36 2.22 19.33 2.04 20.25 1.69 21.11 1.18 20.78 2.21 20.14 3 19.21 3.56 20.04 3.47 20.87 3.25 21.7 2.89 21.1 3.77 20.38 4.51 19.53 5.13Z"/></g>
    </svg>
    <h1>Get the scoop on Twitter</h1>
  </div>
  
    <!-- Widget #1 User Timeline -->
  <div class="widget">
      <a class="twitter-timeline" href="https://twitter.com/DunkinDonuts" data-widget-id="727935311226015744" data-chrome="nofooter noborders" data-tweet-limit="1" data-aria-polite="assertive">Tweets by @DunkinDonuts</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>
  </div>

  <!-- Widget #2 Search Timeline -->
  <div class="widget">
      <a class="twitter-timeline" href="https://twitter.com/hashtag/yext" data-widget-id="606644267499560961" data-chrome="nofooter noborders" data-tweet-limit="1" data-aria-polite="assertive">#yext Tweets</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>
  </div>
  
  <!-- Widget #3 Favorite Tweets Timeline -->
  <div class="widget">
      <a class="twitter-timeline" href="https://twitter.com/yext/favorites" data-widget-id="606917456163151872" data-chrome="nofooter noborders" data-tweet-limit="1" data-aria-polite="assertive">Favorite Tweets by @yext</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>
  </div>
  <button class="tweet-button">Send us a tweet!</button>
</div>

</a>

 

 

Now make a style.css file and copy paste the below code

 

style.css

 

$mercury:       #f5f5fa;
$tungsten:      #292f33;
$twitter-brand: #55acee;

html, body {
  height: 100%;
  padding: 1rem;
}

body, p {
  color: $twitter-brand;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 {
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.1;
}

.card {
  background-color: $mercury;
  overflow: hidden;
  outline: 0;
  border: 0;
  border-radius: 0;
  margin: auto;
  padding: 15px;
  width: 500px;
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
  -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
}

.widget-header {
  padding: 1rem 0;
  
  > svg {
    padding-right: 1rem;
    float: right;
  }
}

.widget {
  background-color: white;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  margin-top: 0.33rem;
  padding: 0;
  width: 460px;
}

button {
  cursor: pointer;
}

.tweet-button {
  background-color: $twitter-brand;
  border: 1px solid $twitter-brand;
  border-radius: 2px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.26);
  color: white;
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 1rem;
  padding: 1rem;
  position: relative;
  width: 100%;
  -webkit-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  
  &:hover {
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.35);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.35);
  }
}

 

 

Now if you open the index.html file inside the browser you will see the below screenshot

 

 

Leave a Reply