To get the Domain Authority (DA) and Page Authority (PA) from Moz's API and display it on a webpage, you'll need to use their Mozscape API. You can get the DA and PA of a domain by making an API request.
Here’s how you can set up a simple webpage with HTML, CSS, and JavaScript that interacts with the Moz API.
Prerequisites:
1. Moz API Access: You need to sign up for Moz and get an API key: Moz API Sign Up.
2. API Endpoint: The Moz API provides an endpoint for retrieving link metrics like DA and PA.
For this example, we'll assume that you have the Moz API credentials (Access ID and Secret Key) to access the Mozscape API.
HTML + CSS + JavaScript Example:
HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moz API DA/PA Checker</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Check Domain Authority (DA) & Page Authority (PA)</h1>
<input type="text" id="url-input" placeholder="Enter URL" />
<button onclick="getMozData()">Check DA/PA</button>
<div id="result">
<p id="da">Domain Authority (DA): N/A</p>
<p id="pa">Page Authority (PA): N/A</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css)
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f9;
}
.container {
text-align: center;
padding: 20px;
background: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
width: 80%;
max-width: 400px;
}
input {
padding: 10px;
width: 80%;
margin-bottom: 20px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#result {
margin-top: 20px;
}
#result p {
font-size: 18px;
font-weight: bold;
}
JavaScript (script.js)
const MOZ_ACCESS_ID = 'YOUR_ACCESS_ID'; // Replace with your Moz Access ID
const MOZ_SECRET_KEY = 'YOUR_SECRET_KEY'; // Replace with your Moz Secret Key
// Function to fetch DA/PA data using Moz API
async function getMozData() {
const url = document.getElementById("url-input").value.trim();
if (url === "") {
alert("Please enter a valid URL.");
return;
}
const endpoint = `https://lsapi.seomoz.com/linkscape/url-metrics/${encodeURIComponent(url)}`;
const headers = new Headers();
const credentials = btoa(`${MOZ_ACCESS_ID}:${MOZ_SECRET_KEY}`);
headers.append("Authorization", `Basic ${credentials}`);
try {
const response = await fetch(endpoint, { headers });
const data = await response.json();
if (data.status === "ok") {
document.getElementById("da").textContent = `Domain Authority (DA): ${data.pda}`;
document.getElementById("pa").textContent = `Page Authority (PA): ${data.page_authority}`;
} else {
alert("Error fetching data from Moz API");
}
} catch (error) {
console.error("Error:", error);
alert("Failed to fetch DA/PA data. Please try again.");
}
}
Explanation:
HTML:
A simple input box where the user can enter the URL.
A button to trigger the action.
A result section that will display the Domain Authority (DA) and Page Authority (PA).
CSS:
Simple styling to make the page look clean and easy to read. It centers everything and adds some padding to the elements.
JavaScript:
The getMozData function uses the fetch API to make a request to the Moz API endpoint and fetch the DA/PA of the URL.
The Moz API requires authentication via Basic Authentication using your Access ID and Secret Key (encoded in base64).
The fetch request is sent to Moz's endpoint (https://lsapi.seomoz.com/linkscape/url-metrics/) with the URL as a query parameter.
If the request is successful, the DA and PA values are displayed in the result section.
How to Use:
- Replace YOUR_ACCESS_ID and YOUR_SECRET_KEY in the JavaScript file with your actual Moz API credentials.
- Open the HTML file in a browser.
- Enter a URL in the input box and click the "Check DA/PA" button to get the domain authority and page authority.
Notes:
Moz's API has rate limits, so you might want to be cautious about how often you request data.
Ensure you don't expose your Moz credentials on a public site. This example is for demonstration purposes, and sensitive information like API keys should be handled more securely in production environments (e.g., using server-side code). Cathay Pacific: If more codes are required then contact us.
Top comments (0)