Embed Result to Your Site & API - Kolkata Fatafat

Are you looking to add a live real-time Kolkata FF table to your website? Whether you’re running a WordPress site or a custom-built website you can easily display Kolkata Fatafat result table using an API or embed codes. In this article, I will show you the process of embedding Kolkata Fatafat table that updates automatically with the latest information in real-time.

Limit: Unlimited API Calls

Cost: Paid / Contact us

https://ffkolkata.org/wp-json/live-api/v1/get****

This following table is loading using the following codes and css in a Custom Html block of WordPress…

Prepare Your Website

First, decide where you want to place your table. If you’re using WordPress, you can add it to any post or page using a Custom HTML block. For other websites, you’ll need to edit the HTML of the page where you want the table to appear. To show the table in WordPress you can follow the below guide.

Use the following code into WordPress Post/Pages > Custom HTML Block to show the live Kolkata Fatafat table.

<div id="apiTable"></div>

<script>
fetch('https://ffkolkata.org/wp-json/live-api/v1/get****)
  .then(response => response.json())
  .then(data => {
    let tableHTML = `
        <table class="fatafat-table">
            <tbody>
                <tr>
                    <th colspan="8">
                        ${data.date}
                        <span class="watermark">API by ffkolkata.org</span>
                    </th>
                </tr>
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                    <th>6</th>
                    <th>7</th>
                    <th>8</th>
                </tr>
                <tr>
                    ${data.row1.map(value => `<td>${value}</td>`).join('')}
                </tr>
                <tr>
                    ${data.row2.map(value => `<td>${value}</td>`).join('')}
                </tr>
            </tbody>
        </table>
    `;
    document.getElementById('apiTable').innerHTML = tableHTML;
  })
  .catch(error => console.error('Error:', error));
</script>

<style>
.fatafat-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    border: 1px solid #ddd;
}

.fatafat-table th {
    background-color: #4a5568;
    color: white;
    padding: 12px 8px;
    text-align: center;
    border: 1px solid #ddd;
    font-weight: bold;
    font-size: 14px;
}

.fatafat-table th[colspan="8"] {
    position: relative;
    font-size: 16px;
}

.fatafat-table td {
    background-color: #f8f9fa;
    color: #333;
    padding: 12px 8px;
    text-align: center;
    border: 1px solid #ddd;
    font-size: 14px;
    font-weight: bold;
}

.fatafat-table tr:nth-child(even) td {
    background-color: #ffffff;
}

.watermark {
    position: absolute;
    top: 3px;
    right: 10px;
    font-size: 11px;
    font-weight: normal;
    color: #5a6c7d;
    opacity: 0.8;
}
</style>

Simple Overview of The Codes

Add the HTML Structure

Start by adding this basic HTML structure to your page:

<div id="apiTable"></div>

This creates a dynamic table.

Include the JavaScript Code

Next, add the following JavaScript code right after your table HTML:

<script>
fetch('https://ffkolkata.org/wp-json/live-api/v1/get-data')
  .then(response => response.json())
  .then(data => {
    let tableHTML = `
        <table class="fatafat-table">
            <tbody>
                <tr>
                    <th colspan="8">
                        ${data.date}
                        <span class="watermark">API by ffkolkata.org</span>
                    </th>
                </tr>
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                    <th>6</th>
                    <th>7</th>
                    <th>8</th>
                </tr>
                <tr>
                    ${data.row1.map(value => `<td>${value}</td>`).join('')}
                </tr>
                <tr>
                    ${data.row2.map(value => `<td>${value}</td>`).join('')}
                </tr>
            </tbody>
        </table>
    `;
    document.getElementById('apiTable').innerHTML = tableHTML;
  })
  .catch(error => console.error('Error:', error));
</script>

Style Your Table

To make your table look great, add some CSS. You can include this in your theme’s stylesheet or in Additional CSS:

Go to WordPress Dashboard > Appearance > Customize > Additional CSS and use your own styles or you can use this following:

<style>
.fatafat-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    border: 1px solid #ddd;
}

.fatafat-table th {
    background-color: #4a5568;
    color: white;
    padding: 12px 8px;
    text-align: center;
    border: 1px solid #ddd;
    font-weight: bold;
    font-size: 14px;
}

.fatafat-table th[colspan="8"] {
    position: relative;
    font-size: 16px;
}

.fatafat-table td {
    background-color: #f8f9fa;
    color: #333;
    padding: 12px 8px;
    text-align: center;
    border: 1px solid #ddd;
    font-size: 14px;
    font-weight: bold;
}

.fatafat-table tr:nth-child(even) td {
    background-color: #ffffff;
}

.watermark {
    position: absolute;
    top: 3px;
    right: 10px;
    font-size: 11px;
    font-weight: normal;
    color: #5a6c7d;
    opacity: 0.8;
}
</style>

If you want to create your own style using the simple api, you can use this following API where it contains date, row1 and row2.

https://ffkolkata.org/wp-json/live-api/v1/get-data