In this blog post I will share with you how to embed a tweet on your site as image. Embed a tweet on your site as image has some benefits:
- You don't have to deal with script setup complexity.
- Images can be cached and optmized for lazy load.
- Can be customized.
1. How to take a Twitter screenshot?
You can take a Twitter screenshot manually or use a tool for that. Right now, the best tool for taking Twitter Screenshots is TweetPik. See how to take a professional screenshot using TweetPik on this blog post.
For manually screenshots, you can navigate into the tweet page that you want to screenshot and press the keyboard button "PrtScrn" or, if you are using a mac, you can press "cmd + shift + 4" and select the tweet area.
Using TweetPik, you can fully customize the tweet colors, backgroumd, dimensions and visible elements but if you are doing that manually, the app Canva can be a good option to add some nice design.
By the way, you can use TweetPik + Canva to create awesome results like I did on this post.
3. Optimizing the image
After take the screenshot, you want to optimize the image to make it smaller as possible. So, the browser can load and display it very fast without affect the user experience.
If you are using TweetPik, you can screenshot your tweet using the option "Save on cloud" to automatically apply all the optmizations that you will need. You can also later, define the right size for your image using the given URL.
4. Adding the image to your website
Add the image to your website is also very simple. You just need to add the code bellow:
<a href="https://twitter.com/user/status/tweet-id" target="_blank" rel="noreferrer"> <img src="the-path-to-your-image" loading="lazy" width="400" height="400" alt="Put the tweet text here"></img> </a>
Some important things to note:
- Wrap the image with the tweet link. So your users can see it on Twitter if they want to.
- We are using the loading attribute as lazy to only load the image when it is needed. If the image will be displayed right on the top, you should remove this option to make the browser load it right away.
- It is a good practice to set the width and height of an image so the browser can calculate the right space for it and avoid layout shift.
- Always add the tweet text to your alt. It makes the image accessible for all.
If you are using TweetPik, you can set the dimensions using the url like the example bellow using the "h" and "w" parameters:
<img src="https://ik.imagekit.io/tweetpik/289659710454366722/1406247369138638848_gnndZJVbRM.png?h=400&w=400" alt="Alt text" loading="lazy"></img>
Check how it looks like: