Badge API

htmlcssjqueryjavascriptphpbadge-api

Use Javascript
Remember to include the latest jQuery library. You can find it here.


<script type="text/javascript">
    $(function(){
        $.getJSON('https://api.socialhabbo.com/badges?per_page=30', function(badges){
            $.each(badges.data, function(key, badge){
                $('div#badges').append('<img src="http://habboo-a.akamaihd.net/c_images/album1584/' + badge.code + '.gif" />');
            });
        });
    });
</script>

You can use a div, ul, ol or w/e you fancy.

<div id="badges"></div>

Use PHP
No library needed for PHP.

<?php
    $badges = json_decode(file_get_contents('https://api.socialhabbo.com/badges?per_page=30'), true); 
    foreach($badges['data'] as $badge){
        echo '<img src="http://habboo-a.akamaihd.net/c_images/album1584/' . $badge['code'] . '.gif" />'; 
    }
?>

Furni API

htmlcssjqueryjavascriptphpfurni-api

Use Javascript
Remember to include the latest jQuery library. You can find it here.


<script type="text/javascript">
    $(function(){
        $.getJSON('https://api.socialhabbo.com/furni?per_page=30', function(furnis){
            $.each(furnis.data, function(key, furni){
                $('div#furni').append('<img src="https://api.socialhabbo.com/furni/' + furni.code + '/icon" />'); // Image or Icon
            });
        });
    });
</script>

You can use a div, ul, ol or w/e you fancy.

<div id="furni"></div>

Use PHP
No library needed for PHP.


<?php
    $furnis = json_decode(file_get_contents('https://api.socialhabbo.com/furni?per_page=30'), true);
    foreach($furnis['data'] as $furni){
        echo '<img src="https://api.socialhabbo.com/furni/' . $furni['code'] . '/icon" />'; // Image or Icon
    }
?>

Clothing API

htmlcssjqueryjavascriptphpclothing-api

Use Javascript
Remember to include the latest jQuery library. You can find it here.


<script type="text/javascript">
    $(function(){
        $.getJSON('https://api.socialhabbo.com/clothing?per_page=30', function(clothings){
            $.each(clothings.data, function(key, clothing){
                $('div#clothing').append('<img src="https://api.socialhabbo.com/clothing/' + clothing.code + '/icon" />'); // Image or Icon
            });
        });
    });
</script>

You can use a div, ul, ol or w/e you fancy.

<div id="clothing"></div>

Use PHP
No library needed for PHP.


<?php
    $clothings = json_decode(file_get_contents('https://api.socialhabbo.com/clothing?per_page=30'), true);
    foreach($clothings['data'] as $clothing){
        echo '<img src="https://api.socialhabbo.com/clothing/' . $clothing['code'] . '/icon" />'; // Image or Icon
    }
?>