Embed tweets without compromising your users' privacy and your site's performance.
Learn more on stefanbohacek.com. Also available as a WordPress plugin.
Remix this project and update .env file with your own Twitter API keys. (See instructions inside that file.)
You can then open your project to see how to add necessary style and script tags to your page.
Be sure to remove any script tags from the embed code that Twitter gives you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://alternative-twitter-embeds.glitch.me/css/styles-bs.css" rel="stylesheet" type="text/css">
</head>
<body>
<TWEET CODE>
<script src="https://alternative-twitter-embeds.glitch.me/js/tweets.js"></script>
</body>
</html>If you're using Bootstrap v4 on your site, you can load an alternative slimmed down stylesheet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://alternative-twitter-embeds.glitch.me/css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<TWEET CODE>
<script src="https://alternative-twitter-embeds.glitch.me/js/tweets.js"></script>
</body>
</html>See a comparison of the PageSpeed performance test results between this project's page and the test page.
Need help or want to share feedback or suggestions? Feel free to reach out via email or on Twitter!
Use the tembeds_tweets_processed event.
document.addEventListener('tembeds_tweets_processed', () => {
const tweets = document.querySelectorAll('.twitter-tweet');
console.log('tweets are ready', tweets);
});Here's an example using jQuery.
$(document).on('tembeds_tweets_processed', () => {
const $tweets = $('.twitter-tweet');
console.log('tweets are ready', $tweets);
});Use the ALLOWED_URLS variable inside your .env file.
ALLOWED_URLS='alternative-twitter-embeds.glitch.me'
You can list multiple domains, separated by a comma.