If you’re like me, you may have been thrilled when (back in the day) it became possible to embed public social media posts such as tweets on websites and blogs. It enabled people who read here to pop over to related Twitter discussions or see images more easily.
However, with how things have been progressing (PS – you can find me @DanaMLewis@med-mastodon.com as well), it’s increasingly possible that a social media account could get suspended/banned/taken down arbitrarily for things that are retrospectively against new policies. It occurred to me that one of the downsides to this is the impact it would have on embedded post content here on my blog, so I started thinking through how I could replace the live embedded links with screenshots of the content.
There’s no automatic way to do this, but the most efficient method that I’ve decided on has been the following:
1 ) Export an XML file of your blog/site content.
If you use WordPress, there’s an “Export” option under “Tools”. You can export all content, it doesn’t matter.
2 ) Run a script (that I wrote with the help of ChatGPT).
I called my script “embedded-links.sh” and it searches the XML file for URLs found between “[ embed ]” and “[\embed]” and generates a CSV file. Opening the CSV with Excel, I can then see the list of every embedded tweet throughout the site.
I originally was going to have the script pair the embedded links (twitter URLs) to the post it was found within to make it easier to go swap them out with images, but realized I didn’t need this.
(See no. 4 for more on why not and the alternative).
3 ) I created screenshots with the URLs in my file.
I went through and pasted each URL (only about 60, thankfully) into https://htmlcsstoimage.com/examples/twitter-tweet-screenshot’s example HTML code and then clicked “re-generate image” in the top right corner under the image tab. Then, I right-clicked the image and chose “Save As” and saved it to a folder. I made sure to rename the image file as I saved it each time descriptively; this is handy for the next step.
I did hit the free demo limit on that tool after about 30 images, and I had 60, so after about 20 minutes I went back and checked and was able to do my second batch of tweets.
(There are several types of these screenshot generators you could use, this one happened to be quick and easy for my use case.)
4 ) I then opened up my blog and grabbed the first link and pasted it into the search box on the Posts page.
It pulled up the list of blog posts that had that URL.
I opened the blog post, scrolled to the embedded tweet, deleted it, and replaced it with the image instead.
(Remember to write alt text for your image during this step!)
Remember to ‘update’/save your post, too, after you input the image.
It took maybe half an hour to do the final step, and maybe 2-3 hours total including all the time I spent working on the script in number 2, so if you have a similar ~60 or so links I would expect this to take ~1-2 focused hours.
Awesome solution! I’m tired of seeing embedded tweets breaking the layout of my website. This tutorial looks like a huge help in solving that problem. Will definitely be giving it a try!