📝How to use embeds in your Dev Community blogposts 🧾

#beginners #writing #watercooler #tutorial

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.'

Here are some embed examples:

This is a youtube embed.

This is a medium embed,

The value of content and community in the developer marketing ecosystem | by Dumebi Okolo | Medium

Dumebi Okolo ・ Aug 8, 2023 ・
Medium

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

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

Now,
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 https://www.youtube.com/watch?v=Xpf76E6e0uY %}
🤣🤣

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 https://www.youtube.com/watch?v=Xpf76E6e0uY %}

This is the correct way to use it.

EDIT!!!
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,

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.

On your Codesandbox, click on the blue share button.

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

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! ❤❤