Social Media Tools Suite

Complete toolkit for content creators and social media managers

Hashtag Generator

Generate relevant and trending hashtags for your posts to increase discoverability

15
Click "Generate Hashtags" to get started!

Caption Generator

Create engaging captions that drive interaction and tell your story

Click "Generate Caption" to create an engaging caption for your post!

Post Scheduler

Plan and organize your content schedule offline - export to CSV for external tools

Add New Post

Scheduled Posts

Content Calendar Planner

Visual calendar to plan your content strategy and maintain consistency

Engagement Rate Calculator

Calculate your engagement rate to measure content performance

Post Engagement

Results

Enter your engagement data to see results

Follower Growth Tracker

Track your follower growth across different platforms over time

Growth History

Content Idea Generator

Get fresh content ideas tailored to your niche and audience

Click "Generate Ideas" to get content inspiration!

Bio Generator

Create compelling social media bios that capture your personality and brand

Fill in your details to generate a personalized bio!

Link in Bio Creator

Create a simple link tree for your social media bio

Add Links

Preview

Your Link Tree

Story Template Generator

Get creative templates and ideas for Instagram/Facebook Stories

Select your story type and topic to get creative templates!

Post Template Creator

Ready-to-use post templates for consistent, engaging content

Choose a template type to get started with your post structure!

Brand Color Palette Creator

Generate beautiful color palettes for your brand and social media content

Click "Generate Palette" to create your brand colors!

Font Pairing Tool

Discover perfect font combinations for your social media graphics

Click "Generate Pairing" to see font combinations!

Image Size Guide

Reference guide for optimal image dimensions across all social platforms

Platform Content Type Dimensions Aspect Ratio

Video Length Calculator

Calculate optimal video lengths and file sizes for different platforms

Video Specifications

Results

Enter video specifications to see optimal settings and file size estimates

FreeWWW A free tool from FreeWWW.com

My Links

${bioLinks.map(link => `${link.title}`).join('')} `; const blob = new Blob([html], { type: 'text/html' }); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'my-link-tree.html'; a.click(); window.URL.revokeObjectURL(url); } // Story Templates function generateStoryTemplate() { const type = document.getElementById('story-type').value; const topic = document.getElementById('story-topic').value; const templates = { poll: [ `šŸ“Š Quick Poll Time!\n\n${topic || 'Your topic here'} - what's your take?\n\nA) Option 1\nB) Option 2\n\nVote in the poll sticker! šŸ‘†`, `Help me decide! šŸ¤”\n\n${topic || 'Your decision'}\n\nWhich option speaks to you?\n\nSwipe up to vote!`, `Community question! šŸ’­\n\n${topic || 'Your question'}\n\nYour opinion matters - let me know what you think!` ], quiz: [ `šŸ§  Quiz Time!\n\nHow well do you know ${topic || 'this topic'}?\n\nQuestion: [Your question here]\n\nA) Answer 1\nB) Answer 2\nC) Answer 3\n\nComment your answer!`, `Test your knowledge! šŸ“š\n\n${topic || 'Topic'} edition\n\nTrue or False:\n[Your statement here]\n\nWhat do you think?`, `Pop Quiz! āš”\n\nFill in the blank:\n\nThe best thing about ${topic || 'your topic'} is _____\n\nComment below!` ], tutorial: [ `How-To: ${topic || 'Your Tutorial'} šŸ“‹\n\nStep 1: [First step]\nStep 2: [Second step]\nStep 3: [Third step]\n\nSave this for later! šŸ’¾`, `Quick Tutorial Tuesday! šŸ”§\n\n${topic || 'Your skill'} in 3 easy steps:\n\n1ļøāƒ£ [Step one]\n2ļøāƒ£ [Step two]\n3ļøāƒ£ [Step three]\n\nTry it and let me know how it goes!`, `Tutorial Time! šŸŽÆ\n\nMastering ${topic || 'this skill'}\n\nāœ… [Tip 1]\nāœ… [Tip 2]\nāœ… [Tip 3]\n\nWhich tip will you try first?` ], 'behind-scenes': [ `Behind the Scenes šŸŽ¬\n\n${topic || 'Today\'s process'}\n\nWhat you see vs what actually happens:\n\nReality: [Honest moment]\n\nIt's not always perfect, but it's real! āœØ`, `The real story behind ${topic || 'this content'} šŸ‘€\n\nTime taken: [X hours]\nAttempts: [X tries]\nCoffee consumed: [Too much] ā˜•\n\nWorth it? Absolutely! šŸ’Ŗ`, `Peek behind the curtain! šŸŽ­\n\n${topic || 'Current project'} update:\n\nšŸ“ Where I'm at\nšŸŽÆ What's next\nšŸ¤” Current challenge\n\nThe journey continues...` ], 'product-showcase': [ `Product Spotlight! āœØ\n\n${topic || 'Featured product'}\n\nšŸ’ What I love about it:\n[Key benefit 1]\n[Key benefit 2]\n[Key benefit 3]\n\nQuestions? Ask away! šŸ‘‡`, `Game Changer Alert! šŸšØ\n\n${topic || 'This product'} has completely changed how I [do something]\n\nBefore: [Old way]\nAfter: [New way]\n\nSwipe up for details! ā¬†ļø`, `Honest Review Time šŸ’Æ\n\n${topic || 'Product name'}\n\nā­ Rating: [X]/5\nāœ… Pros: [List pros]\nāŒ Cons: [Be honest]\n\nWould I recommend? [Yes/No and why]` ], motivational: [ `Monday Motivation šŸ’Ŗ\n\n"${topic || 'Your inspirational quote'}"\n\nRemember: You're capable of amazing things!\n\nWhat are you conquering today? šŸ”„`, `āœØ Daily Reminder āœØ\n\n${topic || 'Your message'}\n\nYou didn't come this far to only come this far.\n\nKeep pushing! šŸš€`, `Motivation Monday! šŸŒŸ\n\n${topic || 'Your theme'}\n\nProgress > Perfection\nGrowth > Comfort\nAction > Fear\n\nWhat's your next move? šŸ’«` ] }; const typeTemplates = templates[type]; const randomTemplate = typeTemplates[Math.floor(Math.random() * typeTemplates.length)]; document.getElementById('story-results').innerHTML = ` 
${randomTemplate}
`; } function generateAnotherStory() { generateStoryTemplate(); } // Post Templates function generatePostTemplate() { const type = document.getElementById('template-type').value; const templates = { educational: { title: "Educational Carousel Template", content: `šŸŽ“ SLIDE 1: Hook "Did you know? [Surprising fact about your topic]" šŸ“Š SLIDE 2: Problem "The issue most people face with [topic]..." šŸ’” SLIDE 3-5: Solutions 3 actionable tips to solve the problem āœ… SLIDE 6: Takeaway "Remember: [Key message]" šŸ’¬ SLIDE 7: Engagement "Which tip will you try first? Comment below!" #education #tips #learning #growth` }, testimonial: { title: "Customer Testimonial Template", content: `āœØ SUCCESS STORY ALERT! āœØ Meet [Customer Name]: šŸ‘„ Background: [Brief description] šŸŽÆ Goal: [What they wanted to achieve] āš” Results: [Specific outcomes] "[Customer quote about their experience]" This is why I love what I do! šŸ’Ŗ Ready to start your own success story? šŸ‘‡ Comment "READY" below #success #testimonial #transformation #results` }, 'product-feature': { title: "Product Feature Template", content: `šŸš€ FEATURE SPOTLIGHT Introducing: [Product Feature Name] šŸ” What it does: [Brief explanation of the feature] šŸ’Æ Why you'll love it: āœ… [Benefit 1] āœ… [Benefit 2] āœ… [Benefit 3] šŸ“ø Swipe to see it in action! Questions? Drop them below! šŸ‘‡ #product #innovation #features #newrelease` }, 'tip-list': { title: "Tips & Tricks Template", content: `šŸ’” [NUMBER] GAME-CHANGING TIPS For [your audience/topic]: 1ļøāƒ£ [Tip 1 with brief explanation] 2ļøāƒ£ [Tip 2 with brief explanation] 3ļøāƒ£ [Tip 3 with brief explanation] 4ļøāƒ£ [Tip 4 with brief explanation] 5ļøāƒ£ [Tip 5 with brief explanation] šŸ’¾ Save this post for later! šŸ‘„ Tag someone who needs to see this! Which tip resonates most with you? #tips #hacks #productivity #advice` }, 'before-after': { title: "Before & After Template", content: `āœØ TRANSFORMATION TUESDAY āœØ BEFORE āž”ļø AFTER šŸ“… Timeline: [Duration] šŸŽÆ Goal: [What was the objective] BEFORE: āŒ [Challenge 1] āŒ [Challenge 2] āŒ [Challenge 3] AFTER: āœ… [Achievement 1] āœ… [Achievement 2] āœ… [Achievement 3] šŸ”‘ Key changes: ā€¢ [Change 1] ā€¢ [Change 2] ā€¢ [Change 3] Your transformation is possible too! šŸ’Ŗ #transformation #beforeandafter #progress #motivation` }, quote: { title: "Inspirational Quote Template", content: `"[Your inspirational quote]" This quote hit me differently today... šŸ’­ Here's why it matters: [Personal reflection or explanation of why this quote is meaningful] Sometimes we need these reminders that: āœØ [Key insight 1] āœØ [Key insight 2] āœØ [Key insight 3] What quote has been inspiring you lately? Share it in the comments! šŸ‘‡ #motivation #inspiration #mindset #growth` } }; const template = templates[type]; document.getElementById('post-template-results').innerHTML = `

${template.title}

${template.content}
`; } function customizeTemplate() { alert('šŸ’” Customization Tips:\n\nā€¢ Replace bracketed placeholders with your content\nā€¢ Adjust the tone to match your brand voice\nā€¢ Add your relevant hashtags\nā€¢ Include your call-to-action\nā€¢ Personalize with your experiences'); } // Color Palette Generator function generateColorPalette() { const baseColor = document.getElementById('base-color').value; const style = document.getElementById('palette-style').value; const colors = generateColorScheme(baseColor, style); displayColorPalette(colors); saveToStorage('last-color-palette', colors); } function generateColorScheme(baseColor, style) { const hsl = hexToHsl(baseColor); let colors = [baseColor]; switch(style) { case 'monochromatic': colors = [ hslToHex(hsl.h, hsl.s, Math.min(hsl.l + 0.3, 1)), hslToHex(hsl.h, hsl.s, Math.min(hsl.l + 0.15, 1)), baseColor, hslToHex(hsl.h, hsl.s, Math.max(hsl.l - 0.15, 0)), hslToHex(hsl.h, hsl.s, Math.max(hsl.l - 0.3, 0)) ]; break; case 'complementary': colors = [ baseColor, hslToHex((hsl.h + 0.5) % 1, hsl.s, hsl.l), hslToHex(hsl.h, hsl.s * 0.5, hsl.l), hslToHex((hsl.h + 0.5) % 1, hsl.s * 0.5, hsl.l), hslToHex(hsl.h, hsl.s, hsl.l * 0.8) ]; break; case 'triadic': colors = [ baseColor, hslToHex((hsl.h + 0.33) % 1, hsl.s, hsl.l), hslToHex((hsl.h + 0.66) % 1, hsl.s, hsl.l), hslToHex(hsl.h, hsl.s * 0.7, hsl.l * 1.2), hslToHex(hsl.h, hsl.s * 0.5, hsl.l * 0.8) ]; break; case 'analogous': colors = [ hslToHex((hsl.h - 0.08) % 1, hsl.s, hsl.l), hslToHex((hsl.h - 0.04) % 1, hsl.s, hsl.l), baseColor, hslToHex((hsl.h + 0.04) % 1, hsl.s, hsl.l), hslToHex((hsl.h + 0.08) % 1, hsl.s, hsl.l) ]; break; case 'split-complementary': colors = [ baseColor, hslToHex((hsl.h + 0.42) % 1, hsl.s, hsl.l), hslToHex((hsl.h + 0.58) % 1, hsl.s, hsl.l), hslToHex(hsl.h, hsl.s * 0.6, hsl.l * 1.1), hslToHex(hsl.h, hsl.s * 0.8, hsl.l * 0.9) ]; break; } return colors; } function displayColorPalette(colors) { const swatchContainer = document.getElementById('color-swatches'); const codesContainer = document.getElementById('color-codes'); swatchContainer.innerHTML = colors.map(color => `
` ).join(''); codesContainer.innerHTML = `

Color Codes:

${colors.map(color => `
${color}
`).join('')}
`; } function randomizePalette() { const randomHue = Math.random(); const randomColor = hslToHex(randomHue, 0.7, 0.5); document.getElementById('base-color').value = randomColor; generateColorPalette(); } // Color utility functions function hexToHsl(hex) { const r = parseInt(hex.slice(1, 3), 16) / 255; const g = parseInt(hex.slice(3, 5), 16) / 255; const b = parseInt(hex.slice(5, 7), 16) / 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); const diff = max - min; const sum = max + min; const l = sum / 2; let h, s; if (diff === 0) { h = s = 0; } else { s = l > 0.5 ? diff / (2 - sum) : diff / sum; switch (max) { case r: h = ((g - b) / diff + (g < b ? 6 : 0)) / 6; break; case g: h = ((b - r) / diff + 2) / 6; break; case b: h = ((r - g) / diff + 4) / 6; break; } } return { h, s, l }; } function hslToHex(h, s, l) { const c = (1 - Math.abs(2 * l - 1)) * s; const x = c * (1 - Math.abs((h * 6) % 2 - 1)); const m = l - c / 2; let r, g, b; if (h < 1/6) { r = c; g = x; b = 0; } else if (h < 2/6) { r = x; g = c; b = 0; } else if (h < 3/6) { r = 0; g = c; b = x; } else if (h < 4/6) { r = 0; g = x; b = c; } else if (h < 5/6) { r = x; g = 0; b = c; } else { r = c; g = 0; b = x; } r = Math.round((r + m) * 255); g = Math.round((g + m) * 255); b = Math.round((b + m) * 255); return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`; } // Font Pairing Tool function generateFontPairing() { const style = document.getElementById('font-style').value; const fontPairings = { modern: [ { heading: 'Montserrat', body: 'Open Sans', description: 'Clean and contemporary' }, { heading: 'Poppins', body: 'Source Sans Pro', description: 'Friendly and approachable' }, { heading: 'Roboto', body: 'Lato', description: 'Professional and readable' } ], elegant: [ { heading: 'Playfair Display', body: 'Source Sans Pro', description: 'Sophisticated serif with clean sans-serif' }, { heading: 'Cormorant Garamond', body: 'Proza Libre', description: 'Classic elegance meets modern simplicity' }, { heading: 'Crimson Text', body: 'Open Sans', description: 'Traditional serif with contemporary sans-serif' } ], playful: [ { heading: 'Quicksand', body: 'Nunito', description: 'Rounded and friendly' }, { heading: 'Comfortaa', body: 'Source Sans Pro', description: 'Geometric and approachable' }, { heading: 'Fredoka One', body: 'Open Sans', description: 'Fun display with readable body' } ], professional: [ { heading: 'Merriweather', body: 'Open Sans', description: 'Authoritative serif with clean sans-serif' }, { heading: 'Source Serif Pro', body: 'Source Sans Pro', description: 'Professional family pairing' }, { heading: 'Libre Baskerville', body: 'Source Sans Pro', description: 'Classic and trustworthy' } ], creative: [ { heading: 'Amatic SC', body: 'Open Sans', description: 'Handwritten charm with clean readability' }, { heading: 'Abril Fatface', body: 'Lato', description: 'Bold display with elegant body' }, { heading: 'Pacifico', body: 'Open Sans', description: 'Script headline with simple body' } ] }; const pairings = fontPairings[style]; const randomPairing = pairings[Math.floor(Math.random() * pairings.length)]; document.getElementById('font-display').innerHTML = `

Beautiful Heading

This is your body text. It should be highly readable and complement your heading font perfectly. The combination creates visual hierarchy and maintains excellent readability across all devices.

Heading: ${randomPairing.heading}

Body: ${randomPairing.body}

Style: ${randomPairing.description}

`; } function nextFontPairing() { generateFontPairing(); } // Image Size Guide function populateSizeGuide() { const sizeData = { pixels: { 'Instagram': [ ['Feed Post (Square)', '1080 x 1080', '1:1'], ['Feed Post (Portrait)', '1080 x 1350', '4:5'], ['Stories', '1080 x 1920', '9:16'], ['Reels', '1080 x 1920', '9:16'], ['Profile Picture', '320 x 320', '1:1'] ], 'Facebook': [ ['Feed Post', '1200 x 630', '1.91:1'], ['Stories', '1080 x 1920', '9:16'], ['Cover Photo', '820 x 312', '2.63:1'], ['Profile Picture', '180 x 180', '1:1'], ['Event Cover', '1920 x 1080', '16:9'] ], 'Twitter/X': [ ['Post Image', '1200 x 675', '16:9'], ['Header Photo', '1500 x 500', '3:1'], ['Profile Picture', '400 x 400', '1:1'], ['Card Image', '1200 x 628', '1.91:1'] ], 'LinkedIn': [ ['Feed Post', '1200 x 627', '1.91:1'], ['Cover Photo', '1584 x 396', '4:1'], ['Profile Picture', '400 x 400', '1:1'], ['Company Logo', '300 x 300', '1:1'] ], 'TikTok': [ ['Video', '1080 x 1920', '9:16'], ['Profile Picture', '200 x 200', '1:1'] ], 'YouTube': [ ['Thumbnail', '1280 x 720', '16:9'], ['Channel Art', '2560 x 1440', '16:9'], ['Profile Picture', '800 x 800', '1:1'], ['Shorts', '1080 x 1920', '9:16'] ], 'Pinterest': [ ['Pin (Standard)', '1000 x 1500', '2:3'], ['Pin (Square)', '1000 x 1000', '1:1'], ['Profile Picture', '165 x 165', '1:1'], ['Board Cover', '222 x 150', '1.48:1'] ] } }; updateSizeGuideTable(sizeData.pixels); } function updateSizeGuideTable(data) { const tbody = document.getElementById('size-guide-tbody'); let html = ''; Object.keys(data).forEach(platform => { data[platform].forEach(([type, dimensions, ratio], index) => { html += ` ${index === 0 ? `${platform}` : ''} ${type} ${dimensions} ${ratio} `; }); }); tbody.innerHTML = html; } function toggleUnits(unit) { currentUnit = unit; // Update toggle buttons document.querySelectorAll('.toggle-btn').forEach(btn => { btn.classList.remove('active'); }); event.target.classList.add('active'); // Convert and update table based on unit // For simplicity, we'll just show the concept - full conversion would require more complex calculations if (unit === 'pixels') { populateSizeGuide(); } else { alert(`Unit conversion to ${unit} - This would show dimensions converted to ${unit} based on standard DPI calculations`); } } // Video Calculator function calculateVideo() { const platform = document.getElementById('video-platform').value; const duration = parseInt(document.getElementById('video-duration').value); const quality = document.getElementById('video-quality').value; if (!duration || duration <= 0) { alert('Please enter a valid duration'); return; } const platformSpecs = { 'instagram-reel': { maxDuration: 90, optimalDuration: '15-30', aspectRatio: '9:16' }, 'instagram-story': { maxDuration: 60, optimalDuration: '15', aspectRatio: '9:16' }, 'tiktok': { maxDuration: 600, optimalDuration: '15-60', aspectRatio: '9:16' }, 'youtube-short': { maxDuration: 60, optimalDuration: '15-60', aspectRatio: '9:16' }, 'twitter': { maxDuration: 140, optimalDuration: '6-15', aspectRatio: '16:9 or 1:1' }, 'linkedin': { maxDuration: 600, optimalDuration: '30-90', aspectRatio: '16:9' } }; const qualitySpecs = { '720p': { width: 1280, height: 720, bitrateFactor: 1 }, '1080p': { width: 1920, height: 1080, bitrateFactor: 1.5 }, '4k': { width: 3840, height: 2160, bitrateFactor: 4 } }; const spec = platformSpecs[platform]; const qualitySpec = qualitySpecs[quality]; // Rough file size calculation (very simplified) const baseBitrate = 2000; // kbps const estimatedBitrate = baseBitrate * qualitySpec.bitrateFactor; const fileSizeMB = (estimatedBitrate * duration * 0.125) / 1000; // Convert to MB let warnings = []; if (duration > spec.maxDuration) { warnings.push(`āš ļø Duration exceeds platform maximum of ${spec.maxDuration} seconds`); } const optimalRange = spec.optimalDuration.split('-'); const isOptimal = optimalRange.length === 2 ? (duration >= parseInt(optimalRange[0]) && duration <= parseInt(optimalRange[1])) : duration <= parseInt(optimalRange[0]); if (!isOptimal) { warnings.push(`šŸ’” Optimal duration for ${platform}: ${spec.optimalDuration} seconds`); } document.getElementById('video-results').innerHTML = `

Video Analysis

Platform: ${platform.replace('-', ' ').toUpperCase()}

Duration: ${duration} seconds (${Math.floor(duration/60)}:${(duration%60).toString().padStart(2,'0')})

Quality: ${quality} (${qualitySpec.width}x${qualitySpec.height})

Aspect Ratio: ${spec.aspectRatio}

Estimated File Size: ~${fileSizeMB.toFixed(1)} MB

Recommended Bitrate: ${estimatedBitrate.toLocaleString()} kbps

Max Duration: ${spec.maxDuration} seconds

Optimal Duration: ${spec.optimalDuration} seconds

${warnings.length > 0 ? `
${warnings.map(warning => `

${warning}

`).join('')}
` : `

āœ… Video specifications look good for ${platform}!

`}
`; } // Utility functions function copyToClipboard(text) { if (navigator.clipboard) { navigator.clipboard.writeText(text).then(() => { showToast('Copied to clipboard!'); }); } else { // Fallback for older browsers const textArea = document.createElement('textarea'); textArea.value = text; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); showToast('Copied to clipboard!'); } } function showToast(message) { const toast = document.createElement('div'); toast.textContent = message; toast.style.cssText = ` position: fixed; top: 20px; right: 20px; background: #1e3a8a; color: white; padding: 12px 20px; border-radius: 8px; z-index: 1000; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.1); `; document.body.appendChild(toast); setTimeout(() => { toast.style.opacity = '0'; toast.style.transition = 'opacity 0.3s ease'; setTimeout(() => document.body.removeChild(toast), 300); }, 2000); } function saveToStorage(key, data) { try { // Note: localStorage is mentioned as potentially not working in Claude's environment // This is included as requested but may not function in the artifact preview localStorage.setItem(key, JSON.stringify(data)); } catch (e) { console.log('Storage not available:', e); } } function getFromStorage(key) { try { const data = localStorage.getItem(key); return data ? JSON.parse(data) : null; } catch (e) { console.log('Storage not available:', e); return null; } } function loadData() { // Load previously saved data on page load displayScheduledPosts(); displayFollowerHistory(); displayBioLinks(); }