✨ Manual social media embeds for Ghost

[Stromfeldt]

We all know that we can embed tweets/posts into our Ghost sites via the conventional method of pasting in a link or embedding the specific <iframe> code, which ends up looking something like this:

Depending on the platform, usage of <iframe>s can even allow one to insert dark mode embeds, which can then look as such:

That being so, and although I don’t know about the experience other Ghost users have had, I’ve noticed that X/Twitter embeds can take a considerable amount of time to load, while more than half the time they don’t even load at all and end up displaying the placeholder instead (of which doesn’t just occur on my Ghost site but others I’ve seen as well, Ghost and non-Ghost):

It’s for these reasons and more (such as wanting to cater for social media posts that might not load due to their parent accounts being switched to private modes, or even the posts/accounts being outright deleted) that I decided to create what I call manual social media embeds (or MSMEs for short). Taking a page from poet.so, this is what the equivalent of the above can look like via the MSME setup:

Which also works with a theme’s dark mode:

And are responsive:

Have something against the 24th letter of the alphabet? Then you can slip in another SVG:

Can’t decide which icon to use? Why not both?

To be clear, what I’ve created isn’t something that outputs PNGs (a la poet.so), but rather responsive “embeds” that are inserted via templates/snippets I’ve assembled. There’s plain MSMEs, MSMEs with an image or video, quote post MSMEs, quote post MSMEs with an image or video, MSME threads, MSMEs with a reply, MSMEs with a link card, and more. And as the logo displayed is a mere SVG, these MSMEs can be used for embeds from X/Twitter, Bluesky, Mastodon, Threads, Reddit, etc.

If you’d like to take a look at what I’ve put together it’s all available and fully explained via a GitHub repo I recently made public, these MSMEs open sourced and so freely available for usage by anyone.

GitHub - stromfeldt/Manual-social-media-embeds-for-Ghost: Templates for...

I’ll stress that these MSMEs are fully manual and so require manually inputting all the data into the templates/snippets (which not only work responsively and with dark modes but fully work with Ghost emails/newsletters as well). Depending on the complexity of the tweet/post it can take between one and five minutes to set one up, so you’d have to gauge for yourself the value in putting in the work to adapt the CSS for your theme (which would likely be rather minimal) and then manually inserting the data into these MSMEs one by one as you go forward.

Otherwise, feel free to ask away if you have any questions, and if you want to see how they look and work in the wild you can see a recent post of mine in which many different kinds of MSMEs have been utilised.

Doomberg Goes “All-in” on Substack's Network of VC-Enabled Grifters, While...

[block]

This is simply amazing. Hopefully ghost will integrate this into the next releases.

[Stromfeldt]

Awesome, glad to hear you like them. However, and in regards to your hopes that Ghost might one day integrate these MSMEs into a future version of the platform, I’m highly doubtful that that will ever happen, for a variety of reasons.

First off, and like I stressed, these MSMEs are 100% manual and so nothing but superficial (meaning there’s not really anything to “integrate”). That is, nothing is scraped from any social media platform and everything must be manually inserted into an MSME snippet. If you ever tried using poet.so when it worked for Twitter, you’d recall that although it gave nice looking PNG outputs, it output no more than the text of a tweet. It didn’t scrape and thus output images, it didn’t scrape and thus output quote tweet portions, and it certainly didn’t scrape and thus output videos.

Secondly, I imagine it’d be extremely convoluted for Ghost to scrape all the requisite data from X/Twitter for all the varying kinds of posts, never mind having to deal with X/Twitter changing its parameters (and thus breaking Ghost’s supposed scraper), never mind X/Twitter blocking a supposed Ghost scraper, never mind Ghost having to replicate this for all the different social media platforms out there.

I figure it’s possible that something with a nice UI could be built into the platform so that all the data could be manually pasted into some kind of dedicated card rather than into the HTML of a snippet, but that’d all but surely add jumbled bloat to the platform.

But that got me thinking (just last night). The pain point isn’t adding the CSS to one’s theme (theme developers themselves could do this very easily), the pain point is manually inputting the data into HTML cards for each and every tweet. (Yes, they look great, but pasting in the requisite data, piece by piece, opening and re-opening the HTML cards, is a time-draining pain in the ass.) That being so, what could be possible is to create a web app that had that nice UI whereby the requisite data could be (manually) entered into appropriate input boxes, and when completed would output the HTML of which could be inserted into an HTML card.

On a dedicated website, the user would therefore be prompted to:

a) select the social media platform desired (for the SVG)
b) select the kind of MSME desired (which would then display the requisite input boxes)
c) input all the requisite data
d) hit “export HTML” / “save HTML to clipboard”
e) paste that HTML into an HTML card in the Ghost editor

I imagine that creating something like that wouldn’t be too hard for somebody who knows how to do that kind of thing, which certainly isn’t me. That being so, if I can get the funding for such a thing I’ll definitely pay to make it happen, cause yeah, inputting the data into HTML cards is a pain in the ass, and it’d definitely make these MSMEs more user-friendly for the general user.

I’ll add updates to this post if there’s news to share.