How to Add Social Media Buttons to Wix

• Wix Account: Any Wix plan (works on free and paid plans)
• Editor Access: Admin access to edit your Wix site
• Generated Code: NiftyButtons HTML/CSS code from our generator

Good News: Unlike some platforms, Wix allows HTML embeds on all plans, including the free plan!

1. Generate Your Social Media Icons

1. Visit the NiftyButtons Generator
2. Select your social media platforms
3. Enter your social media URLs
4. Choose your preferred size, colors, and style
5. Click "Generate Buttons"
6. Copy the complete HTML/CSS code

2. Access Wix Editor

1. Log in to your Wix account
2. Go to your website dashboard
3. Click "Edit Site" to open the Wix Editor
4. Navigate to the page where you want to add icons

3. Add HTML iframe Element

1. Click the "Add" button (+ icon) on the left sidebar
2. Select "Embed" from the menu
3. Choose "HTML iframe"
4. Drag and drop the HTML iframe to your desired location
5. The iframe element will appear on your page

4. Insert Your NiftyButtons Code

1. Click on the HTML iframe element you just added
2. Click "Enter Code" in the settings panel
3. Delete any placeholder code
4. Paste your complete NiftyButtons code
5. Click "Update" to apply the code
6. Your social media icons should now appear!

5. Adjust Size and Position

1. Resize the iframe by dragging the corners
2. Position the iframe where you want the icons
3. Adjust margins and spacing as needed
4. Preview your changes
5. Publish your site when satisfied

Footer Area (Most Popular):

• Appears on all pages automatically
• Expected location for social media
• Doesn't interfere with main content
• Easy to make site-wide changes

Header Section:

• High visibility placement
• Great for personal brands
• Consider mobile layout carefully

Contact Page:

• Natural place for connection options
• Can use larger icon sizes
• Pair with contact form and information

About Page:

• Perfect for personal/brand storytelling
• Encourage visitors to follow your journey

Sidebar (Blog/Portfolio):

• Consistent visibility across content
• Good for content creators

Iframe Sizing:

• Make iframe slightly larger than your icons
• Allow extra space for hover effects
• Test on mobile devices for proper scaling
• Consider horizontal vs. vertical icon layouts

Color Coordination:

• Match icons to your Wix template colors
• Use brand colors for consistency
• Test visibility on different backgrounds
• Consider your template's overall design style

Mobile Responsiveness:

• Use medium or large sizes for mobile visibility
• Check mobile editor preview regularly
• Ensure touch-friendly spacing
• Test on actual mobile devices

Integration Tips:

• Align with other page elements
• Maintain consistent spacing
• Use Wix's alignment guides
• Consider visual hierarchy in your layout

Icons Don't Display:

• Ensure code was pasted completely
• Check that iframe is large enough
• Verify no code was cut off during pasting
• Try refreshing the editor and preview

Icons Look Cut Off:

• Increase iframe width and height
• Allow extra space around icons
• Check for horizontal scrolling within iframe

Links Don't Work:

• Verify your social media URLs are correct
• Ensure URLs include https://
• Test links in a new browser tab
• Check that profiles are public

Mobile Display Issues:

• Use Wix mobile editor to adjust
• Test different icon sizes
• Ensure iframe responsive settings
• Consider mobile-specific placement

Can't Find HTML iframe:

• Look under "Embed" in the Add menu
• Try searching "HTML" in the add elements search
• Update to latest Wix Editor if available
• Clear browser cache and try again

Wix's Built-in Social Bar:

• Go to Add → Social → Social Bar
• Limited customization options
• Uses Wix's default styling
• Good for basic social media links

Why Choose NiftyButtons Instead:

• Complete customization control
• Match your exact brand colors
• Choose from multiple styles and sizes
• More professional appearance
• Better mobile responsiveness

Custom Code (Advanced):

For advanced users, you can also add code to site headers/footers through Wix's custom code options, but HTML iframe method is easier and more reliable.

• Save your NiftyButtons code in a text file for future updates
• Use Wix's "Duplicate Page" feature to copy icon placements
• Preview your site before publishing to check all layouts
• Consider your template's design when choosing icon styles
• Test social media links regularly to ensure they work
• Use consistent placement across all pages for better UX
• Keep icon sets small (3-5 platforms) for better mobile display