Getting Page Likes on Page Load

This documentation covers how to retrieve and display like counts when pages load, supporting both website-wide and page-specific likes.

API Endpoint

GET /api/likes/:website[?pageUrl=path]

Parameters

:website (required) - The website domain (e.g., mysite.com)
pageUrl (optional query parameter) - Specific page path (e.g., /blog/article-1)

Usage Examples

Website-Wide Likes

Get the total number of likes for an entire website:

// Basic implementation
fetch("https://your-val-url.val.run/api/likes/mysite.com")
  .then((response) => response.json())
  .then((data) => {
    console.log(`Website likes: ${data.likeCount}`);
    document.getElementById("site-likes").textContent = data.likeCount;
  })
  .catch((error) => console.error("Error fetching likes:", error));

Page-Specific Likes

Get likes for the current page:

// Get likes for current page using window.location.pathname
const website = "mysite.com";
const currentPage = window.location.pathname;

fetch(
  `https://your-val-url.val.run/api/likes/${website}?pageUrl=${currentPage}`,
)
  .then((response) => response.json())
  .then((data) => {
    console.log(`Page likes: ${data.likeCount}`);
    document.getElementById("page-likes").textContent = data.likeCount;
  })
  .catch((error) => console.error("Error fetching page likes:", error));

Complete Page Implementation

Here's a complete example that loads and displays page likes:

<!DOCTYPE html>
<html>
  <head>
    <title>My Article</title>
    <style>
      .like-button {
        background: #007bff;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
      }
      .like-count {
        font-weight: bold;
        margin-left: 10px;
      }
    </style>
  </head>
  <body>
    <h1>My Article</h1>
    <p>Article content here...</p>

    <div class="like-section">
      <button class="like-button" id="likeBtn">👍 Like</button>
      <span class="like-count" id="likeCount">0</span>
    </div>

    <script>
      const API_BASE = "https://your-val-url.val.run";
      const WEBSITE = "mysite.com";
      const PAGE_URL = window.location.pathname;

      // Load current like count when page loads
      async function loadLikeCount() {
        try {
          const response = await fetch(
            `${API_BASE}/api/likes/${WEBSITE}?pageUrl=${PAGE_URL}`,
          );
          const data = await response.json();
          document.getElementById("likeCount").textContent =
            data.likeCount;
        } catch (error) {
          console.error("Error loading likes:", error);
        }
      }

      // Record a like when button is clicked
      async function recordLike() {
        try {
          const response = await fetch(`${API_BASE}/api/like`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              website: WEBSITE,
              pageUrl: PAGE_URL,
            }),
          });
          const data = await response.json();
          document.getElementById("likeCount").textContent =
            data.likeCount;
        } catch (error) {
          console.error("Error recording like:", error);
        }
      }

      // Initialize page
      document.addEventListener("DOMContentLoaded", function () {
        loadLikeCount();
        document.getElementById("likeBtn").addEventListener(
          "click",
          recordLike,
        );
      });
    </script>
  </body>
</html>

Response Format

Successful Response

{
  "website": "mysite.com",
  "pageUrl": "/blog/article-1",
  "likeCount": 42
}

website: The website domain
pageUrl: The specific page path (null if requesting website-wide likes)
likeCount: Current number of likes (0 if no likes yet)

Advanced Usage

Multiple Pages with Different Counters

// Load likes for multiple pages
const pages = ["/home", "/about", "/blog/post-1"];
const website = "mysite.com";

pages.forEach(async (page) => {
  const response = await fetch(
    `${API_BASE}/api/likes/${website}?pageUrl=${page}`,
  );
  const data = await response.json();

  // Update specific counter for each page
  const counter = document.querySelector(`[data-page="${page}"] .like-count`);
  if (counter) counter.textContent = data.likeCount;
});

Combining Website and Page Likes

async function loadAllLikes() {
  const website = "mysite.com";
  const currentPage = window.location.pathname;

  // Load both website-wide and page-specific likes
  const [websiteResponse, pageResponse] = await Promise.all([
    fetch(`${API_BASE}/api/likes/${website}`),
    fetch(`${API_BASE}/api/likes/${website}?pageUrl=${currentPage}`),
  ]);

  const websiteData = await websiteResponse.json();
  const pageData = await pageResponse.json();

  document.getElementById("website-likes").textContent = websiteData.likeCount;
  document.getElementById("page-likes").textContent = pageData.likeCount;
}

Error Handling

Always include proper error handling:

async function getLikes(website, pageUrl = null) {
  try {
    const url = pageUrl
      ? `${API_BASE}/api/likes/${website}?pageUrl=${pageUrl}`
      : `${API_BASE}/api/likes/${website}`;

    const response = await fetch(url);

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    return data.likeCount;
  } catch (error) {
    console.error("Error fetching likes:", error);
    return 0; // Return 0 as fallback
  }
}

CORS Support

The API includes CORS headers allowing requests from any origin, so you can call it directly from your website's JavaScript without proxy servers or additional configuration.