DEV Community

Cover image for 📝How to use embeds in your Dev Community blogposts 🧾
Dumebi Okolo
Dumebi Okolo

Posted on

📝How to use embeds in your Dev Community blogposts 🧾

Hello! 👋🏾👋🏾
Thank you for taking the time to read this article.

One of the most exciting things to me is the ability to include materials from other applications or websites into your blog post(in the way of embeds). By doing so, you can give your readers a more engaging and interactive experience.

If you're a member of the Dev community, you'll be delighted to know that there is a comprehensive list of applications and websites available for you to embed. This list includes many popular tools such as Twitter, YouTube, and CodePen, among others.

By embedding these materials, you can enhance your blog post with multimedia content, making it more informative, entertaining, and visually appealing. So why not give it a try and see the difference it makes in engaging your readers?
To see a list of possible embeds, check at the right hand side of your create post page, and you will see a link that says, 'See a list of supported embeds.'

Dev embeds

Here are some embed examples:

This is a youtube embed.

This is a medium embed,

The principal way to achieve an embed on Dev community is to use the stipulated guideline,

{% embed https://... %}

I am going to assume everyone reading this had the same problems I did when I first started embedding in my Dev community blogposts. 😅😅

Problem 1

I thought the 'embed' in {% embed https://... %} was a keyword such that... If I wanted to add a youtube embed, it will be

{% embed %}

It wasn't until a long time of frustration, and almost reaching out to make a complaint did I realize that embed was a variable, and stands for whatever embed you want to add.

{% youtube %}

This is the correct way to use it.

I got to find out that it seems like I didn't have a problem after all.
An issue was pushed and changed here, making it possible for embeds to work as I originally said they do to foster simplicity.
Here is an article that was written to this regard.
In essence, whichever way you decide to put out your embeds, they work! 🥳 🥳

Problem 2

Getting the embed URL is a pretty easy thing. You just have to get the URL being displayed on the website,

codepen embed

This is an example of a codepen embed URL, gotten at the top of the browser.

Pretty easy, right?

Well, it was until I needed to embed a CodeSandbox in a blogpost. I thought it was business as usual, and I just had to grab the displayed URL on the top of the browser.
This didn't work. After a while of various iterations, I found it! 😏💡

I will be using a couple of screenshots to properly illustrate this.

first image

On your Codesandbox, click on the blue share button.

second image

When you have clicked the blue share button, this page will come up. Click on the embed button.

third image

Here, we see a box containing the embed URL. Copy this URL.
Back in your Dev community blog post, use this link as your embed URL.

And with this, we have a CodeSandbox embed.

These are just some issues I have faced so far in my journey writing blogposts here on Dev community. I enjoy the writing and community experience on here so much, and I encourage everyone to take the step of writing and sharing your thoughts here on Dev Community (if you haven't already started)!
I hope this guide comes in handy to you. See you next time! ❤❤

Top comments (13)

michaeltharrington profile image
Michael Tharrington

You absolutely rock, Dumebi! 🙌

I asked and you delivered. Really appreciate you writing up this resource for us.

dumebii profile image
Dumebi Okolo

Thank you, Michael. It was my pleasure!

balagmadhu profile image
Bala Madhusoodhanan

Love the tips .. thanks

dumebii profile image
Dumebi Okolo

Glad I could help! 🫶

respect17 profile image
Kudzai Murimi

Thanks for helping some of the community memebers, this is absolutely useful.

dumebii profile image
Dumebi Okolo

So glad I could help! 🫶

codeystein profile image
codeyStein • Edited

I always see this in my sidebar but never payed attention to it haha.

Thanks for sharing and demonstrating this; this is some really useful stuff!

dumebii profile image
Dumebi Okolo

I totally get you! It wasn't until I needed to embed something did I notice the sidebar. 😅

canseo profile image
mehdi derakhshan مهدی درخشان

thank you for this :)

dumebii profile image
Dumebi Okolo

You're welcome. 😊