Articles on: Advanced Customization

Integrating DropInBlog into a Next.js application

This guide explains how to integrate DropInBlog into your Next.js project by adding a custom component. The component dynamically loads the DropInBlog embed script into your application’s <head> element, ensuring your blog posts display correctly.

Overview

The integration involves creating a React component that:

Dynamically injects the DropInBlog script into the <head> when the component mounts.
Renders a container <div id="dib-posts"></div> where DropInBlog will insert the blog posts.

Step-by-Step Instructions

1. Create the DropInBlog component

Create a new file dib-block.tsx in your components directory with the following code:

"use client";

import { useEffect } from "react";

export default function DibBlock() {
  useEffect(() => {
    if (document) {
      const headElement = document.querySelector("head");
      if (!headElement) return;

      const dibScript = document.createElement("script");
      dibScript.src =
        "https://io.dropinblog.com/embedjs/{{blogid}}.js";
      dibScript.async = true;

      headElement.appendChild(dibScript);
    }
  }, []);

  return <div id="dib-posts"></div>;
}

Be sure to replace the {{blogid}} with what you see on the Code & Layout tab in your admin panel.

2. Use the component in a Page

import DibBlock from "@/app/components/dib-block";

export default function Blog() {
  return (
	   <DibBlock />
  );
}

Updated on: 03/03/2025