DEV Community

Phong Duong
Phong Duong

Posted on • Originally published at phongduong.dev on

1

Embed social media in Gridsome site with remark plugin

When you write your blog, you may want to embed your social media like a tweet, a Facebook post, a Codepen pen, or a Youtube video. They not only make your post more understandable but reduce the needed work especially you write programming tutorials.

But Gridsome's transformer plugin doesn't transform social media links into the embed code. When you paste your link into the Markdown file, it will stay still and be transformed into a paragraph instead of an embed code.

In this tutorial, I will show you how to transform your social media links into the embed code with gridsome-plugin-remark-embed plugin. This plugin transforms popular providers embed like Youtube, Facebook, Codepen, Codesanbox, etc...

Installation

yarn add -D @noxify/gridsome-plugin-remark-embed
Enter fullscreen mode Exit fullscreen mode

Set up

In the plugins configuration of Remark, you add the embed plugin

{
  remark: {
    [
      "@noxify/gridsome-plugin-remark-embed",
      {
        enabledProviders: ["Youtube", "Twitter", "Codepen"],
      },
    ];
  }
}
Enter fullscreen mode Exit fullscreen mode

In this configuration, I enable Youtube, Twitter, and Codepen embed providers. I use the provider's default configuration.

Add the URL

When you add the URL to your Markdown file, make sure it is in a new paragraph. If you place it in the paragraph with text, the plugin can't transform the link.

Run the site

After setting up and adding the URL, you run your site and check the transformation. Different providers may be transformed in different ways. You can see the provider's configuration and customize it to suit your site.

References

Remark embed document

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay