I don’t know who needs to hear this — but every single page request contributes to carbon emissions. Whether you run a blog, a news site, or that weird fan page for discontinued cereal boxes, if someone loads your site, the servers crunch data, burn electricity, and boom: CO₂ is released.

Now, websitecarbon.com will gladly tell you how much filth your pristine little site dumps into the planet with each view. But, naturally, they offer a badge that runs on JavaScript — which is kind of like serving tofu using plastic forks. So I’ve reimagined their website-carbon-badges@1.1.3/b.min.js in pure PHP and I want to share the code with you. If you'd like to try it out, please, help yourselves!

First, grab the current page’s URL and query websitecarbon’s API using good ol' cURL:

<?php
    $data = json_decode(
        file_get_contents(
            "https://api.websitecarbon.com/b?url=" . urlencode(
                $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']
            )
        ),
        true
    );
?>

Drop this CSS either inline or in a dedicated file like website-carbon.css. It’s lightweight, pretty, and doesn’t yell at your browser like a JS file would.

<style>
    #wcb.carbonbadge {
        --b1: #0e11a8;
        --b2: #00ffbc;
        font-size: 15px;
        text-align: center;
        color: var(--b1);
        line-height: 1.15;
    }
    #wcb.carbonbadge sub {
        vertical-align: middle;
        position: relative;
        top: 0.3em;
        font-size: 0.7em;
    }
    #wcb #wcb_2, #wcb #wcb_a, #wcb #wcb_g {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-size: 1em;
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
        text-decoration: none;
        margin: 0.2em 0;
    }
    #wcb #wcb_a, #wcb #wcb_g {
        padding: 0.3em 0.5em;
        border: 0.13em solid var(--b2);
    }
    #wcb #wcb_g {
        border-radius: 0.3em 0 0 0.3em;
        background: #fff;
        border-right: 0;
        min-width: 8.2em;
    }
    #wcb #wcb_a {
        border-radius: 0 0.3em 0.3em 0;
        background: var(--b1);
        color: #fff;
        font-weight: 700;
        border-color: var(--b1);
    }
    #wcb.wcb-d #wcb_a {
        color: var(--b1);
        background: var(--b2);
        border-color: var(--b2);
    }
    #wcb.wcb-d #wcb_2 {
        color: #fff;
    }
</style>

Now display your guilt score proudly. Put this snippet anywhere you want that badge to live (in the footer section, if possible):

<div id="wcb" class="carbonbadge">
    <?php
        echo "<div id='wcb_g'>{$data['c']}g of CO<sub>2</sub>/view</div>";
        echo "<div id='wcb_a'>Cleaner than {$data['p']}% of pages tested</div>";
    ?>
</div>

And if you want to apply it on a dark theme, just add wcb-d to the div class:

<div id="wcb" class="carbonbadge wcb-d">...</div>

To wrap things up, the web is bloated, inefficient, and belching more carbon than a coal-fired toaster, so knowing your digital footprint matters. (Yes, I know that sounds cliché. Painfully aware.) Your homepage isn’t some abstract cloud entity — it burns fuel and fries the atmosphere like bacon on a Sunday morning.

So let your visitors know how much CO₂ their curiosity costs. Make them gasp, make them think, maybe even make them rage-quit your page and touch grass. Either way, slap that badge on like a badge of honor — or shame. I am not judging. (Okay, maybe a little.)

Still mulling over the perfect spot for it on the page.