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

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

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

Okay