HOW TO present a collection of Tweets as a Slide Show

Twitter Moments lets you curate a set of public Tweets from anyone all at one place. Twitter’s recommendation is to keep Moments, the feature to stitch together multiple tweets into slideshow-like stories, around 10 tweets long. From my experience, there may be an upper limit of 50+ in a single collection but managing the list gets messy and some Tweets in the list may disappear or the order may get jumbled.

I found that Twitframe allows us to display Embedded Tweets on websites to dynamically show ~~retweet and~~ favorite counts, inline media/card data while isolating the Javascript and DOM manipulation to an embedded iframe. This is an independent service not affiliated with Twitter in any way. No guarantee of availability or security is made by using this service by Twitframe.

I used this service to build a slide show of any collection of public Tweets. Check a sample and the Github Gist of the code

	<html>
	<head>
	<title>
	Iframed Tweets
	</title>
	<style>
	.container {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
	/* padding-top: 75%; 4:3 Aspect Ratio */
	/* padding-top: 66.66%; 3:2 Aspect Ratio */
	/* padding-top: 62.5%; 8:5 Aspect Ratio */
	}

	/* Then style the iframe to fit in the container div with full height and width */
	.responsive-iframe {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	}
	</style>
	</head>

	<body>
	<button class="button" onclick="minusDivs()" accesskey="j"> ❮ </button>
	<button class="button" onclick="plusDivs()" accesskey="k"> ❯ </button>
	<hr>
	<div class="container">
	<iframe class="responsive-iframe" id="show" border="0" frameborder="0" height="700" width="550"
	src="https://twitframe.com/show?url=https://twitter.com/mvark/status/1309720586311008259"></iframe>

	<ol id="nav" style="display:none">
	<li><a href="https://twitter.com/mvark/status/1147467581361537024" rel="nofollow" target="_blank">A True Movie Buff</a></li>
	<li><a href="https://twitter.com/mvark/status/1205821940075642880" rel="nofollow" target="_blank">Obesity Warnings We Don't Want To See</a></li>
	<li><a href="https://twitter.com/mvark/status/1208031409442443265" rel="nofollow" target="_blank">Attention Seeker</a></li>
	<li><a href="https://twitter.com/mvark/status/1220404495764480000" rel="nofollow" target="_blank">Just Another Day In Bangalore</a></li>
	<li><a href="https://twitter.com/mvark/status/1221369421261758464" rel="nofollow" target="_blank">Omelette</a></li>
	<li><a href="https://twitter.com/mvark/status/1231461773779169280" rel="nofollow" target="_blank">Near Death Experience</a></li>
	<li><a href="https://twitter.com/mvark/status/1254984334789885952" rel="nofollow" target="_blank">Tripping down the History Rabbit Hole</a></li>
	<li><a href="https://twitter.com/mvark/status/1256110871404670976" rel="nofollow" target="_blank">The Joy Of Science</a></li>
	<li><a href="https://twitter.com/mvark/status/1293747327333621760" rel="nofollow" target="_blank">Self-destructive Earth</a></li>
	<li><a href="https://twitter.com/mvark/status/1309720586311008259" rel="nofollow" target="_blank">The Masochist and the Chaos Monkey Drone</a></li>
	</ol>
	</div>
	<script>
	// TODO: jump to, on click
	// Reference: https://stackoverflow.com/a/46144832/325251
	// https://www.w3schools.com/howto/howto_css_responsive_iframes.asp

	const navbar = Array.from(document.querySelectorAll('#nav>li>a'));

	let slideIndex = 0;
	showDivs(slideIndex);

	function plusDivs() {
	slideIndex = slideIndex === navbar.length - 1 ? 0 : slideIndex + 1;
	showDivs(slideIndex);
	}

	function minusDivs() {
	slideIndex = slideIndex === 0 ? navbar.length - 1 : slideIndex - 1;
	showDivs(slideIndex);
	}

	function showDivs(slideIndex) {
	document.getElementById("show").src="https://twitframe.com/show?url=" + navbar[slideIndex].href;
	}
	</script>
	</body>
	</html>

view raw IframedTweets.html hosted with ❤ by GitHub

If you enable Tracking prevention in Microsoft Edge, the code doesn't work as this setting blocks a script required by Twitframe. This warning shows up in Dev Tools - Tracking Prevention blocked a Script resource from loading https://platform.twitter.com/widgets.js.