{"id":521,"date":"2026-07-16T18:24:54","date_gmt":"2026-07-16T18:24:54","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=521"},"modified":"2026-07-16T18:25:12","modified_gmt":"2026-07-16T18:25:12","slug":"social-media-tools","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/social-media-tools\/","title":{"rendered":"Social Media Tools"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n.sm-container { max-width: 900px; margin: 20px auto; font-family: sans-serif; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 25px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }\n.sm-header h1 { color: #2563eb; margin-bottom: 25px; }\n.sm-tool-grid { display: grid; grid-template-columns: 200px 1fr; gap: 30px; }\n.sm-nav-btn { display: block; width: 100%; padding: 12px; margin-bottom: 10px; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; background: #fff; text-align: left; transition: 0.3s; }\n.sm-nav-btn.active { background: #2563eb; color: #fff; border-color: #2563eb; }\n.sm-input { width: 100%; padding: 12px; border: 1px solid #d1d5db; border-radius: 8px; margin-bottom: 15px; box-sizing: border-box; }\n.sm-btn { padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; font-weight: bold; }\n.sm-btn-main { background: #000; color: #fff; }\n.sm-btn-secondary { background: #f3f4f6; color: #374151; }\n.sm-btn-success { background: #10b981; color: #fff; width: 100%; margin-top: 10px; }\n.sm-output { background: #f9fafb; padding: 15px; border-radius: 8px; border: 1px dashed #d1d5db; min-height: 50px; margin-top: 10px; word-break: break-all; }\n.sm-preview-card { border: 1px solid #e5e7eb; padding: 20px; border-radius: 12px; margin-top: 15px; }\n.sm-preview-user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }\n.sm-avatar { width: 35px; height: 35px; background: #e5e7eb; border-radius: 50%; }\n.sm-msg { margin-bottom: 10px; font-size: 0.9rem; }\n\n@media (max-width: 600px) { .sm-tool-grid { grid-template-columns: 1fr; } }\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener('DOMContentLoaded', () => {\n    \/\/ Tab Switching\n    document.querySelectorAll('.sm-nav-btn').forEach(btn => {\n        btn.addEventListener('click', (e) => {\n            document.querySelectorAll('.sm-nav-btn').forEach(b => b.classList.remove('active'));\n            e.target.classList.add('active');\n            document.querySelectorAll('.sm-tab-content').forEach(c => c.style.display = 'none');\n            document.getElementById(e.target.dataset.target).style.display = 'block';\n        });\n    });\n\n    \/\/ Hashtag Generator\n    const genBtn = document.getElementById('sm-gen-btn');\n    const out = document.getElementById('sm-output');\n    const msg = document.getElementById('sm-msg');\n    \n    genBtn.addEventListener('click', () => {\n        const input = document.getElementById('sm-hash-input').value.trim();\n        if(!input) { msg.textContent = \"Error: Please enter topics.\"; msg.style.color = \"red\"; return; }\n        const tags = input.split(',').map(t => `#${t.trim().replace(\/\\s+\/g, '')}`).join(' ');\n        out.textContent = tags;\n        msg.textContent = \"Success: Generated!\"; msg.style.color = \"green\";\n        document.getElementById('sm-copy-btn').style.display = 'block';\n    });\n\n    document.getElementById('sm-copy-btn').addEventListener('click', () => {\n        navigator.clipboard.writeText(out.textContent);\n        alert('Copied!');\n    });\n\n    \/\/ Previewer\n    document.getElementById('sm-post-input').addEventListener('input', (e) => {\n        document.getElementById('sm-preview-text').textContent = e.target.value || 'Your caption will appear here...';\n    });\n\n    document.getElementById('sm-reset-btn').addEventListener('click', () => {\n        document.getElementById('sm-post-input').value = '';\n        document.getElementById('sm-preview-text').textContent = 'Your caption will appear here...';\n    });\n    \n    document.getElementById('sm-clear-btn').addEventListener('click', () => {\n        document.getElementById('sm-hash-input').value = '';\n        out.textContent = '';\n        document.getElementById('sm-copy-btn').style.display = 'none';\n    });\n});\n<\/script>\n\n<style>\n\/* CSS Styles *\/\n.sm-wrapper { font-family: sans-serif; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 25px; max-width: 900px; margin: 20px auto; }\n.sm-nav { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 10px; }\n.sm-tab-btn { padding: 10px 20px; cursor: pointer; border: none; background: #f3f4f6; border-radius: 6px; font-weight: 600; }\n.sm-tab-btn.active { background: #2563eb; color: #fff; }\n.sm-input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; }\n.sm-btn { padding: 10px 20px; cursor: pointer; border-radius: 6px; border: none; background: #000; color: #fff; font-weight: bold; }\n.sm-output { background: #f9fafb; padding: 15px; border-radius: 8px; margin-top: 10px; min-height: 40px; border: 1px dashed #ccc; word-break: break-all; }\n.sm-preview { border: 1px solid #eee; padding: 20px; border-radius: 12px; margin-top: 20px; }\n.hidden { display: none; }\n<\/style>\n\n<div class=\"sm-wrapper\">\n    <div class=\"sm-nav\">\n        <button class=\"sm-tab-btn active\" onclick=\"showTab('gen')\">Hashtag Gen<\/button>\n        <button class=\"sm-tab-btn\" onclick=\"showTab('prev')\">Previewer<\/button>\n    <\/div>\n\n    <div id=\"gen\" class=\"tab-content\">\n        <input type=\"text\" id=\"hashInput\" class=\"sm-input\" placeholder=\"Topics (e.g. tech, coding)\">\n        <button class=\"sm-btn\" onclick=\"generate()\">Generate<\/button>\n        <button class=\"sm-btn\" style=\"background:#ef4444\" onclick=\"clearAll()\">Clear<\/button>\n        <div id=\"hashOutput\" class=\"sm-output\"><\/div>\n    <\/div>\n\n    <div id=\"prev\" class=\"tab-content hidden\">\n        <textarea id=\"postInput\" class=\"sm-input\" placeholder=\"Write caption here...\"><\/textarea>\n        <div class=\"sm-preview\">\n            <strong>Preview:<\/strong>\n            <p id=\"previewText\">Your caption will appear here&#8230;<\/p>\n        <\/div>\n        <button class=\"sm-btn\" style=\"margin-top:10px\" onclick=\"resetPreview()\">Reset<\/button>\n    <\/div>\n<\/div>\n\n<script>\nfunction showTab(tabId) {\n    document.querySelectorAll('.tab-content').forEach(t => t.classList.add('hidden'));\n    document.querySelectorAll('.sm-tab-btn').forEach(b => b.classList.remove('active'));\n    document.getElementById(tabId).classList.remove('hidden');\n    event.currentTarget.classList.add('active');\n}\n\nfunction generate() {\n    const input = document.getElementById('hashInput').value;\n    if(!input) { alert('Enter keywords'); return; }\n    const tags = input.split(',').map(t => '#' + t.trim().replace(\/\\s+\/g,'')).join(' ');\n    document.getElementById('hashOutput').textContent = tags;\n}\n\nfunction clearAll() {\n    document.getElementById('hashInput').value = '';\n    document.getElementById('hashOutput').textContent = '';\n}\n\ndocument.getElementById('postInput').addEventListener('input', (e) => {\n    document.getElementById('previewText').textContent = e.target.value;\n});\n\nfunction resetPreview() {\n    document.getElementById('postInput').value = '';\n    document.getElementById('previewText').textContent = 'Your caption will appear here...';\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Hashtag Gen Previewer Generate Clear Preview: Your caption will appear here&#8230; Reset<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-521","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=521"}],"version-history":[{"count":2,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/521\/revisions"}],"predecessor-version":[{"id":523,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/521\/revisions\/523"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}