dwd/tools
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

t

Browse Source
This commit is contained in:
Suvodip
2024-07-11 12:45:10 +05:30
parent d368213568
commit 040c4b87c1
33 changed files with 1042 additions and 867 deletions
Download Patch File Download Diff File Expand all files Collapse all files

381
open-graph-meta-generator.php
View File

@@ -1,157 +1,200 @@
<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">
<section class="diZContainer diZmxAuto diZmy4">
<h1 class="diZBorderBottom">Open Graph Meta Generator</h1>
<p class="diZTextJustify">The Open Graph Meta Generator is a tool designed to help web developers and content creators easily generate meta tags for optimizing content sharing on social media platforms like Facebook and Twitter. By filling out a simple form, users can create the necessary Open Graph and Twitter meta tags to enhance the visibility and appearance of their web pages when shared online.</p>
<div class="diZFlexColumn diZMaxW600 diZmxAuto diZmy20 toolsSection">
<form class="diZFlexColumn" id="metaForm">
<div class="diZFlexColumn diZmt2">
<label for="ogTitle" class="form-label">Title:</label>
<input type="text" id="ogTitle" name="ogTitle" class="" required>
</div>
<div class="diZFlexColumn diZmt2">
<label for="ogDescription" class="form-label">Description:</label>
<textarea id="ogDescription" name="ogDescription" class="diZTextAreaResizeNone" rows="4" required></textarea>
</div>
<div class="diZFlexColumn diZmt2">
<label for="ogImage" class="form-label">Image URL:</label>
<input type="text" id="ogImage" name="ogImage" class="" required>
</div>
<div class="diZFlexColumn diZmt2">
<label for="ogUrl" class="form-label">URL:</label>
<input type="text" id="ogUrl" name="ogUrl" class="" required>
</div>
<div class="diZFlexColumn diZmt2">
<label for="author" class="form-label">Author:</label>
<input type="text" id="author" name="author" class="" required>
</div>
<div class="diZFlexColumn diZmt2">
<label for="keywords" class="form-label">Keywords:</label>
<input type="text" id="keywords" name="keywords" class="" required>
</div>
<div class="diZFlexColumn diZmt2">
<label for="twitterTitle" class="form-label">Twitter Title:</label>
<input type="text" id="twitterTitle" name="twitterTitle" class="" required>
</div>
<div class="diZFlexColumn diZmt2">
<label for="twitterDescription" class="form-label">Twitter Description:</label>
<textarea id="twitterDescription" name="twitterDescription" class="diZTextAreaResizeNone" rows="4" required></textarea>
</div>
<div class="diZFlexColumn diZmt2">
<label for="twitterImage" class="form-label">Twitter Image URL:</label>
<input type="text" id="twitterImage" name="twitterImage" class="" required>
</div>
<div class="diZFlexColumn diZmt2">
<label for="twitterCard" class="form-label">Twitter Card Type:</label>
<select id="twitterCard" name="twitterCard" class="" required>
<option value="summary">Summary</option>
<option value="summary_large_image">Summary Large Image</option>
</select>
</div>
<div class="diZFlexColumn diZmt2">
<div class="diZDisplayNone generated-meta-tags" id="generatedMetaTags"></div>
<p class="diZDisplayNone" id="copied-notice"></p>
</div>
<div class="diZFlexBetween diZmt2">
<button type="submit" class="button-style"><span>Generate</span></button>
<button id="copyButton" class="button-style" onclick="copyToClipboard()"><span>Copy</span></button>
</div>
</form>
</div>
<h2 class="diZBorderBottom">Content Limitations</h2>
<p>Understanding the character and word limits for various platforms and meta tags is crucial for optimizing your content. The following table provides a comprehensive guide to these limitations, ensuring that your content adheres to the best practices for SEO and social media sharing.</p>
<table class="diZw70 diZmxAuto">
<tr>
<th class="name">Name</th>
<th class="min-max">Min/Max</th>
<th class="limit">Limit</th>
<th class="type">Type</th>
<th class="diZTableBorder diZPadding5px">Name</th>
<th class="diZTableBorder diZPadding5px">Min/Max</th>
<th class="diZTableBorder diZPadding5px">Limit</th>
<th class="diZTableBorder diZPadding5px">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>
<td class="diZTableBorder diZPadding5px">Meta Title</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">55</td>
<td class="diZTableBorder diZPadding5px">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>
<td class="diZTableBorder diZPadding5px">Meta Description</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">160</td>
<td class="diZTableBorder diZPadding5px">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>
<td class="diZTableBorder diZPadding5px">Google Ideal Post Content</td>
<td class="diZTableBorder diZPadding5px">Min</td>
<td class="diZTableBorder diZPadding5px">300</td>
<td class="diZTableBorder diZPadding5px">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>
<td class="diZTableBorder diZPadding5px">Instagram Captions/Comments</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">2200</td>
<td class="diZTableBorder diZPadding5px">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>
<td class="diZTableBorder diZPadding5px">Twitter Post</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">280</td>
<td class="diZTableBorder diZPadding5px">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>
<td class="diZTableBorder diZPadding5px">Twitter Username</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">20</td>
<td class="diZTableBorder diZPadding5px">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>
<td class="diZTableBorder diZPadding5px">Facebook Wall Post (Truncation)</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">477</td>
<td class="diZTableBorder diZPadding5px">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>
<td class="diZTableBorder diZPadding5px">Facebook Wall Post (All)</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">63206</td>
<td class="diZTableBorder diZPadding5px">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>
<td class="diZTableBorder diZPadding5px">Facebook Comment</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">8000</td>
<td class="diZTableBorder diZPadding5px">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>
<td class="diZTableBorder diZPadding5px">Facebook Page Description</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">255</td>
<td class="diZTableBorder diZPadding5px">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>
<td class="diZTableBorder diZPadding5px">Facebook Username</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">50</td>
<td class="diZTableBorder diZPadding5px">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>
<td class="diZTableBorder diZPadding5px">Facebook Messenger Message</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">20000</td>
<td class="diZTableBorder diZPadding5px">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>
<td class="diZTableBorder diZPadding5px">YouTube Video Title</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">70</td>
<td class="diZTableBorder diZPadding5px">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>
<td class="diZTableBorder diZPadding5px">YouTube Video Description</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">5000</td>
<td class="diZTableBorder diZPadding5px">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>
<td class="diZTableBorder diZPadding5px">Snapchat Caption</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">250</td>
<td class="diZTableBorder diZPadding5px">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>
<td class="diZTableBorder diZPadding5px">Pinterest Pin Description</td>
<td class="diZTableBorder diZPadding5px">Max</td>
<td class="diZTableBorder diZPadding5px">500</td>
<td class="diZTableBorder diZPadding5px">Letter</td>
</tr>
</table>
<div>
<h3>Usage:</h3>
<ul>
<li><strong>Enter Information:</strong> Input the required information, including Title, Description, Image URL, URL, Author, Keywords, Twitter Title, Twitter Description, Twitter Image URL, and Twitter Card Type, into the respective fields in the form.</li>
<li><strong>Generate Meta Tags:</strong> Click the "Generate" button to create the Open Graph and Twitter meta tags based on the provided information.</li>
<li><strong>Copy Meta Tags:</strong> The generated meta tags will appear in the output area. Click the "Copy" button to copy the meta tags to your clipboard.</li>
<li><strong>Paste and Use:</strong> Paste the copied meta tags into the head section of your HTML document to enhance your webpage's social media integration and SEO.</li>
</ul>
<h3>Features:</h3>
<ul>
<li>Generates Open Graph meta tags for improved social media sharing.</li>
<li>Generates Twitter meta tags for optimized content sharing on Twitter.</li>
<li>Provides a clear and user-friendly form to input all necessary information.</li>
<li>Includes a "Copy to Clipboard" function for easy integration into your HTML code.</li>
<li>Displays a "Meta tags copied to clipboard!" notification upon copying.</li>
</ul>
<h3>Example Use Cases:</h3>
<ul>
<li>Web developers optimizing websites for social media sharing.</li>
<li>Content creators ensuring their articles and posts are displayed attractively on social media platforms.</li>
<li>SEO specialists enhancing webpage metadata for better search engine rankings.</li>
<li>Bloggers and marketers improving the visibility and engagement of their content on social media.</li>
</ul>
</div>
</section>
<script>
const form = document.getElementById('metaForm');
const generatedMetaTags = document.getElementById('generatedMetaTags');
const copiedNotice = document.getElementById('copied-notice');
form.addEventListener('submit', function(event) {
event.preventDefault();
@@ -181,12 +224,14 @@
<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}`;
if(metaTags.length > 20) {
generatedMetaTags.style.display = "block";
}
generatedMetaTags.innerText = `${metaTags}`;
});
function copyToClipboard() {
const metaTags = document.getElementById('generatedMetaTags');
const textarea = document.createElement('textarea');
@@ -195,99 +240,11 @@
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);
}
copiedNotice.style.display = 'block';
copiedNotice.innerHTML = 'Meta tags copied to clipboard!';
/* Header Styles */
.og-title {
margin-top: 0;
font-size: 24px;
text-align: center;
setTimeout(() => {
copiedNotice.style.display = 'none';
}, 3000);
}
/* 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>
</script>