Incrustar cualquier línea de tiempo de Twitter pública en Page-tweets-loader. js

Vista prévia

Descripción

Tweets-loader. js es una biblioteca de JavaScript que le permite incrustar cualquier línea de tiempo pública de Twitter con estilos personalizados en su página web utilizando Tweet Search Widget.

Funcionamiento

Crea un nuevo widget de búsqueda en la configuración de widgets en tu página de Perfil de Twitter.

Importe el tweets-loader. js en el documento.

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

Codificar la plantilla HTML para los 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>

Inserte su ID de widget en el JavaScript.

const _widgetId = '953129656273661952';

El ejemplo de JavaScript para incrustar tweets sobre una consulta de búsqueda específica en la página.

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);


});

});
});

El ejemplo CSS para el estilo de las tarjetas de Tweet.

.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;
}

Registro de cambios

10/25/2018

• Corregido el tweet DOM no encontró problemas