How To Embed Tweets As Images On Your Website
Have you ever embedded a Tweet on your site, only to find out later that it’s been deleted? Or perhaps the way the embed shows doesn’t create the best user experience for reading tweets (cropped image attachment, missing characters, etc)?
Annoying right? Well, thankfully, TweetPik can help you fix that, by embedding a Tweet as an image.
What are the advantages of embedding a Tweet as an image?
- Images can be cached and optmized for lazy load, making your site faster.
- Tweets can be customized.
- If a user deletes or changes privacy settings on a Tweet, it won’t disappear from your blog.
- You don’t have to deal with script setup complexity or HTML
1. How to take a Twitter screenshot?
Sure, you can take a Twitter screenshot manually, but it’s not going to look great. We think better-looking tweets make for a better overall UX, and as such, we think the best tool for taking Twitter Screenshots is TweetPik.
How To Take A Manual Screen Shot On Twitter:
For manual 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.
Problems with this approach are that you end up with disproportionate sizing of text and images, not to mention a bunch of metadata (like date, time, likes, retweet count) that interfere with users simply enjoying or learning from the tweet.
The advantage of this approach is that you can save a few bucks a month vs. using a tool like TweetPik PRO, which costs about 2 cups of coffee.
How To Automatically Create Beautiful Twitter Screenshots:
TweetPik. Our user interface is simple to use and fully customizable. More on that in this blog post.
2. Customization
Using TweetPik, you can fully customize the Tweet colors, background, 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 you 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 affecting the user experience.
If you are using TweetPik, you can screenshot your tweet using the option “Save on cloud” to automatically apply all the optimizations that you will need. You can also later, define the right size for your image using the given URL.
If you are doing that manually, you can use services like resizeimage.net for resizing and https://tinypng.com to compress the image.
4. Adding the image to your website
Adding the image to your website is also very simple. You just need to add the code below:
<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 below using the “h” and “w” parameters:
<img src="https://ik.imagekit.io/tweetpik/289659710454366722/1406247369138638848_gnndZJVbRM.png?tr=h=400,w=400" alt="Alt text" loading="lazy"></imgCheck how it looks like:
