Search for a command to run...
Here is how you can embed preview cards for web resources like Github Repos, YouTube Videos, Tweets, CodePen snippets and other articles
I'm a software engineer and computer scientist now a Deep Tech "super angel" and founding partner of the VC fund Silicon Roundabout Ventures
Thanks for the article Francesco. I thought this is what I exactly need as I try to reshare an article. I tried your suggested solution:
%[https://www.syntaxtechs.com/blog/what-is-sdet]
But it does not display the preview. Do you know how I can solve that?
Hey man. I know that Hashnode uses the Embedly API. The documentation of the original library is here: https://docs.embed.ly/docs/embedly-api
So I assume this particular website does not support being rendered with an enhanced display.
For example YouTube uses oEmbed.
You can contact them to double check but in general I'd say that if it does not support it you can either try the iframe method or "fake it" with a picture and a link.
Thanks for the advice. Francesco Perticarari
In this series, I will share opinions, reflections and 'non-how-to' stuff that might be relevant to fellow coders, entrepreneurs, and/or investors.... As well as any other personal blog article
Silicon Roundabout community startup Malizen is supercharging cybersecurity teams to help counter the growing talent gap of 3.4 million unfilled jobs
All in all, the Yanks seem to love European tech even more than Europeans themselves
How technology outsourcing done right can help startups overcome scaling bottlenecks and accelerate their tech development and business growth
Pension money is key to enabling Venture Capital at scale. Period. And Europe still sucks at this. But it matters to all of us.
The VC Fund Pitch Deck That Got Me To The First Closing Of My First Solo GP Fund
How can Europe overcome its fragmentation, harness deeptech to navigate a de-globalising world, and redefine its role on the global chessboard
Yes, you can show live previews of internet links right on your Hashnode blog.
An embedded link has its content appear as part of a post and supplies a visual element that encourages increased click-through and engagement.
First thing first: in general, Markdown supports HTML tags. Which means that it also supports <iframe>.
So if you need to, say, embed a YouTube video, you can just copy and paste the embed code from them, drop it into a Markdown document, and you should be good to go. You don’t need to do anything special to embed third-party media in Markdown.
Here is what aYouTube embeds look like using this method:
You do need to do whatever is necessary for that particular service though, and some services give you <script> based series of tags that not all Markdown implementations support.
In the example above, the code I got from YouTube clicking "Share", then "embed" is:
<iframe width="560" height="315" src="https://www.youtube.com/embed/oavMtUWDBTM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Hashnode uses Embed.ly to support all sorts of embed on the platform. Which means that your Hashnode-powered blog also supports them by default. No need to paste on the platform any specific embed code. Just follow the following syntax and the magic will happen.
Here is what I mean:
To embed the same YouTube video above, you can simply type:
%[https://www.youtube.com/watch?v=oavMtUWDBTM]
Here is what you get:
Cool isn't it?
And you can do that also with github repositories, tweets and articles, as well as with a host of other online objects...
All you have to do is to follow this simple syntax:
%[Paste-link-to-embed]
Here are the examples Hashnode provides you with in its guide:
//Embed Tweets
%[https://twitter.com/hashnode/status/1080795453115920384?s=20]
//Embed YouTube Videos
%[https://www.youtube.com/watch?v=vAKtNV8KcWg]
//Embed Github Repo
%[https://github.com/hashnode/hashnode-cli]
//Embed Codepen
%[https://codepen.io/zephyo/pen/MZbLwV]
//Embed Glitch
%[https://glitch.com/edit/#!/lithium-battery-recycling]
//Embed Soundcloud
%[https://soundcloud.com/androidauthority/024-prime-day-shmimeday]
//Embed Expo
%[https://snack.expo.io/@iamshadmirza/tinder-cards]
//Embed Loom
%[https://www.loom.com/share/1436e60ced174f37b729be61081e069d]
//Embed Vimeo
%[https://vimeo.com/258358902], additional valid parameters can be
passed to customize the player.
Ex. %[https://vimeo.com/258358902?width=820&color=ED5565]
Visit this link https://developer.vimeo.com/api/oembed/videos for more
details on how to customize the player, supported URL types and parameters.
//Embed Canva
%[https://www.canva.com/design/your-design-id/view]
//Embed any article on web or website
%[https://hashnode.com]
So there you have it.
If you want to embed stuff on your Hashnode blog, all you have to do is.... type :)
I'm loving it so far. Want to try it out? Give it a go