294 lines
9.9 KiB
PHP
294 lines
9.9 KiB
PHP
<div class="meta-container">
|
|
<h1 class="og-title">Open Graph Meta Generator</h1>
|
|
<form class="form" id="metaForm">
|
|
<label for="ogTitle" class="form-label">Title:</label>
|
|
<input type="text" id="ogTitle" name="ogTitle" class="form-input" required>
|
|
|
|
<label for="ogDescription" class="form-label">Description:</label>
|
|
<textarea id="ogDescription" name="ogDescription" class="form-input form-textarea" rows="4" required></textarea>
|
|
|
|
<label for="ogImage" class="form-label">Image URL:</label>
|
|
<input type="url" id="ogImage" name="ogImage" class="form-input" required>
|
|
|
|
<label for="ogUrl" class="form-label">URL:</label>
|
|
<input type="url" id="ogUrl" name="ogUrl" class="form-input" required>
|
|
|
|
<label for="author" class="form-label">Author:</label>
|
|
<input type="text" id="author" name="author" class="form-input" required>
|
|
|
|
<label for="keywords" class="form-label">Keywords:</label>
|
|
<input type="text" id="keywords" name="keywords" class="form-input" required>
|
|
|
|
<label for="twitterTitle" class="form-label">Twitter Title:</label>
|
|
<input type="text" id="twitterTitle" name="twitterTitle" class="form-input" required>
|
|
|
|
<label for="twitterDescription" class="form-label">Twitter Description:</label>
|
|
<textarea id="twitterDescription" name="twitterDescription" class="form-input form-textarea" rows="4" required></textarea>
|
|
|
|
<label for="twitterImage" class="form-label">Twitter Image URL:</label>
|
|
<input type="url" id="twitterImage" name="twitterImage" class="form-input" required>
|
|
|
|
<label for="twitterCard" class="form-label">Twitter Card Type:</label>
|
|
<select id="twitterCard" name="twitterCard" class="form-input" required>
|
|
<option value="summary">Summary</option>
|
|
<option value="summary_large_image">Summary Large Image</option>
|
|
</select>
|
|
|
|
<button type="submit" class="button-style" style="width: 100%; background-color: #7d7d7d;">Generate</button>
|
|
</form>
|
|
|
|
<div style="display: none;" class="generated-meta-tags" id="generatedMetaTags"></div>
|
|
<P style="display: none; text-align: center;" id="copied-notice"></P>
|
|
<button id="copyButton" class="button-style" onclick="copyToClipboard()">Copy</button>
|
|
</div>
|
|
<div class="table-container">
|
|
<h2 style="text-align: center; font-size: 25px; font-weight: bold;">Content Limitations</h2>
|
|
<table class="content-table">
|
|
<tr>
|
|
<th class="name">Name</th>
|
|
<th class="min-max">Min/Max</th>
|
|
<th class="limit">Limit</th>
|
|
<th class="type">Type</th>
|
|
</tr>
|
|
<tr>
|
|
<td class="name">Meta Title</td>
|
|
<td class="min-max">Max</td>
|
|
<td class="limit">55</td>
|
|
<td class="type">Letter</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="name">Meta Description</td>
|
|
<td class="min-max">Max</td>
|
|
<td class="limit">160</td>
|
|
<td class="type">Letter</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="name">Google Ideal Post Content</td>
|
|
<td class="min-max">Min</td>
|
|
<td class="limit">300</td>
|
|
<td class="type">Word</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="name">Instagram Captions/Comments</td>
|
|
<td class="min-max">Max</td>
|
|
<td class="limit">2200</td>
|
|
<td class="type">Letter</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="name">Twitter Post</td>
|
|
<td class="min-max">Max</td>
|
|
<td class="limit">280</td>
|
|
<td class="type">Letter</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="name">Twitter Username</td>
|
|
<td class="min-max">Max</td>
|
|
<td class="limit">20</td>
|
|
<td class="type">Letter</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="name">Facebook Wall Post (Truncation)</td>
|
|
<td class="min-max">Max</td>
|
|
<td class="limit">477</td>
|
|
<td class="type">Letter</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="name">Facebook Wall Post (All)</td>
|
|
<td class="min-max">Max</td>
|
|
<td class="limit">63206</td>
|
|
<td class="type">Letter</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="name">Facebook Comment</td>
|
|
<td class="min-max">Max</td>
|
|
<td class="limit">8000</td>
|
|
<td class="type">Letter</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="name">Facebook Page Description</td>
|
|
<td class="min-max">Max</td>
|
|
<td class="limit">255</td>
|
|
<td class="type">Letter</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="name">Facebook Username</td>
|
|
<td class="min-max">Max</td>
|
|
<td class="limit">50</td>
|
|
<td class="type">Letter</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="name">Facebook Messenger Message</td>
|
|
<td class="min-max">Max</td>
|
|
<td class="limit">20000</td>
|
|
<td class="type">Letter</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="name">YouTube Video Title</td>
|
|
<td class="min-max">Max</td>
|
|
<td class="limit">70</td>
|
|
<td class="type">Letter</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="name">YouTube Video Description</td>
|
|
<td class="min-max">Max</td>
|
|
<td class="limit">5000</td>
|
|
<td class="type">Letter</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="name">Snapchat Caption</td>
|
|
<td class="min-max">Max</td>
|
|
<td class="limit">250</td>
|
|
<td class="type">Letter</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="name">Pinterest Pin Description</td>
|
|
<td class="min-max">Max</td>
|
|
<td class="limit">500</td>
|
|
<td class="type">Letter</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<script>
|
|
const form = document.getElementById('metaForm');
|
|
const generatedMetaTags = document.getElementById('generatedMetaTags');
|
|
|
|
form.addEventListener('submit', function(event) {
|
|
event.preventDefault();
|
|
|
|
const ogTitle = document.getElementById('ogTitle').value.trim();
|
|
const ogDescription = document.getElementById('ogDescription').value.trim();
|
|
const ogImage = document.getElementById('ogImage').value.trim();
|
|
const ogUrl = document.getElementById('ogUrl').value.trim();
|
|
const author = document.getElementById('author').value.trim();
|
|
const keywords = document.getElementById('keywords').value.trim();
|
|
const twitterTitle = document.getElementById('twitterTitle').value.trim();
|
|
const twitterDescription = document.getElementById('twitterDescription').value.trim();
|
|
const twitterImage = document.getElementById('twitterImage').value.trim();
|
|
const twitterCard = document.getElementById('twitterCard').value.trim();
|
|
|
|
const metaTags = `
|
|
<title>${ogTitle}</title>
|
|
<meta name="description" content="${ogDescription}">
|
|
<meta name="keywords" content="${keywords}">
|
|
<meta name="author" content="${author}">
|
|
<meta property="og:title" content="${ogTitle}">
|
|
<meta property="og:description" content="${ogDescription}">
|
|
<meta property="og:image" content="${ogImage}">
|
|
<meta property="og:url" content="${ogUrl}">
|
|
<meta name="twitter:title" content="${twitterTitle}">
|
|
<meta name="twitter:description" content="${twitterDescription}">
|
|
<meta name="twitter:image" content="${twitterImage}">
|
|
<meta name="twitter:card" content="${twitterCard}">
|
|
`;
|
|
if(metaTags.length>20){
|
|
document.getElementById('generatedMetaTags').style.display= "block";
|
|
}
|
|
generatedMetaTags.innerText = `${metaTags}`;
|
|
|
|
});
|
|
function copyToClipboard() {
|
|
const metaTags = document.getElementById('generatedMetaTags');
|
|
const textarea = document.createElement('textarea');
|
|
textarea.value = metaTags.innerText;
|
|
document.body.appendChild(textarea);
|
|
textarea.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(textarea);
|
|
document.getElementById('copied-notice').style.display = 'block';
|
|
document.getElementById('copied-notice').innerHTML = 'Meta tags copied to clipboard!';
|
|
}
|
|
</script>
|
|
<style>
|
|
.meta-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
max-width: 700px;
|
|
margin: 20px auto; /* Added to center horizontally */
|
|
padding: 20px;
|
|
background-color: #3d3d3d;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Header Styles */
|
|
.og-title {
|
|
margin-top: 0;
|
|
font-size: 24px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Form Styles */
|
|
.form {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 6px;
|
|
margin-bottom: 12px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
font-size: 16px;
|
|
background-color: #3d3d3d;
|
|
}
|
|
|
|
.form-textarea {
|
|
resize: vertical;
|
|
min-height: 100px;
|
|
}
|
|
|
|
.button-style{
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
.button-style:hover {
|
|
background-color: #9d9d9d;
|
|
}
|
|
|
|
/* Generated Meta Tags Styles */
|
|
.generated-meta-tags {
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.generated-meta-tags {
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
background-color: #3d3d3d;
|
|
width: 100%; /* Ensure the width spans the container */
|
|
box-sizing: border-box; /* Include padding and border in the width */
|
|
overflow: auto; /* Enable scrolling if content overflows */
|
|
}
|
|
.table-container {
|
|
max-width: 900px;
|
|
margin: 50px auto;
|
|
padding: 20px;
|
|
background-color: #3d3d3d;
|
|
border-radius: 8px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.content-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
.content-table th, .content-table td {
|
|
border: 1px solid #dddddd;
|
|
text-align: left;
|
|
padding: 8px;
|
|
}
|
|
.content-table .table-head {
|
|
background-color: #f2f2f2;
|
|
}
|
|
</style>
|