Embed Any Public Twitter Timeline Into Page – Tweets-loader.js

Tweets-loader.js is a JavaScript library that enabled you to embed any public Twitter timeline with custom styles into your webpage using Tweet Search Widget.

How to use it:

Create a new Search Widget under the Widgets setting in your Twitter profile page.

Import the Tweets-loader.js into your document.

<script src="tweets-loader.min.js"></script>

Code the HTML template for the tweets.

<div class="card">
  <div class="author">
    <span class="icon"></span>
    <span class="name">
      <span class="status"></span>
      <span class="value"></span>
    </span>
    <span class="datetime">
      <span class="date"></span>
      <span class="time"></span>
    </span>
  </div>
  <div class="text">
    <div class="value"></div>
  </div>
  <a class="media" target="_blank"></a>
</div>

Insert your Widget ID into the JavaScript.

const _widgetId = '953129656273661952';

The example JavaScript to embed tweets about a specific search query into the page.

function updateCard(dom, tweet) {
  // author info
  let domAuthor = dom.querySelector('.author');
  domAuthor.querySelector('.icon').style.backgroundImage = ('url("'+tweet.author.thumbnails.large+'")');
  domAuthor.querySelector('.name .value').innerHTML = tweet.author.name;
  domAuthor.querySelector('.status').innerHTML = tweet.author.status;
  // date/time
  ((d) => {
    let s = (n) => ('0'+(n||0)).slice(-2);
    let domDateTime = domAuthor.querySelector('.datetime');
    domDateTime.querySelector('.date').innerHTML = [d.getFullYear(), s(d.getMonth()+1), s(d.getDate())].join('/');
    domDateTime.querySelector('.time').innerHTML = [s(d.getHours()), s(d.getMinutes()), s(d.getSeconds())].join(':');
  })(tweet.date);
  // text
  dom.querySelector('.text .value').innerHTML = tweet.text
    .replace(/ /g, ' ')
    .replace(/\#[^\s]+/g, (s) => ('<htg>'+s+'</htg>'))
    .replace(/https?\:\/\/[^\s]+/g, (s) => ('<a href="'+s.trim()+'" target="_blank">LINK</a>'));
  
  // media
  let domMedia = dom.querySelector('.media');
  if (tweet.medias.length) {
    domMedia.style.backgroundImage = ('url("'+tweet.medias[0].image+'")');
    domMedia.setAttribute('href', tweet.medias[0].url);
    domMedia.classList.remove('hide');
  } else {
    domMedia.style.backgroundImage = '';
    domMedia.removeAttribute('href');
    domMedia.classList.add('hide');
  }
}
window.addEventListener('load', () => {
  let domOriCard = document.querySelector('.card');
  new TweetsLoader(_widgetId).on('update', (e) => {
    document.body.classList.add('ready');
    (e.detail||[]).forEach((tweet) => {
      let domCard = domOriCard.cloneNode(true);
      updateCard(domCard, tweet);
      document.body.insertBefore(domCard, document.body.firstChild);
    });
  });
});

The example CSS to style the tweet cards.

.card:last-of-type { display: none; }
.card {
  margin: 7vmin auto;
  padding: 3vmin;
  width: 80%;
  height: 60%;
  box-sizing: border-box;
  box-shadow: 0 0 3vmin #ccc;
  border-radius: 3vmin;
  border: 1px solid #ccc;
  display: flex;
  flex-flow: column;
  animation: show-card .5s linear;
  overflow: hidden;
  cursor: default;
}
@keyframes 
show-card {  from {
opacity: 0;
}
to { opacity: 1; }
}
.author {
  border-radius: inherit;
  color: #099;
  display: flex;
  flex-flow: row;
  align-items: center;
}
.author .icon {
  position: relative;
  width: 3em;
  height: 3em;
  border-radius: inherit;
  border: 1px solid #ccc;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.author .name {
  margin: 0 2vmin;
  display: flex;
  flex-flow: column;
  flex: 2 2;
}
.author .status::before { content: '@'; }
.author .status {
  font-size: .8em;
  opacity: .75;
  flex: 2 2;
}
.author .datetime {
  text-align: center;
  font-size: .8em;
  font-family: monospace;
  color: #666;
  display: flex;
  flex-flow: column;
}
.text {
  padding: 2vmin;
  display: flex;
  flex: 2 2;
}
.text .value {
  margin: auto;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text .value htg { color: #3cc; }
.text .value a {
 padding: .5vmin 1vmin;
 border-radius: .5vmin;
  background-color: #099;
  font-size: .8em;
  text-decoration: none;
  color: #fff;
}
.media.hide { display: none; }
.media::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 50%;
  background-image: linear-gradient(0, transparent, #fff);
  z-index: 1;
}
.media {
  position: relative;
  height: 39vmin;
  border-radius: inherit;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

Changelog:

10/25/2018

• Fixed Tweet DOM not found issues