{"id":4519,"date":"2025-05-25T09:02:58","date_gmt":"2025-05-25T09:02:58","guid":{"rendered":"https:\/\/ingenio.vip\/?post_type=tools-pages&#038;p=4519"},"modified":"2025-05-25T09:03:02","modified_gmt":"2025-05-25T09:03:02","slug":"twitter-card-generator","status":"publish","type":"tools-pages","link":"https:\/\/ingenio.vip\/zh\/tools-pages\/twitter-card-generator\/","title":{"rendered":"Twitter Card Generator"},"content":{"rendered":"<div class=\"ingenio-tool twitter-card-generator\" role=\"region\" aria-labelledby=\"twitter-card-generator-title\">\r\n  <h2 id=\"twitter-card-generator-title\">Twitter Card Generator<\/h2>\r\n\r\n  <form class=\"form-group\" onsubmit=\"return false;\" aria-describedby=\"twitter-card-result\" action=\"\">\r\n    <label for=\"twitter-card-type\"><strong>Card Type:<\/strong><\/label>\r\n    <select id=\"twitter-card-type\" aria-required=\"true\">\r\n      <option value=\"summary\" selected>Summary (small image)<\/option>\r\n      <option value=\"summary_large_image\">Summary Large Image<\/option>\r\n      <option value=\"app\">App<\/option>\r\n      <option value=\"player\">Player (video\/audio)<\/option>\r\n    <\/select>\r\n\r\n    <label for=\"twitter-card-title\"><strong>Title:<\/strong><\/label>\r\n    <input type=\"text\" id=\"twitter-card-title\" placeholder=\"e.g. Amazing Product\" aria-required=\"true\" maxlength=\"70\" \/>\r\n\r\n    <label for=\"twitter-card-description\"><strong>Description:<\/strong><\/label>\r\n    <textarea id=\"twitter-card-description\" rows=\"3\" placeholder=\"A short description (max 200 chars)\" aria-required=\"true\" maxlength=\"200\"><\/textarea>\r\n\r\n    <label for=\"twitter-card-image\"><strong>Image URL:<\/strong><\/label>\r\n    <input type=\"url\" id=\"twitter-card-image\" placeholder=\"https:\/\/example.com\/image.jpg\" \/>\r\n\r\n    <button type=\"button\" id=\"generate-twitter-card\">Generate Meta Tags<\/button>\r\n  <input type=\"hidden\" name=\"trp-form-language\" value=\"zh\"\/><\/form>\r\n\r\n  <section id=\"twitter-card-result\" aria-live=\"polite\" style=\"margin-top:20px;\">\r\n    <h3>Generated Twitter Card Meta Tags:<\/h3>\r\n    <pre id=\"twitter-card-meta\" tabindex=\"0\" style=\"white-space: pre-wrap; background:#f0f0f0; padding:15px; border-radius:8px; font-family: monospace;\"><\/pre>\r\n    <button id=\"copy-twitter-card\" aria-label=\"Copy Twitter Card meta tags to clipboard\" style=\"margin-top:10px; padding:10px 15px; background:#1DA1F2; color:#fff; border:none; border-radius:6px; cursor:pointer;\">Copy to Clipboard<\/button>\r\n  <\/section>\r\n<\/div>\r\n\r\n<style>\r\n  .ingenio-tool.twitter-card-generator {\r\n    max-width: 1200px;\r\n    margin: 30px auto;\r\n    padding: 25px;\r\n    background: #f9fafa;\r\n    border-radius: 12px;\r\n    box-shadow: 0 6px 18px rgba(29,161,242,0.15);\r\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n    color: #111;\r\n  }\r\n\r\n  .ingenio-tool.twitter-card-generator h2 {\r\n    text-align: center;\r\n    margin-bottom: 25px;\r\n    color: #1DA1F2;\r\n  }\r\n\r\n  .form-group {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 15px;\r\n  }\r\n\r\n  .form-group label {\r\n    font-weight: 600;\r\n  }\r\n\r\n  .form-group input, \r\n  .form-group textarea, \r\n  .form-group select {\r\n    padding: 10px;\r\n    font-size: 1rem;\r\n    border-radius: 6px;\r\n    border: 1.5px solid #ccc;\r\n    transition: border-color 0.3s;\r\n    width: 100%;\r\n  }\r\n\r\n  .form-group input:focus,\r\n  .form-group textarea:focus,\r\n  .form-group select:focus {\r\n    border-color: #1DA1F2;\r\n    outline: none;\r\n  }\r\n\r\n  button#generate-twitter-card {\r\n    padding: 12px;\r\n    font-size: 1.1rem;\r\n    background-color: #1DA1F2;\r\n    color: white;\r\n    border: none;\r\n    border-radius: 8px;\r\n    cursor: pointer;\r\n    transition: background-color 0.25s;\r\n  }\r\n\r\n  button#generate-twitter-card:hover {\r\n    background-color: #0d95e8;\r\n  }\r\n\r\n  #twitter-card-result h3 {\r\n    margin-bottom: 8px;\r\n    font-weight: 600;\r\n  }\r\n\r\n  button#copy-twitter-card {\r\n    font-size: 1rem;\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  document.addEventListener(\"DOMContentLoaded\", () => {\r\n    const cardTypeInput = document.getElementById('twitter-card-type');\r\n    const titleInput = document.getElementById('twitter-card-title');\r\n    const descInput = document.getElementById('twitter-card-description');\r\n    const imageInput = document.getElementById('twitter-card-image');\r\n    const generateBtn = document.getElementById('generate-twitter-card');\r\n    const metaPre = document.getElementById('twitter-card-meta');\r\n    const copyBtn = document.getElementById('copy-twitter-card');\r\n\r\n    function escapeHTML(str) {\r\n      return str.replace(\/[&<>\"']\/g, function(m) {\r\n        return {\r\n          '&': '&amp;',\r\n          '<': '&lt;',\r\n          '>': '&gt;',\r\n          '\"': '&quot;',\r\n          \"'\": '&#39;'\r\n        }[m];\r\n      });\r\n    }\r\n\r\n    function generateMetaTags() {\r\n      const cardType = cardTypeInput.value.trim();\r\n      const title = titleInput.value.trim();\r\n      const description = descInput.value.trim();\r\n      const image = imageInput.value.trim();\r\n\r\n      if (!title || !description) {\r\n        metaPre.textContent = '\u26a0\ufe0f Title and Description are required.';\r\n        return;\r\n      }\r\n\r\n      let tags = [\r\n        `<meta name=\"twitter:card\" content=\"${escapeHTML(cardType)}\" \/>`,\r\n        `<meta name=\"twitter:title\" content=\"${escapeHTML(title)}\" \/>`,\r\n        `<meta name=\"twitter:description\" content=\"${escapeHTML(description)}\" \/>`\r\n      ];\r\n\r\n      if (image) {\r\n        tags.push(`<meta name=\"twitter:image\" content=\"${escapeHTML(image)}\" \/>`);\r\n      }\r\n\r\n      metaPre.textContent = tags.join('\\n');\r\n    }\r\n\r\n    generateBtn.addEventListener('click', generateMetaTags);\r\n\r\n    copyBtn.addEventListener('click', () => {\r\n      if (!metaPre.textContent.trim()) return;\r\n      navigator.clipboard.writeText(metaPre.textContent).then(() => {\r\n        alert('Copied Twitter Card meta tags to clipboard!');\r\n      });\r\n    });\r\n  });\r\n<\/script>\r\n\n\n\n\n<p><a href=\"https:\/\/ingenio.vip\/wp-admin\/admin.php?page=ingenio-tools-twitter-card-generator\"><\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Twitter Card Generator Card Type: Summary (small image) Summary Large Image App Player (video\/audio) Title: Description: Image URL: Generate Meta Tags Generated Twitter Card Meta Tags: Copy to Clipboard<\/p>\n<\/p><div class=\"more-link\"><a href=\"https:\/\/ingenio.vip\/zh\/tools-pages\/twitter-card-generator\/\" class=\"btn btn-small btn--dark btn-hover-shadow\"><span class=\"text\">Continue Reading<\/span><i class=\"seoicon-right-arrow\"><\/i><\/a><\/div>","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"elementor_header_footer","meta":{"_acf_changed":false,"googlesitekit_rrm_CAowrpbbCw:productID":"","footnotes":""},"tools-categories":[],"class_list":["post-4519","tools-pages","type-tools-pages","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages"}],"about":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/types\/tools-pages"}],"author":[{"embeddable":true,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4519\/revisions"}],"predecessor-version":[{"id":4520,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4519\/revisions\/4520"}],"wp:attachment":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/media?parent=4519"}],"wp:term":[{"taxonomy":"tools-categories","embeddable":true,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-categories?post=4519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}