Mangainfo
Sign in

Tools for your site

Manga release date widget

The widget shows the next English volume of a series with its date, the latest volume and how far English is against Japan.

It comes in three kinds. One series. A list of up to 20 series. Every English volume of this week. It sits in an iframe, sets no cookie and tracks nobody.

Preview

A title or the name in a Mangainfo address, such as blue-lock.

This week

Data from the Firefly Wedding page.

Code

HTML

The script puts the widget above the link and sets its height. Add the script once per page.

<div data-mangainfo-series="hotaru-no-yomeiri">
  <a href="https://mangainfo.com/series/hotaru-no-yomeiri">Firefly Wedding English release dates</a>
</div>
<script src="https://mangainfo.com/embed.js" async></script>

iframe

For pages that allow no script.

<iframe src="https://mangainfo.com/embed/series/hotaru-no-yomeiri" title="Firefly Wedding English release dates" width="100%" height="480" loading="lazy" style="border:0"></iframe>
<p><a href="https://mangainfo.com/series/hotaru-no-yomeiri">Firefly Wedding English release dates</a></p>

React

export function MangaWidget() {
  return (
    <>
      <iframe src="https://mangainfo.com/embed/series/hotaru-no-yomeiri" title="Firefly Wedding English release dates" width="100%" height={480} loading="lazy" style={{ border: 0 }} />
      <a href="https://mangainfo.com/series/hotaru-no-yomeiri">Firefly Wedding English release dates</a>
    </>
  );
}

Vue

<template>
  <iframe src="https://mangainfo.com/embed/series/hotaru-no-yomeiri" title="Firefly Wedding English release dates" width="100%" height="480" loading="lazy" style="border:0"></iframe>
  <a href="https://mangainfo.com/series/hotaru-no-yomeiri">Firefly Wedding English release dates</a>
</template>

Svelte

<iframe src="https://mangainfo.com/embed/series/hotaru-no-yomeiri" title="Firefly Wedding English release dates" width="100%" height="480" loading="lazy" style="border:0"></iframe>
<a href="https://mangainfo.com/series/hotaru-no-yomeiri">Firefly Wedding English release dates</a>

WordPress

Paste it into a Custom HTML block.

<iframe src="https://mangainfo.com/embed/series/hotaru-no-yomeiri" title="Firefly Wedding English release dates" width="100%" height="480" loading="lazy" style="border:0"></iframe>
<p><a href="https://mangainfo.com/series/hotaru-no-yomeiri">Firefly Wedding English release dates</a></p>

Notion

Type /embed and paste this address.

https://mangainfo.com/embed/series/hotaru-no-yomeiri

A list: HTML

The script puts the widget above the link and sets its height. Add the script once per page.

<div data-mangainfo-list="hotaru-no-yomeiri,chainsaw-man,jujutsu-kaisen,berserk">
  <a href="https://mangainfo.com/releases">English manga release dates</a>
</div>
<script src="https://mangainfo.com/embed.js" async></script>

A list: iframe

For pages that allow no script.

<iframe src="https://mangainfo.com/embed/list?series=hotaru-no-yomeiri,chainsaw-man,jujutsu-kaisen,berserk" title="English manga release dates" width="100%" height="360" loading="lazy" style="border:0"></iframe>
<p><a href="https://mangainfo.com/releases">English manga release dates</a></p>

This week: HTML

The script puts the widget above the link and sets its height. Add the script once per page.

<div data-mangainfo-week>
  <a href="https://mangainfo.com/releases">New English manga this week</a>
</div>
<script src="https://mangainfo.com/embed.js" async></script>

This week: iframe

For pages that allow no script.

<iframe src="https://mangainfo.com/embed/week" title="New English manga this week" width="100%" height="420" loading="lazy" style="border:0"></iframe>
<p><a href="https://mangainfo.com/releases">New English manga this week</a></p>

Addresses

AddressShows
https://mangainfo.com/embed/series/{series}One series: next and latest English volume, volumes in English and the next dates.
https://mangainfo.com/embed/list?series={a},{b},{c}Up to 20 series, each with its next English volume.
https://mangainfo.com/embed/weekEvery English volume of this week, by day.
https://mangainfo.com/embed.jsThe script that turns a div with data-mangainfo-series, data-mangainfo-list or data-mangainfo-week into the widget.

The name of a series is the last part of its address on Mangainfo: mangainfo.com/series/blue-lock is blue-lock.

Questions

How do I show manga release dates on my website?

Add the div and the script from the HTML code. The script puts the widget in place of the div. Without scripts, use the iframe code. Both show the same widget.

Does the widget slow down my page?

The script is under 4 KB and loads after your page. The widget itself loads only when a reader scrolls to it.

Does the widget set cookies or track readers?

No. It sets no cookie, runs no analytics and sends nothing about your page or your readers.

Can I show several series?

Yes. The list widget takes up to 20 series. Put their names in the address with a comma between them.

Does it work in WordPress?

Yes. Paste the code into a Custom HTML block. Some hosted plans remove scripts and iframes. Then use the badge, which is a plain image.